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>

score 72 · Accepted Answer · edited Apr 02 '19 at 09:35

72

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:

edited Apr 02 '19 at 09:35

errorau

2,121
1
14
38

answered Aug 25 '16 at 09:49

Abhishek Nalin

4,309
5
24
32

2

How do you get rid of the white background at the top and bottom of the rectangle? – Ozzy Feb 27 '17 at 10:49
I tried but couldn't so I left it as it is. Doesn't look so bad :) – Abhishek Nalin Mar 09 '17 at 17:30
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? – Sir Neuman Oct 09 '17 at 18:38
4

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? – Anjana Apr 04 '18 at 05:56
Its working but, the fontFamily(Montserrat-Regular) is not applied.Can you tell me how to remove the white space top and bottom? – Johncy Oct 04 '18 at 05:51
working nicely except for the "gravity:center" thing, my items are glued to the left – Fakebounce Sep 19 '19 at 08:39
can anyone help > – Muhammad Ashfaq Nov 26 '19 at 13:16
How can we set custom fonts for the spinnerItem? I am using `react-native` for development. – Rhythm Ruparelia Mar 31 '20 at 13:34
@Anjana did you find the answer? I cannot change fontFamily to custom ttf font – foozhan May 29 '20 at 16:27
Does this work in the React Native 0.66? – fatemeh kazemi Jan 26 '22 at 09:42

score 9 · Answer 2 · answered May 30 '17 at 04:11

9

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

answered May 30 '17 at 04:11

Arnaud Moret

732
9
12

7

what about `background`? – Raheel Hasan Feb 11 '18 at 23:24
Nice find! Anything other styles that you can modify on the `Item`? – Joshua Pinter Oct 17 '19 at 18:00
1

And I'll answer my own question, there are no others. You can see that here: https://facebook.github.io/react-native/docs/picker-item#props – Joshua Pinter Oct 17 '19 at 19:16

Mika Kuitunen · Answer 3 · 2018-07-17T09:57:07.343

5

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.

edited Jul 17 '18 at 09:57

answered Aug 17 '16 at 05:53

Mika Kuitunen

1,260
13
17

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](http://stackoverflow.com/questions/38976064/how-to-style-the-react-native-picker-using-android-styles-xml)? – Abhishek Nalin Aug 19 '16 at 06:22
The one prop you do have with `Picker.Item` is `color` which is the colour of the text for the option. – Joshua Pinter Oct 17 '19 at 19:16

score 1 · Answer 4 · answered Feb 12 '20 at 21:56

1

For those who couldnt center texts in picker modal in @Abhishek Nalin answer use android:textAlignment="center"

answered Feb 12 '20 at 21:56

Necmettin Sargın

87
1
10

score 0 · Answer 5 · answered Jul 06 '20 at 08:27

Thank you for sharing the solution. I had similar issue with aligning text in picker item(spinnerDropDown) on RTL layout. I didn't want to hardcode left/right direction in my style. This was the workaround I used.

In your res/values/styles.xml file add

<!-- Base application theme. -->
<style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
        <!-- 
        ... existing styles
        --->
        <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>
</style>
<style name="SpinnerDropDownItem" parent="Theme.AppCompat.Light.NoActionBar">
    <item name="android:textAlignment">gravity</item>
    <item name="android:gravity">start</item>
    <item name="android:padding">10dp</item>
</style>

score 0 · Answer 6 · answered Apr 11 '22 at 12:37

All of them work except the background, but I couldn't get the background color to work. All I want is #000 for the background, but no matter what I tried, colorBackround popupBackround etc. I tried all of them but it didn't work

 <style name="AppTheme" parent="Theme.AppCompat.DayNight.NoActionBar">
    <item name="android:forceDarkAllowed">false</item>
    <item name="android:navigationBarColor">#151617</item>
    <item name="android:windowBackground">#151617</item>
    <item name="android:editTextBackground">@drawable/rn_edit_text_material</item>
    <item name="android:spinnerItemStyle">@style/SpinnerItem</item>
    <item name="android:spinnerDropDownItemStyle">@style/SpinnerDropDownItem</item>
</style>


<style name="SpinnerItem" parent="Theme.AppCompat.DayNight.NoActionBar">
    <item name="android:fontFamily">sans-serif-light</item>
    <item name="android:textSize">18dp</item>
</style>

<style name="SpinnerDropDownItem" parent="Theme.AppCompat.DayNight.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">#000</item>
</style>

<item name="android:background">@drawable/mydivider</item> // I tried that too, it didn't work

How to style the standard react-native android picker?

6 Answers6

Linked