TextInput that only accepts certain input of user without flickering issues - react-native

Question

I have a textinput lets say :
<TextInput
maxLength={5}
onChangeText={val => {
setExpiry(val.replace(/[^0-9]/g, ''));
}}
placeholder="Input"
value={Expiry}
keyboardType={'default'}/>
I want to restrict user to only add numbers, or any specific format using regex or simple loops.
The above is achieved, working without any functional issues.
But what seems to be off about this method is that it takes a little time (1ms may be) when you enter something unwanted, it shows entered character then removes that character. Overall, this doesn't look that great when it comes to user experience.
What I have tried:
Loop through the input and remove unwanted characters
It works but is slow and give the above flickering issues.
Use regex to replace with empty string
It works and is better at performance than above method, but still it gives the flickering issue.
So My question is that
is there any other way to have the same text box as on a native platform that doesn't have this flickering issue.
For Example: On native android, this issue is not faced.
References:
Regexp with textinput
Loop with textinput
Issue in GitHub repo
Handling TextInput Docs

Answer 1

If the requirement is to allow only numbers, using keyboardType='numeric' will eliminate everything besides numbers (and some punctuation on Android, see the docs on TextInput). Your regex solution will still be required to prevent non-number content, but it should be used less this way.
Have you tested your flickering issue on a release build of your app? The debug version will always be slower, and the flickering problem may not exist in a release build.