Fontfamily on Picker.Item not working. FontWeight /Fontfamily not working on picker itself (preselected label/value)

[C-odes]

Hey,

It's getting really frustrating to add styling to this library.

Several stuff just dont work. Im on android. I try to add fontFamily and styling to Picker.Item, it does not work. When I try to add some to the picker itself to try to either get background color or just thicker preselected label/value , it does not work!

What am I doing wrong? Code:

Result:

Honestly even giving background Color doesnt work. Simply style={{backgroundColor: "red"}}doesnt work , nor does it on the <Picker style={{ backgroundColor: "red"}} />
Please help!

[KrisLau]

Having the same problem here

UPDATE: I ended up switching to https://github.com/hossein-zare/react-native-dropdown-picker

[osvaldokalvaitir]

I'm having the same problem, I can't style anything.

[cuongnv-dev]

You can style for item by using itemStyle props in Picker tag, but this only works in IOS. In Android, you just only change the color of the label. I'm trying to read the source code of the package but cannot find anything else

[rohithramachandran]

Then this part of documentation to be corrected.

https://github.com/react-native-picker/picker#fontfamily

[nmzgnv]

I'm having the same problem

[XeeshanAnsari]

Having the same problem. I am unable to change the font family of the picker item.

[1mehdifaraji]

Same issue

"@react-native-picker/picker": "^2.2.0" "react": "17.0.2" "react-native": "0.66.1"

[sandlands]

I would also love to see the fontFamily being applied to the Picker on Android. In the meantime, I worked around it by putting a <View> next to the <Picker> with pointerEvents='none' (so touch events are still picked up) and absolute positioning, to at least draw some label with the correct fontFamily over the original <Picker>'s selected value. Only on Android, of course.

<View>
  <Picker>
    <Picker.Item label="Option 1" value={1} />
    <Picker.Item label="Option 2" value={2} />
  </Picker>
  {Platform.OS === 'android' ? (
    <View pointerEvents='none' style={{ position: 'absolute', width: '100%', backgroundColor: 'white' }}>
      {/* Draw a label with the Picker's selected value and with the correct fontFamily here... */}
    </View>
  ) : (<View></View>)}
</View>

[HAFDIAHMED]

I am having the same problem i cant change the font family of the picker item item any help please???

[HAFDIAHMED]

I would also love to see the fontFamily being applied to the Picker on Android. In the meantime, I worked around it by putting a <View> next to the <Picker> with pointerEvents='none' (so touch events are still picked up) and absolute positioning, to at least draw some label with the correct fontFamily over the original <Picker>'s selected value. Only on Android, of course.

<View>
  <Picker>
    <Picker.Item label="Option 1" value={1} />
    <Picker.Item label="Option 2" value={2} />
  </Picker>
  {Platform.OS === 'android' ? (
    <View pointerEvents='none' style={{ position: 'absolute', width: '100%', backgroundColor: 'white' }}>
      {/* Draw a label with the Picker's selected value and with the correct fontFamily here... */}
    </View>
  ) : (<View></View>)}
</View>

it is not working ...

[HAFDIAHMED]

any other solution pleaaaaase ....

[HAFDIAHMED]

Having the same problem here

UPDATE: I ended up switching to https://github.com/hossein-zare/react-native-dropdown-picker

yes it is good but when i want to change the arrowup/down icon from right to left it didnt work .

[HAFDIAHMED]

Then this part of documentation to be corrected.

https://github.com/react-native-picker/picker#fontfamily

it doesnt help....

[HAFDIAHMED]

Then this part of documentation to be corrected.

https://github.com/react-native-picker/picker#fontfamily

not working also....

[abhijeet-kesarkar]

The amount of time i spent in finding a solution to this problem - by looking and trying other alternatives - was way more than it took me to finally implement the Picker on my own by simply using View, Pressable, Modal, Flatlist, Text components..

[askariblue]

The amount of time i spent in finding a solution to this problem - by looking and trying other alternatives - was way more than it took me to finally implement the Picker on my own by simply using View, Pressable, Modal, Flatlist, Text components..

