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

Question

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!

Answer

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"
/>