The input field must accept the following:
Valid cases
qw12@
qwe12
qweryt@123
And not accept the following:
Invalid case
1a@
@qwe1
1@qwer
You could do that making you textInput a controlled component
const [textInputValue, setTextInputValue] = useState('')
const onTextInputChange = (newText) => {
//Here you can manipulate the value of the textinput as you want
setTextInputValue(newText)
}
return (
<View style={styles.container}>
<TextInput style={styles.textInput} value={textInputValue} onChangeText={onTextInputChange} />
</View>
);
consider that with this solution you might experience some flickering issues if the user type faster than react-native is able to update the native view.
Otherwise you can try to implement it natively, for instance here's an example of a custom wrapper for the TextInput component which allows to pass a regex to whitelist allowed characters