Styling React Native Picker

Question

I'm attempting to style the text color of the items in a React Native picker. I've only been working in iOS so far, but if I could find a cross-platform solution that'd be awesome.

I've tried the following things:

Styling color on Picker

<Picker style={{color:'white'}} ...etc >

Styling color on Picker Items

<Picker.Item style={{color:'#fff'}} label={'Toronto'} value={'Toronto'} />

I've also seen some examples of adding a color property, so I tried this

<Picker.Item color='white' label={'Toronto'} value={'Toronto'} />

At a total loss here. Thanks for any insight!

EDIT: Here's a solution - use itemStyle prop in the Picker element. I believe this is iOS only.

<Picker itemStyle={{color:'white'}} >
      <Picker.Item color='white' label={'Toronto'} value={'Toronto'} />
      <Picker.Item  label={'Calgary'} value={'Calgary'} />
</Picker>

https://stackoverflow.com/questions/38921492/how-to-style-the-standard-react-native-android-picker — Dmitry Preeternal, Nov 08 '17 at 18:00
https://stackoverflow.com/questions/57178266/how-to-set-up-pickers-border/69657723#69657723 try this one may help you — vibhu, Oct 21 '21 at 07:37

score 26 · Answer 1 · edited Feb 19 '19 at 18:05

26

To change the colour you need to use this:

<Item label="blue" color="blue" value="blue" />

edited Feb 19 '19 at 18:05

wscourge

10,657
14
59
80

answered May 30 '17 at 04:17

Arnaud Moret

732
9
12

Jigaroza287 · Answer 2 · 2020-09-17T05:38:12.700

24

To change text color, background color, font size and other Misc stuff like margin and padding, you can use "itemStyle" like below:

<Picker
    selectedValue={this.state.selectedItem}
    style={{ height: 100, width: 200 }}
    onValueChange={this.onChangeItem}
    itemStyle={{ backgroundColor: "grey", color: "blue", fontFamily:"Ebrima", fontSize:17 }}
>
    {cityItems}
</Picker>

If you need a border around the picker, you can wrap the Picker inside a View and provide border to it. Like below:

<View style={{ borderWidth: 1, borderColor: 'red', borderRadius: 4 }}>
    <Picker
        selectedValue={this.state.selectedItem}
        style={{ height: 100, width: 200 }}
        onValueChange={this.onChangeItem}
        itemStyle={{ backgroundColor: "grey", color: "blue", fontFamily:"Ebrima", fontSize:17 }}
    >
        {cityItems}
    </Picker>
</View>

Happy coding :)

edited Sep 17 '20 at 05:38

answered Jun 15 '18 at 11:29

Jigaroza287

635
5
13

You have the best answer. itemStyle used to style the Picker – Qui-Gon Jinn Jan 17 '20 at 21:32
How to add a frame around a picker ? – shira Sep 16 '20 at 09:48
@shira, please refer edited answer to apply border, the Picker does not directly provide a way to apply border style. – Jigaroza287 Sep 17 '20 at 05:40
@Jigaroza287 Is it possible to set alternating background color for the picker items using itemStyle? I want every odd item to have one color, and every even item to have a different color. – sj_959 Jul 20 '21 at 04:52
It's not working on Android. – Nam Lee Aug 25 '22 at 20:57

Sayuri Mizuguchi · Answer 3 · 2020-09-16T13:51:19.607

As mentioned, 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 on Android, like changing the fontFamily 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>

Important Note: Sometimes the style property name in Android you are looking for is different from the one used in React Native. E.g positioning you might need to use android:gravity instead of flex. Therefore, you may require to search the dedicated XML tag attribute on Android in order to style it. With that in mind, translating in React Native color for Text fonts is android:textColor for Android.

Useful links:

React Native Picker Android git solved issue.
List of XML dedicated styles from Android docs - Google

Yes it center text but I'm trying "left/right" it's not working with me and that's what I need — Oliver D, Apr 13 '20 at 21:00
look this [article](https://www.tutorialspoint.com/what-is-difference-between-gravity-and-layout-gravity-on-android) talking about the possible values. If you wanna left/right, check this [answer](https://stackoverflow.com/a/26190050/7133482) — Sayuri Mizuguchi, Apr 13 '20 at 22:45

Tapan Dabhi · Answer 4 · 2020-12-04T20:02:15.230

7

Simply add the picker inside TouchableOpacity and apply styles to the TouchableOpacity.
Example:-

<TouchableOpacity style={[style.textFieldSmall, style.textInput]}>
 <Picker
   style={{color: '#fff', placeholderTextColor: '#fff'}}
   selectedValue={this.state.choosenLabel}
   onValueChange={
   (itemValue, itemIndex) => this.setState({
    choosenLabel: itemValue, 
    choosenindex:itemIndex})
    }
 >
  <Picker.Item label="Purchase" color="white" value="Purchase" />
  <Picker.Item label="YES" value="YES" />
  <Picker.Item label="NO" value="NO" />
 </Picker>
 </TouchableOpacity>

edited Dec 04 '20 at 20:02

answered May 14 '20 at 22:04

Tapan Dabhi

376
4
7

An example would have made more sense – Nate Jul 20 '20 at 16:49
@Nathileo I have added an example as requested. – Tapan Dabhi Jul 21 '20 at 17:35
How to add a frame around a picker ? – shira Sep 16 '20 at 09:47
@shira I am not sure what you actually mean by adding a frame but you can place it just after the or else you can share me a code snippet or an image depicting what you need so I can help you. – Tapan Dabhi Sep 16 '20 at 21:50
So what TouchableOpacity does? Nothing. – Rajat Apr 21 '21 at 14:36
@Rajat can you elaborate more. TouchableOpacity in the example is being used to apply the specific (custom) styles to the Picker. – Tapan Dabhi Apr 21 '21 at 18:47

score 3 · Answer 5 · answered Mar 03 '21 at 03:21

wrap it inside a <View>,

 <View style={styles.card}>
 <Picker itemStyle={{color:'white'}} >
      <Picker.Item color='white' label={'Toronto'} value={'Toronto'} />
      <Picker.Item  label={'Calgary'} value={'Calgary'} />
</Picker>
</View>


//Styles
const styles = StyleSheet.create({
card:{
    borderWidth: 1,
    width: 314,
    borderColor: "rgba(155,155,155,1)",
    borderBottomLeftRadius: 10,
    backgroundColor: "rgba(214,210,210,1)",
    marginTop: 10,
    marginLeft: 4
  },
})

score 1 · Answer 6 · answered Nov 26 '20 at 08:27

1

try this: https://github.com/caoyongfeng0214/rn-overlay/wiki/Picker

itemTextStyle: { color: 'red' }

answered Nov 26 '20 at 08:27

Cao YongFeng

71
8

score 0 · Answer 7 · answered Oct 18 '16 at 11:54

0

You should try backgroundColor instead of color: https://facebook.github.io/react-native/docs/view.html#style

answered Oct 18 '16 at 11:54

Peter Gelderbloem

512
3
12

Hey, sorry - That of course works for background color, but I should've clarified that I am attempting to change the color of items in the picker – n8e Oct 18 '16 at 17:01
4

Okay, I should further clarify that I'm not attempting to change the background color at all - I'm attempting to change the colour of the text. – n8e Oct 20 '16 at 18:52

Styling React Native Picker

7 Answers7

Linked