Changing Picker.Item font family React native?

Question

<Picker
  // selectedValue={this.state.language}
  selectedValue="USD"
  style={{ height: 50, width: 100, marginRight: 10, justifyContent: 'flex-start'  }}
  itemStyle={{ fontFamily: 'Roboto_thin' }}
  // onValueChange={(itemValue, itemIndex) =>
  //   this.setState({ language: itemValue })
  // }
  >
  <Picker.Item label="USD" value="java" />
  <Picker.Item label="ETB" value="js" />
</Picker>

I want to change the font of the picker items, and i add a property itemStyle with fontFamily values. But the pickers items font is not changed.

Answer 1

As Robbie mentioned, you can use itemStyle prop.

However, the itemStyle is an advanced property only supported by iOS Platform, as you can see on React Native docs here. Therefore, for styling the Picker items, like changing the fontFamily, color, etc can be done only using Native Android styles, for now. Then it will work for both platforms.

With that in mind, you would add a new <style> tag with your resources to the style.xml file, usually localized in the path: android/app/src/main/res/values/styles.xml. And set it on AppTheme to count with the style added, e.g:

<resources>
    <!-- Base application theme. -->
    <style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
     <item name="android:spinnerItemStyle">@style/SpinnerItem</item>
     <item name="android:spinnerDropDownItemStyle">@style/SpinnerDropDownItem</item>
    </style>

    <!-- Item selected font. -->
    <style name="SpinnerItem" parent="Theme.AppCompat.Light.NoActionBar">
     <item name="android:fontFamily">casual</item>
    </style>

    <!-- Dropdown options font. -->
    <style name="SpinnerDropDownItem" parent="Theme.AppCompat.Light.NoActionBar">
      <item name="android:fontFamily">casual</item>
      <item name="android:padding">8dp</item>
    </style>
<resources>

Useful links:

• React Native Picker Android git solved issue.

Answer 2

That code should work, but I'm curious about the font name you're providing. If you're using a google font as a linked asset, that should be Roboto-Thin unless you renamed it yourself. Double check that the font name linked to your project is correct.

Another thing to note is that the Android default font is already Roboto, so you can get it's thin version via the fontWeight property:

itemStyle={{ fontWeight: '100' }} // <-- 100 is thin, 300 is light, 400 would be regular

Answer 3

I solve it by adding this code on the android\app\src\main\res\values.\styles.xml

<resources>

    
    <!-- Base application theme. -->
            <style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
                    
                    <item name="android:spinnerItemStyle">@style/SpinnerItem</item>
                    <item name="android:spinnerDropDownItemStyle">@style/SpinnerDropDownItem</item>
            </style>

            <style name="SpinnerItem" parent="Theme.AppCompat.Light.NoActionBar">
                <item name="android:textAlignment">gravity</item>
                <item name="android:gravity">start</item>
                <item name="android:fontFamily">@font/arab_font</item>

            </style>
            <style name="SpinnerDropDownItem" parent="Theme.AppCompat.Light.NoActionBar">
                <item name="android:textAlignment">gravity</item>
                <item name="android:gravity">start</item>
                <item name="android:textColor">#000000</item>

            


            </style> 


</resources>

But for the fonts names you need to create the font folder on this path android\app\src\main\res\font and the font file name should not start with capital letter all the name should include just small letters and you have to reload the Metro sever to se the changes (reload the project from the beginning).