React-native-picker-select: Is there an option to adjust the font and size of the font?

[sdadrianalvarez]

I want to change the fontFamily and fontSize. Thank you.

[lfkwtz]

Of what specifically? A certain element? On a specific platform or both?

[sdadrianalvarez]

I installed the "Open Sans" library on Android and I will also install it on iOS. On Android I put the TTF files in this path: "android / app / src / main / assets / fonts /".

Then, in react-native, I put something like this in the styles:

input: { fontFamily: 'OpenSans-Regular', fontSize: 13, color: 'white', },

But this does not work for "react-native-picker-select". So my question is, how can I assign these styles in Android and iOS?

Thank you

[claudelarland]

I have the same problem

[lfkwtz]

What element are you trying to target with the font? The Picker component?

[sdadrianalvarez]

@lfkwtz Yes, that's exactly what I want to do.

I tried to assign it this style but it doesn't work:

inputAndroid: { height: width * 0.11, color: cdarkblue, fontFamily: 'OpenSans-Regular', fontSize: 13, }

This image shows the problem (fifth field):

[lfkwtz]

That's unfortunately a limitation of the native Picker component as supplied by RN. If you do some research on Stack Overflow, you'll see some ways to modify it via the styles.xml file.

The solution here would be to use the "headless" mode for Android and wrap this component in a simulated input that is styled the way you want.

[sdadrianalvarez]

Oh, that's very sad.

I appreciate your help anyway.
Thank you

[lfkwtz]

It'll be a little extra work, but you can make it function exactly the same way. Look at the android-headless example for help getting started.

[ChandniSharma]

how to increase it's textInput height and font size also how to give it's background color as I tried but doesn't work any thing.
Please suggest

placeholder={{
label: 'Select subcity',
value: null,
}}
items={this.state.items2}
onValueChange={(value) => {
this.setState({
subcitySelected: value,
});
}}
onUpArrow={() => {
this.inputRefs.picker.togglePicker();
}}
onDownArrow={() => {
this.inputRefs.picker3.togglePicker();
}}
style={ homeStyle.inputIOS }
value={this.state.subcitySelected}
ref={(el) => {
this.inputRefs.picker2 = el;
}}
/>

[ssarnot]

I have same issue. Solution of our problem is very simple:

<RNPickerSelect
  // your props
  useNativeAndroidPickerStyle={false}
/>

And you should have defined fontFamily property inside your inputAndroid style object.

[ThailanHigor]

I have same issue. Solution of our problem is very simple:

<RNPickerSelect
  // your props
  useNativeAndroidPickerStyle={false}
/>

And you should have defined fontFamily property inside your inputAndroid style object.

Thanks!