Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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>
like image 858
Trevor Storey Avatar asked Apr 20 '18 21:04

Trevor Storey


1 Answers

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.

like image 72
Pritish Vaidya Avatar answered Oct 09 '22 11:10

Pritish Vaidya