How focus the next field input in react native?

Question

I need focus the next field input in react native, in android platform. But the focus() function, not exists in android react native, only in IOS.

How make this ? I use react native with typescript.

Answer 1

The focus function works just fine.

<View style={{flexDirection: 'row'}}>
        <Text style={{flex: 1}}>Enter Name: </Text>
        <TextInput ref="name" onChangeText={(name) => this.setState({name})} style={{flex: 1}}
          onSubmitEditing={() => this.refs.age.focus()}/>
      </View>
      <View style={{flexDirection: 'row'}}>
        <Text style={{flex: 1}}>Enter Age: </Text>
        <TextInput ref="age" keyboardType="numeric" onChangeText={(age) => this.setState({age})} style={{flex: 1}}
          onSubmitEditing={() => this.refs.sport.focus()}/>
      </View>
      <View style={{flexDirection: 'row'}}>
        <Text style={{flex: 1}}>Enter Favourite Sport: </Text>
        <TextInput ref="sport" onChangeText={(sport) => this.setState({sport})} style={{flex: 1}}/>
      </View>

Hope this helps. This is for android.

Answer 2

You have to user ref on Inputs where you want to focus on:

<Input
   ref={(node) => { this.myInput = node }}
   value={this.state.myInput.toString()}
   onSubmitEditing={() => { this.myOtherInput.focus() }}/>
<Input
   ref={(node) => { this.myOtherInput = node }}
   value={this.state.myOtherInput.toString()}/>

You can see that when you submit the editing on the first input you will focus on the second one. you can use this.MY_CUSTOM_REF.focus() wherever you want.