returnKeyType = "next" issue in react native

Lovedeep Singh picture Lovedeep Singh · Jan 17, 2018 · Viewed 9k times · Source

I am using returnKeyType = "next" in TextInput component, but it is working like returnKeyType="go" instead of moving to the next textinput field.

How can we move from one textinput field to next textinput field using the "next" button on the keyboard?

Answer

Himanshu Dwivedi picture Himanshu Dwivedi · Jan 17, 2018

You need to set focus on the next textfield using the reference like this:

<View style={{flex:1}}>
    <TextInput style={{height:40}} 
        placeholder="First TextField Input"
        placeholderTextColor="#DCDCDC"
        returnKeyType="next"
        onSubmitEditing={()=>this.secondTextInput.focus()}/>
    <TextInput style={{height:40}} 
        placeholder="Second TextField Input"
        placeholderTextColor="#DCDCDC"
        returnKeyType="go"
        ref={(input)=>this.secondTextInput = input}/> 
</View>