Search code examples
react-nativetextinput

disable text input after entering some input value in react native


This is the text input that I am using, I want the input field to be disabled after entering a value.I tried using editable props, but it did not help. I am completely new to react native, please help with an example.

<View style={editProfileStyle.textinputView}>
  <TextInput
    style={editProfileStyle.textInput}
    placeholder="Enter your Specialization"
    value={this.state.subQualification}
    onChangeText={subQualification => this.setState({ subQualification: subQualification })} 
  />
</View>

Solution

  • As per the question, since the field should get disabled when it has some value:

    <View style={editProfileStyle.textinputView}>
                  <TextInput
                    editable={this.state.subQualification.length === 0}
                    style={editProfileStyle.textInput}
                    placeholder="Enter your Specialization"
                    value={this.state.subQualification}
                    onChangeText={subQualification => this.setState({ subQualification: subQualification })} 
                  />
    </View>
    

    using check in your editable prop of

    editable={this.state.subQualification.length === 0} will make field editable when nothing in present in the field