Why does TextInput try to update value when my onChangeText method has a filter/regex it has to pass?

130 Views Asked by At

I'm in the process of creating my own NumberInput component using react-natives TextInput. However I'm having trouble trying to validate the input the user is trying to submit/enter in to the field. I have a regex to check if the value the user is trying to input is a number, if it is we update the state number, if not I dont want the value to update the state. The regex works but when the user tries to enter any other character than an number, say , or ., the input field flickers showing the character but quickly erases it so to say.

I've recorded a gif showing what I mean (https://i.gyazo.com/9f86dbfd7d7cba17c480a7b4c456e004.mp4). Is there any way to prevent the flickering? I am already implementing the onTextChange so I don't see how the value even tries to get updated.

const Container = () => {
  const [number, setCurrentNumber] = useState();
  const numberRegex = /^\d+$/;

  const numberValidation = (updatedValue) => {
    if (numberRegex.test(updatedValue)) {
      setCurrentNumber(updatedValue);
    }
  };

  return (
    <View>
        <TextInput
          value={number ? number.toString() : undefined}
          onChangeText={(value) => numberValidation(value)}
          keyboardType="numeric"
        />
    </View>
  );
};
0

There are 0 best solutions below