Changing Picker.Item font family React native?

<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.

Solution 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.