how to add disabled option to React Native Picker

Question

I am creating a react native app. I have tried to create drop-downs with react native . its working fine for me. I am tried to add default option like "Please select option......". I have tried it but not working for me. my code is:-

<Picker
    mode="dropdown"
    onValueChange={(itemValue, itemIndex) => this.setState({selectedItem: itemValue})}>
    {subchild['OptionValue'].map((subsubchild, Index3)=>
        <Picker.Item label={subsubchild['text']} value={subsubchild['id']} />
    )}
</Picker> 

I have tried it like this :-

<Picker
    mode="dropdown"
    onValueChange={(itemValue, itemIndex) => this.setState({selectedItem: itemValue})}>     <Picker.Item label="Please select options....." value="0" />
    {subchild['OptionValue'].map((subsubchild, Index3)=>
        <Picker.Item label={subsubchild['text']} value={subsubchild['id']} />
    )}
</Picker>

Its not working exactly I want.

Answer 1

Here is the example for you:

<Picker
    mode="dropdown"
    selectedValue={this.state.selectedItem}
    onValueChange={(itemValue, itemIndex) => this.setState({selectedItem: itemValue})}>     <Picker.Item label="Please select options....." value="0" />
    {subchild['OptionValue'].map((subsubchild, Index3)=>
        <Picker.Item label={subsubchild['text']} value={subsubchild['id']} />
    )}
</Picker>

You should set the default selected value into your state selectedItem

this.state = {selectedItem: '0'};

In the Process of State-Change, you should set condition if selected value equal to zero then return what you want.

Hope it will help you.

Please refer to the link below for more detail.

https://facebook.github.io/react-native/docs/0.19/picker.html#mode