How to make a React Native TextInput accept only numbers and make it accept numbers 1 to 10 only?

For example, say I input 11, the value should automatically change into the maximum allowed, that is, 10.

And when I input 0, the value should automatically change into the minimum allowed, that is, 1.

As of now the only thing I have done are:

<TextInput
style={styles.input}
placeholder="Maximum of 10 passengers only"
maxLength={2}
keyboardType={"numeric"}
/>

CodePudding user response：

You can use this:

...
const [value, setValue] = React.useState(0);
....

  React.useEffect(() => {
    if(value === "") {
      return;
    }
    if( value > 10) {
      setValue(10)
    } else if (value < 1) {
      setValue(1);
    }

  },[value])


<TextInput
      keyboardType='numeric' 
      maxLength={2}
      value={value.toString()} 
      onChangeText={(e) => {
      setValue(e)
    }} />