React native Textinput input max length value

Question

How do you set such value? For example the number field must be less than 50.

how to use with maxLength={2} property, how to validate it.. i want input number should be less than 50

here is my code..

 ShowMaxAlert = (EnteredValue) =>{
    this.setState({number: EnteredValue});
      if(EnteredValue > 50)
      {
        alert('Maximum number')
      }
}

<TextInput style={styles.input}
keyboardType={"numeric"}
underlineColorAndroid='#fff'
placeholder={'num'}
maxLength={2}
placeholderTextColor={'#ccc'}
onChangeText={ EnteredValue => this.ShowMaxAlert(EnteredValue) }
value={this.state.number} />

score 1 · Answer 1 · answered Jun 05 '20 at 12:21

The maxLength prop is used to validate the maximum length of the text that is entered, here your requirement is to validate against a max number. Your logic should be like below.

  ShowMaxAlert = (EnteredValue) => {
    if (EnteredValue < 50) {
         this.setState({number: EnteredValue});
    } else {
      alert('Maximum number');
    }
  };

Here the function will alert if the value is greater than 50, otherwise it will set the state which will update the value in the textbox.

React native Textinput input max length value

1 Answers1