How to style the standard react-native android picker?

Question

I am unable to style it. There is hardly any documentation on this. I want to know how to set the fontFamily. How to set the background color on the Picker.items?

https://facebook.github.io/react-native/docs/picker.html

Setting fontFamily or background color doesn't work. wrapping it up in a View and giving style attributes to View also doesn't work.

<Picker    style={styles.picker} // cannot set fontFamily here    selectedValue={this.state.selected2}    onValueChange={this.onValueChange.bind(this, 'selected2')}    mode="dropdown">    <Item label="hello" value="key0" /> // cannot set backgroundColor here    <Item label="world" value="key1" /> </Picker> 

Answer 1

It can be styled via native android. See this and this.

Add the following code to /res/values/styles.xml

<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:fontFamily">sans-serif-light</item>   <item name="android:textSize">18dp</item> </style>  <style name="SpinnerDropDownItem" parent="Theme.AppCompat.Light.NoActionBar">     <item name="android:textColor">#ffffff</item>     <item name="android:textSize">18dp</item>     <item name="android:fontFamily">sans-serif-light</item>     <item name="android:gravity">center</item>     <item name="android:background">@drawable/mydivider</item> </style> 

Create a file at res/drawable/mydivider.xml and add the following code

<shape xmlns:android="http://schemas.android.com/apk/res/android"     android:shape="rectangle">     <solid android:color="#29A1C9" />     <corners android:radius="0.5dp" />     <stroke         android:color="#FFFFFF"         android:width="0.1dp" /> </shape> 

Before styling:

After styling:

Answer 2

The question might be old but in case, you can use this to style the color: <Item label="blue" color="blue" value="blue" />