CODEWITHSUNDEEP
react-nativepicker
Rak1994
Rak1994

Reputation: 65

how to disable react native picker after selecting an option

I want to disable (I do not want to select anything) the picker as soon as I select an option from the dropdown. Here is the picker,

<View style={editProfileStyle.pickerView}>
            <Picker
              style={{
                ...Platform.select({
                  android: {
                    color: "#000"
                  }
                })
              }}
              enabled={true}
              selectedValue={this.state.Qualification}
              onValueChange={this.updateState}
              mode="dropdown"
              itemStyle={{ height: 80, color: "#000000" }}
            >
                {this.state.options.map((item, index) => {
                    return <Picker.Item value={item} key={index} label={item} />;
                })}
            </Picker>
          </View>

Would help a lot if a solution is found!

Upvotes: 1

Views: 8060

Answers (1)

ikerfah
ikerfah

Reputation: 2862

You can use enabled props , enabled ={this.state.enabled} , When the user Pick a date , call setState and switch enabled state to false. Just keep in mind enabled props works for android Only. This an exemple :

constructor(props) {
    super(props);
    this.state = { 
        enabled: true // Enabled by default , you can change it
     };

// inside your updateState function call : this.setState({enabled:false})
// if you dont already defined updateState
// updateState = () =>{ this.setState({enabled:false})
<View style={editProfileStyle.pickerView}>
            <Picker
              style={{
                ...Platform.select({
                  android: {
                    color: "#000"
                  }
                })
              }}
              enabled={this.state.enabled}
              selectedValue={this.state.Qualification}
              onValueChange={this.updateState}
              mode="dropdown"
              itemStyle={{ height: 80, color: "#000000" }}
            >
                {this.state.options.map((item, index) => {
                    return <Picker.Item value={item} key={index} label={item} />;
                })}
            </Picker>
          </View>

Upvotes: 4

Related Questions