iosreact-nativereact-native-textinput

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


I defined two TextInput fields as follows:

<TextInput 
   style = {styles.titleInput}
   returnKeyType = {"next"}
   autoFocus = {true}
   placeholder = "Title" />
<TextInput
   style = {styles.descriptionInput}          
   multiline = {true}
   maxLength = {200}
   placeholder = "Description" />

But after pressing the "next" button on my keyboard, my react-native app isn't jumping to the second TextInput field. How can I achieve that?

Thanks!


Solution

  • 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.

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