Monday, 19 July 2021

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

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