I'm trying to make this OTP
(6 digits
) input boxes in react native
. What will happen is - when the user presses any key (except the backspace
key), it should jump to the next box and when the user presses the backspace
key, it should go back to the previous box.
So far it works fine with iOS
, then when I checked on Android
, it doesn't jump to the next box at all. I checked online and found out that onKeyPress
is not supported in Android
. How can I make it work for android without onKeyPress
? Should I use onChange
? But then how could I know if the user press on backspace
?
<TextInput
editable={editable}
value={input_1}
style={styles.totpInputBox}
keyboardType='number-pad'
ref={box_1}
// onChange={({ text }) => {
// setInput_1(text);
// }}
onFocus={() => {
setInput_1('');
}}
onKeyPress={({ nativeEvent }) => {
if (nativeEvent.key === 'Backspace') {
box_1.current.focus();
} else {
setInput_1(nativeEvent.key);
setFocus(1);
}
}}
/>
<TextInput
editable={editable}
value={input_2}
style={styles.totpInputBox}
keyboardType='number-pad'
ref={box_2}
// onChange={({ text }) => {
// setInput_2(text);
// }}
onFocus={() => {
setInput_2('');
}}
onKeyPress={({ nativeEvent }) => {
if (nativeEvent.key === 'Backspace') {
box_1.current.focus();
} else {
setInput_2(nativeEvent.key);
setFocus(2);
}
}}
/>
Thank you.
from React Native & TextInput : How to get what the use type one by one for Android?
No comments:
Post a Comment