React native: Which function is fired when There is a focus on TextInput and it reached its limit still a input button is pressed

Question

I am new to react-native. I have 3 TextInput Field t1, t2, t3. I have done focusing on next input field when reached its limit. Now I am stuck with a situation that somehow there is a focus on my textinput field t1 and t1 has already reached its max limit. But when I am pressing another input it's not focusing to the next input field t2.

<TextInput
onChangeText={text => this.setState({ v1: text })}
keyboardType='number-pad'
maxLength={1}
autoCompleteType={'off'}
autoFocus={true}
ref={ref => this.v1Ref = ref}
onChange={event => {
if (event.nativeEvent.text !== '') {
  this.v2Ref.focus();
}
}}
/>

<TextInput
onChangeText={text => this.setState({ v2: text })}
keyboardType='number-pad'
maxLength={1}
autoCompleteType={'off'}
ref={ref => this.v2Ref = ref}
onChange={event => {
if (event.nativeEvent.text !== '') {
  this.v3Ref.focus();
}
}}
onKeyPress={({ nativeEvent }) => {
if (nativeEvent.key === 'Backspace') {
  if(this.state.v2== '')
    this.v1Ref.focus(); //here it is focusing on field t1 on backspace press and then if I am trying to give another input It's not going to t2 because t1 has reached its limit.
  }
}}
/>

Yoel · Answer 1 · 2019-12-17T13:13:05.577

Your code works on my computer

If you are using Android Emulator This function will not work because it is written in the documentation

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

If you are using an emulator you need to press the buttons inside the phone with the mouse and not the computer keyboard

Try inserting console.log Inside the function to see if it works

onKeyPress={({ nativeEvent }) => {
console.log('onKeyPress')
if (nativeEvent.key === 'Backspace') {
  if(this.state.v2== '')
    this.v1Ref.focus(); 
  }
}}

React native: Which function is fired when There is a focus on TextInput and it reached its limit still a input button is pressed

1 Answers1