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