React Native & TextInput : How to get what the use type one by one for Android?

user_13942929 0
Viewed 137

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.inputBox}
                keyboardType='number-pad'
                ref={box_1}
                // onChange={({ text }) => {
                //   setInput_1(text);
                // }}

                onFocus={() => {
                 
                }}
                onKeyPress={({ nativeEvent }) => {
                  if (nativeEvent.key === 'Backspace') {
                    box1.current.focus();
                  } else {
                    focus(1);
                  }
                }}
              />

Thank you.

react-native textinput android javascript
1 Answers

the docs say it work in android but from soft keyboard not hardware keyboard and i think you may ignore hardware keyboard.

the docs say that

Note: on Android only the inputs from soft keyboard are handled, not the hardware keyboard inputs.

What is the different between soft keyboard and hardware keyboard?

soft keyboard (onscreen keyboard or software keyboard) like keyboard in the screen of phone or tablet.
hardware keyboard (external keyboard) like keyboard with USB (android support that).


If you test in emulator, try to use the emulator keyboard by mouse, not computer keyboard.

if you can't ignore hardware keyboard

I suggest to use this library react-native-confirmation-code-field try snack here

or follow the library way, It uses an invisible component that will be stretched over components.

enter image description here

user_79655470
Related