By Abhishek Nalin


2016-08-12 15:27:12 8 Comments

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>

3 comments

@Mika Kuitunen 2016-08-17 05:53:50

If you take a look at the style prop, it's the style for the Picker, not the Picker items.

You can also see from the docs that the Picker has itemStyle prop but it's iOS only. Styling the Android Picker items can be done via native Android only.

@Abhishek Nalin 2016-08-19 06:22:00

I posted this as an issue on Github and got an answer that it can be done via native android programming. If you know how to do that can you please answer this question?

@Arnaud Moret 2017-05-30 04:11:31

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

@Raheel Hasan 2018-02-11 23:24:58

what about background?

@Abhishek Nalin 2016-08-25 09:49:44

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:

enter image description here

After styling:enter image description here

@Ozzy 2017-02-27 10:49:55

How do you get rid of the white background at the top and bottom of the rectangle?

@Abhishek Nalin 2017-03-09 17:30:59

I tried but couldn't so I left it as it is. Doesn't look so bad :)

@Sir Neuman 2017-10-09 18:38:42

I got it to work thank you! Is there any way to have multiple styles to choose from though? Say I want the font size to be larger in one picker in my app but the others are all the same. Is there a way to set some sort of attribute in the javascript code that I could use to switch out the styles it uses from the native android xml?

@Anjana 2018-04-04 05:56:29

I am able to change the font family to "sans-serif-light" but I have a TTF file for Titillium fonts, how can I set it?

@Johncy 2018-10-04 05:51:16

Its working but, the fontFamily(Montserrat-Regular) is not applied.Can you tell me how to remove the white space top and bottom?

Related Questions

Sponsored Content

22 Answered Questions

[SOLVED] What is the difference between React Native and React?

23 Answered Questions

[SOLVED] React Native android build failed. SDK location not found

  • 2015-09-17 15:30:13
  • Pyae Sone Nyein
  • 200188 View
  • 308 Score
  • 23 Answer
  • Tags:   android react-native

77 Answered Questions

4 Answered Questions

18 Answered Questions

[SOLVED] Standard Android Button with a different color

21 Answered Questions

[SOLVED] Android failed to load JS bundle

23 Answered Questions

[SOLVED] How do I rotate the Android emulator display?

1 Answered Questions

[SOLVED] How to style the react-native picker using android styles.xml?

1 Answered Questions

1 Answered Questions

How to set the overall background color behind the view in React-Native

Sponsored Content