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

Question

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"}
/>

score 2 · Accepted Answer · answered Nov 17 '22 at 10:49

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)
    }} />

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

1 Answers1