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.

Possible duplicate of [React Native: How to select the next TextInput after pressing the "next" keyboard button?](http://stackoverflow.com/questions/32748718/react-native-how-to-select-the-next-textinput-after-pressing-the-next-keyboar) — Nicolas, Apr 19 '17 at 11:58

score 2 · Answer 1 · answered Apr 20 '17 at 15:21

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.

score 1 · Answer 2 · answered Apr 19 '17 at 12:29

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.

How can I use this code in typescript based project?! – Saeed Zhiany Sep 12 '18 at 04:35 — Saeed Zhiany, Sep 12 '18 at 04:35

score 1 · Answer 3 · answered Dec 11 '18 at 12:42

1

This work for me:

<Input
  blurOnSubmit={false}
  returnKeyType="next"
  onSubmitEditing={() => {
    this.passwordInput.wrappedInstance.focus();
  }}
/>
<Input
  secureTextEntry
  ref={(input) => {
    this.passwordInput = input;
  }}
/>

answered Dec 11 '18 at 12:42

Stefano

61
1
5

score 0 · Accepted Answer · answered Apr 20 '17 at 13:38

0

I insert the function in my customize component.

public focus(){
 this.input.focus()
}

answered Apr 20 '17 at 13:38

Débora Gonçalves

137
1
2
10

2

It's completely unnecessary to create a new method. – Fran Rios Apr 28 '17 at 11:17

score 0 · Answer 5 · answered Nov 23 '17 at 17:14

Have a look at this article, this might be handy react-native inputs

//Helper function   
focusNextField(nextField) {
    this.refs[nextField].focus();
}

<TextInput
    ref='1'
    style={styles.otpInputStyle}
    keyboardType='numeric'
    secureTextEntry
    value={this.props.otp1}
    maxLength={1}
    onChangeText={(num) => {
        this.props.otpCode1(num);  //action call
        if (num && num.length === 1) {
           this.focusNextField('2'); //function call. '2' ref to next input ref
         }
    }}
/>

cdroma · Answer 6 · 2020-05-28T13:27:13.690

0

import React, { useRef } from 'react';

...

export default function YourFuctionalComponent() {
    const input1 = useRef(null);
    const imput2 = useRef(null);
    const doSomething = () => {}

    return(
        <>
             <TextInput
                autoFocus
                ref={input1}
                onSubmitEditing={() => { imput2.current.focus(); }}
                returnKeyType="next"
             />
             <TextInput
                ref={input2}
                onSubmitEditing={() => doSomething()}
                returnKeyType="done"
             />
        </>
    );
}

https://i.stack.imgur.com/W6dvs.gif

edited May 28 '20 at 13:27

answered May 28 '20 at 11:33

cdroma

271
3
3

Hope It will solve issue but please add explanation of your code with it so user will get perfect understanding which he/she really wants. – Jaimil Patel May 28 '20 at 11:53
It seems to me that everything is clear here, the first onSubmitEditing calls the focus function to the second input, and the second onSubmitEditing does something. This applies to functional components. – cdroma May 28 '20 at 13:15

How focus the next field input in react native?

6 Answers6