Repository navigation
TextInput briefly displays restricted characters before validation removes them when using onChangeText #47252
Description
Description
Hi there,
Just wanted to bring up an issue that many of us have come across. When using TextInput with validation in onChangeText, restricted text still flashes for a moment before it gets removed. This is a pretty common need in apps, where real-time validation is used to guide user input (like blocking specific characters or setting a format). But right now, seeing those restricted characters pop up briefly makes the input feel a bit off.
There are many Workarounds and hacks for this but don’t quite fix the experience entirely. Is there any chance this could be smoothed out natively in the future?
Steps to reproduce
React Native Version
0.76.0
Affected Platforms
Runtime - Android, Runtime - iOS
Output of npx react-native info
Not needed
Stacktrace or Logs
Not needed
Reproducer
https://snack.expo.dev/fVO2DXQPPqQVlm9QBZ2ms
Screenshots and Videos
No response
Activity
react-native-bot commentedon Oct 28, 2024
react-native-bot commentedon Oct 28, 2024
rvmaher commentedon Oct 28, 2024
Repro Snack : https://snack.expo.dev/fVO2DXQPPqQVlm9QBZ2ms
cortinico commentedon Oct 29, 2024
Can you share a video? As on the Snack it doesn't behave as you described
rvmaher commentedon Nov 7, 2024
TextinputFlash.webm
s77rt commentedon Nov 13, 2024
This is a known limitation due to the
onChangeTextevent being async. If you need to just prevent some chars from being inserted you can use this regex approach https://github.com/s77rt/react-native/tree/TextInput-regex (proposal).Please note that the regex prop can't be used to validate intermediate state.
olivertylsar commentedon Mar 28, 2025
Does Fabric change anything in relation to this problem? There was hope that it might be possible after it gets introduced.
#28535 (comment)
@elicwhite Any news on this one?
rohit9625 commentedon Apr 10, 2025
I am also facing this issue. Can we prevent pasting characters using
onChangeprop?rohit9625 commentedon Apr 10, 2025
The regex prop is not available in TextInput. Is it not implemented yet? Is it gonna take time? Can I help with this implementation?
rohit9625 commentedon Apr 10, 2025
Hey @s77rt, could you please help me with this issue? When copying an image from the Gallery and pasting it on the React Native's Text Input, the binary content of the image gets pasted in the textInput. However, I've tried restricting the input but it still appears for a fraction of a second.
I am using a Samsung A14 device with API level 34. It seems like we cannot prevent the flashing when restricting input value but does pasting image content is expected?
This is before input restriction:
Recent_Repro_Paste_Image.mp4
This is after input restriction:
Recent_Repro_After_Paste_Image_Fix.mp4
s77rt commentedon Apr 11, 2025
@rohit9625 The mentioned issue should not be fixed with regex. In that case the paste functionality is what should prevent this text pasting.
rohit9625 commentedon Apr 11, 2025
But how? This behavior is device specific. Maybe, some devices stores the binary directly into the clipboard.
veliseev93 commentedon Apr 29, 2026
You can try this library: https://github.com/RonasIT/react-native-controlled-input