Search code examples
javascriptreactjsreact-nativepicker

Style individual Picker.Item in React Native


Is there any way to style individual Picker.Items? Other than the text color?

Also, somewhat related, What props will a Picker.Item take? I know they'll take "key", "value", "label" and "color". But are there any others?

I'm trying to style one of the Picker.Item's in my Picker component a different way than the rest of the Picker.Items in that Picker.

Specifically I'm trying to modify the fontWeight, but I haven't been able to change any of the styling except for the color of the text with that color property.

I know you can use itemStyle as a prop for the Picker component to style all of the items, but what if you want one of them to look a little different than the others? Is there a way to do that?

<Picker
  style={{height: 130, width: 130}}
  selectedValue={this.state.day}
  itemStyle={{height: 130, fontFamily: 'Rubik-Regular'}}
  onValueChange={(itemValue, itemIndex) => this.setState({day: itemValue})}
>
  <Picker.Item label="Day" value={-1} color='red'/>
  { validDays.map((i) => ( <Picker.Item key={i} label={i.toString()} value={i} /> )) }
</Picker>

Trying to change what that first Picker.Item (label="Day") looks like. I tried messing with style prop with no success:

<Picker.Item label="Day" value={-1} style={{ color: 'red'}}/>

Also tried messing with giving label a Text component like this:

<Picker.Item label={(<Text>Hello</Text>)} value={-1}/>

That wouldn't render at all. Threw an error.

Also tried:

<Picker.Item label="" value={-1} color='red'><Text>Hello</Text></Picker.Item>

Solution

  • The only props that you can use for the Picker.Item are mentioned here in Picker.ios.js and PickerAndroid.android.js

    static propTypes = {
        value: PropTypes.any, // string or integer basically
        label: PropTypes.string,
        color: PropTypes.string,
      };
    

    Therefore you cannot supply any other values to it.