CODEWITHSUNDEEP
javascriptandroidiosreactjsreact-native
n8e
n8e

Reputation: 383

Styling React Native Picker

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>

Upvotes: 38

Views: 110122

Answers (7)

Oluwaseyi Adejugbagbe
Oluwaseyi Adejugbagbe

Reputation: 339

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
  },
})

Upvotes: 3

Tapan Dabhi
Tapan Dabhi

Reputation: 376

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>

Upvotes: 7

Cao YongFeng
Cao YongFeng

Reputation: 91

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

itemTextStyle: { color: 'red' }

Upvotes: 1

Jigar Oza
Jigar Oza

Reputation: 665

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 :)

Upvotes: 26

Sayuri Mizuguchi
Sayuri Mizuguchi

Reputation: 5330

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:

Upvotes: 11

Arnaud Moret
Arnaud Moret

Reputation: 753

To change the colour you need to use this:

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

Upvotes: 26

Peter Gelderbloem
Peter Gelderbloem

Reputation: 512

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

Upvotes: 0

Related Questions