Would you share kindly the code?

[YayoKB]

The amount of time i spent in finding a solution to this problem - by looking and trying other alternatives - was way more than it took me to finally implement the Picker on my own by simply using View, Pressable, Modal, Flatlist, Text components..

Could you please share the code? It would be greatly appreciated :)

[vincicat]

For iOS: use itemStyle prop in <Picker>, remember iOS use postscript name to set the font family, not the file name. (use otfinfo or font book app to find the name)

For Android: this is a long story as it involves native components.

after some code digging, the Android part of font-family will only work with name "serif", "sans-serif" (= built-in fonts). Turn out both calls in reactnativecommunity/picker/ReactPickerManager.java isn't working as we expected.

Typeface face = Typeface.create(style.getString("fontFamily"), Typeface.NORMAL); // for custom font, this will load the default font, and it won't let you set your fontWeight too.

the line above only support built-in fonts [related xml] [font list with preview]

so you have to deal with custom font xml and xml theming. after all the googling and stackoverflow the following works for me:

1. don't set any fontFamily in
   • <Picker>: style props
   • <Picker.Item>: style props
2. set your custom font by following official guide, remember:
   • your fonts have to put in res/font (no 's')
   • font names they must be named to match Android resources file name rule (= must contain only "lowercase a-z, 0-9, or underscore" characters), which is different from RN custom font ruleset and the setting is for native components only [explainer]; the XML file defining the font usually is the font name itself (e.g. @font/open_sans.xml for "Open Sans" font-family)
     • so to have the "Open Sans" work in both native components and js components, you have to do the setup on both side
     • e.g. for bold font of "Open Sans", this is android/app/src/main/res/font/open_sans_bold.ttf and android/app/src/main/assets/fonts/Open Sans_bold.ttf, then you can use @font/open_sans in XML file and fontFamily: "Open Sans" in .js/.ts file
     • or gain the full control by adding the "font family - font file" link manually
3. add the related font family and weight res/styles.xml below:

<!-- ... -->

     <style name="AppTheme" parent="Theme.AppCompat.DayNight.NoActionBar">
        <!-- ... everything else in mainTheme ... -->

        <!-- if you need your default font changes -->
        <item name="fontFamily">@font/open_sans</item>
        <item name="android:fontFamily">@font/open_sans</item>

       <!-- our picker styles -->
        <item name="android:spinnerItemStyle">@style/SpinnerItem</item>
        <item name="android:spinnerDropDownItemStyle">@style/SpinnerDropDownItem</item>

        <!--  if the library use appCompat components we will need this -->
        <item name="spinnerDropDownItemStyle">@style/SpinnerDropDownItem</item>
    </style>


    <!-- picker styles: Selected Item box, accept all Textview XML attr -->
    <style name="SpinnerItem" parent="@android:style/Widget.TextView.SpinnerItem">
        <item name="android:fontFamily">@font/open_sans</item>
        <item name="android:textFontWeight" tools:targetApi="28">700</item>
    </style>

    <!-- picker styles: Dialog/Dropdown options  -->
    <style name="SpinnerDropDownItem" parent="Widget.AppCompat.DropDownItem.Spinner">
        <item name="android:fontFamily">@font/open_sans</item>
    </style>

<!-- ... -->

Hope this is better documented and someone develop a tool like flutter pubspec to solve the pains.

[fedeolto]

Having the same problem here

UPDATE: I ended up switching to https://github.com/hossein-zare/react-native-dropdown-picker

Oct 2023: please note that the mentioned package has issues with scrolling on Android with RN +0.71 (dropdown list doesn't scroll)

[HAFDIAHMED]

up

[Velkamhell97]

Any update ?

[HAFDIAHMED]

Any update ?

[HAFDIAHMED]

Any update ?

[HAFDIAHMED]

up

[HAFDIAHMED]

Any changes ?

[omarqra]

i have the same problem in 2024