React Native: How to Select the Next Textinput After Pressing the "Next" Keyboard Button

React Native: How to select the next TextInput after pressing the next keyboard button?

Set the second TextInput focus, when the previous TextInput's onSubmitEditing is triggered.

Try this

1. Adding a Ref to second TextInput
   
   ref={(input) => { this.secondTextInput = input; }}

2. Bind focus function to first TextInput's onSubmitEditing event.
   
   onSubmitEditing={() => { this.secondTextInput.focus(); }}

3. Remember to set blurOnSubmit to false, to prevent keyboard flickering.
   
   blurOnSubmit={false}

When all done, it should looks like this.

    placeholder="FirstTextInput"
    returnKeyType="next"
    onSubmitEditing={() => { this.secondTextInput.focus(); }}
    blurOnSubmit={false}
/>

    ref={(input) => { this.secondTextInput = input; }}
    placeholder="secondTextInput"
/>

React Native android: How to select the next TextInput after pressing the “actionNext” keyboard button?

This ability introduced in react-native .22 .

https://github.com/facebook/react-native/commit/ab12189f87d8e7fd84a4f1b92fa97e8894e984c7

Change the focus automatically to the next TextInput in react native

You have to focus the TextInput you want the cursor to go to. To do that, You can set maxLength to 1, and call onChangeText to change focus.
You may also want to capture the value and store it in state.

Another thing you should is to use words or characters for your references. These are going to be called as objects and numbers may be a bit confusing to call. i.e ref={'input_1'} instead of ref={'1'}

     style={{flex:1}}
    ref="input_1"
    keyboardType={'numeric'}
    style={styles.inputText}
    maxLength = {1}
    value={this.state.value}
    underlineColorAndroid='rgba(0,0,0,0)'
    numberOfLines={1}
    secureTextEntry={true}
    onChangeText={value => {
       this.setState({ value })
       if (value) this.refs.input_2.focus(); //assumption is TextInput ref is input_2
    }}
  />

React Native - add specific clearButton on input field when the keyboard is open

Seems 'keyboardDidShow' and 'keyboardDidHide' events triggered in each reusable component.

You can try another approach. Just use onBlur and onFocus events. It's isolated for each component:

                  onBlur={() => setIsFocused(false)}
          onFocus={() => setIsFocused(true)}
          key={currencyTypeId}
          ref={forwardRef}
          style={styles.input}
          onChangeText={onChangeText}
          value={inputValue}
          editable={editable}
          autoCorrect={false}
          autoCompleteType="off"
          returnKeyType={returnKeyType}
          placeholder={placeholder}
          placeholderTextColor={placeholderColor}
          keyboardType={keyboardType}
        />
      


      {inputValue.length > 0 && isFocused && (
        
           {}}>
            
          
        
      )}

React Native - Shift focus to next Input box upon pressing Next button in keyboard

    placeholder = "FirstTextInput"
    returnKeyType = { "next" }
    onSubmitEditing={() => { this.secondTextInput.focus(); }}
    blurOnSubmit={false}
/>
    ref={(input) => { this.secondTextInput = input; }}
    placeholder = "secondTextInput"
/>

---

Related Topics