Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Disable Picker.item in react native Picker

In HTML you can have <select> options which are disabled. The native picker for this is implemented on iOS in a way, that it automatically deselects a disabled item if the user tries to select it.

Is the same behavior also implemented for the react-native Picker?

I currently simply remove options from the picker instead of disabling them. This however results in confusing animations which I would like to avoid:

render() {
  return (
    <ScrollView showsVerticalScrollIndicator={false} >
      <View>
        {this.state.answers.map((obj, i) => (
          <View key={i}>
            <Picker
              selectedValue={'question' in this.state.answers[i] ? this.state.answers[i].question : -1}
              onValueChange={itemValue => this.setQuestion(i, itemValue)}
            >
              <Picker.Item label="-- pick a question --" value={-1} />
              {
                this.state.questions.map((question, j) => {
                  const alreadyPickedElswhere = this.state.answers.some(a => a.question === question.pk) && this.state.answers[i].question !== question.pk;
                  return (!alreadyPickedElswhere ? <Picker.Item label={question.text} value={question.pk} key={j} /> : null);
                })
                }
            </Picker>
          </View>))
          }
      </View>
    </ScrollView>);
}

}

like image 923
David Schumann Avatar asked May 30 '26 21:05

David Schumann


1 Answers

No, you cant deselect SelectedItem in case of Picker, rather you can select other option. But there is no way of what you expect from Picker of react-native. Either go with creating your own or other library.

like image 101
Revansiddh Avatar answered Jun 01 '26 11:06

Revansiddh



Donate For Us

If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!