how to set inital value of React-Native Picker to empty - react-native

Question

Do you know how to set the inital value of React-Native Picker component to empty. I mean it should not show any item selected.

Answer 1

I solved this problem by setting fake unselectable item with value={-1}. Then when user picks valid item,fake item with value={-1} disappear.
// this.state.selectedIndex initially setted to -1
<Picker
selectedValue={this.state.selectedIndex}
onValueChange={(value, index) => { this.setState({selectedIndex: index})
}}
>
// first fake item
if(Platform.OS === 'android' && this.state.selectedIndex === -1) {
<Picker.Item label={'CANCEL'} value={-1} />
}
<Picker.Item label={'First'} value={1} />
<Picker.Item label={'Second'} value={2} />
<Picker.Item label={'Third'} value={3} />
</Picker>

Answer 2

I think the part you need is enabled={false}.
https://github.com/react-native-picker/picker#enabled-1
<Picker
selectedValue={selected}
onValueChange={(itemValue, itemIndex) => setSelected(itemValue)}>
<Picker.Item key='' label='-- Select a Item --' value={null} enabled={false} />
{items.map(i => <Picker.Item key={i.key} label={i.label} value={i.value} />)}
</Picker>

Answer 3

you can do it this way
<Picker
selectedValue={selected}
onValueChange={itemValue => setSelected(itemValue)}
>
{items &&
items.map((element, index) => {
if (index === 0) {
return (
<Picker.Item
key={element.value}
label={element.label}
value={element.value}
enabled={false}
/>
);
}
return (
<Picker.Item
key={element.value}
label={element.label}
value={element.value}
/>
);
})}
</Picker>