Change the focus automatically to the next TextInput in react native

react native textinput focus programmatically
react native ref
react native focus text input on load
react focus next input
react native focus
react native textinput ref
native base focus next input
react native textinput autofocus not working

I am developing an App with react native. I have three TextInput boxes as bellow:

I need to change the focus of the TextInput box automatically, if the user inserts a number. Then, as soon as he/she inserts the last number a function should be executed.

Here is my code:

  <View style={styles.squareContainer}>
                <View style={styles.square}>
                    <TextInput
                      onChangeText={(oldPassword) => this.setState({oldPassword})}
                      style={{flex:1}}
                      ref="1"
                      keyboardType={'numeric'}
                      style={styles.inputText}
                      maxLength = {1}
                      underlineColorAndroid='rgba(0,0,0,0)'
                      numberOfLines={1}
                      secureTextEntry={true}
                      onSubmitEditing={() => this.focusNextField('2')}


                    />
                </View>
                <View style={styles.square}>
                    <TextInput
                      style={{flex:1}}
                      ref="2"
                      onChangeText={(oldPassword) => this.setState({oldPassword})}
                      keyboardType={'numeric'}
                      maxLength = {1}
                      style={styles.inputText}
                      underlineColorAndroid='rgba(0,0,0,0)'
                      numberOfLines={1}
                      secureTextEntry={true}
                      onSubmitEditing={this.maxLength?1:() => this.focusNextField('3')}


                    />
                </View>
                <View style={styles.square}>
                    <TextInput
                      style={{flex:1}}
                      ref="3"
                      onChangeText={(oldPassword) => this.setState({oldPassword})}
                      returnKeyType='next'
                      keyboardType={'numeric'}
                      style={styles.inputText}
                      underlineColorAndroid='rgba(0,0,0,0)'
                      numberOfLines={1}
                      secureTextEntry={true}


                    />
                </View>
              </View>

In other words, for example if a user wants to insert 153, he/she should insert 1 into the first TextInput, then the curser and focus should replace to the next TextInput automatically and she/he can inserts 5 and finally by moving the focus and curser to the third TextInput, he/she can inserts 3. As soon as he inserts 3, I need to execute this.triggerFunction(). I tried to use the following trick as you can see, but it did't work:

onSubmitEditing={this.maxLength?1:() => this.focusNextField('3')}

Can you help me to solve this problem. Thanks in advance.

You have to focus the TextInput you want the cursor to go to. To do that, You can set maxLength to 1, and call onChangeText to change focus. You may also want to capture the value and store it in state.

Another thing you should is to use words or characters for your references. These are going to be called as objects and numbers may be a bit confusing to call. i.e ref={'input_1'} instead of ref={'1'}

 <TextInput
    style={{flex:1}}
    ref="input_1"
    keyboardType={'numeric'}
    style={styles.inputText}
    maxLength = {1}
    value={this.state.value}
    underlineColorAndroid='rgba(0,0,0,0)'
    numberOfLines={1}
    secureTextEntry={true}
    onChangeText={value => {
       this.setState({ value })
       if (value) this.refs.input_2.focus(); //assumption is TextInput ref is input_2
    }}
  />

Selecting next text input — React Native, How we managed to select the next text input field automatically from However, when we are using Input component from Native-Base and React Native Material … upon submitting the Field 1, we want to focus the Field 2 By default, the React Native TextInput component does not automatically focus the next one once you hit "enter" on your virtual keyboard. Let's say we have two input fields for a username and password. A pretty common design would be to automatically focus the password field once the user "finishes" typing in their username.

For native base there needs to be a minor change. Its uses getRef instead of ref. The following code will change to the next input field on text change and revert back to the previous field when you delete the input.

<Item floatingLabel style={{width:30,borderColor:"black" }}>
    <Input
        style={{flex:1}}
        getRef={input => {this.input_1 = input; }}
    keyboardType={'numeric'}
    maxLength = {1}
    numberOfLines={1}
    onChangeText={value => {
    this.setState({ value })
    if (value) this.input_2._root.focus(); //assumption is next TextInput ref is input_2
    }}
    />
</Item>
<Item floatingLabel style={{width:30}}>
    <Input
        style={{flex:1}}
        getRef={input => {this.input_2 = input; }}
    keyboardType={'numeric'}
    maxLength = {1}
    numberOfLines={1}
    onChangeText={value => {
    this.setState({ value })
    if (value) this.input_3._root.focus(); else this.input_1._root.focus() ; //assumption is next TextInput ref is input_3
    }}
    />
</Item>

How to select the next TextInput after pressing the “next” keyboard , The keyboard navigation buttons work automatically if you display an HTML And despite that Android does handle tab navigation, React Native doesn't that will call the focus() method on the next textInput component. By default when react native app starts then there is no TextInput component will be focus but we can manually-dynamically focus any TextInput present in react native app using autoFocus = {true} prop. This prop would allow us to automatically focus/selects any TextInput on application starts time.

The answered question was definitely beneficial but my es-lint was throwing an error saying use of strings or maybe this.refs is depreciated

So this is what I did, create refs in the constructor (probably this is how react suggests). In my cases, I wanted 4 Text Inputs boxes

constructor(props) {
        super(props)
        this.keyboardHeight = new Animated.Value(0)
        this.num1 = React.createRef()
        this.num2 = React.createRef()
        this.num3 = React.createRef()
        this.num4 = React.createRef()
    }

And then render component like this

<View style={styles.inputBoxes}>
                        <TextInput
                            ref={this.num1}
                            style={styles.textInput}
                            onChangeText={number => this.inputNumber(number, 1)}
                            value={this.state.num1}
                            keyboardType="numeric"
                            numberOfLines={1}
                        />
                        <TextInput
                            ref={this.num2}
                            style={styles.textInput}
                            onChangeText={number => this.inputNumber(number, 2)}
                            value={this.state.num2}
                            keyboardType="numeric"
                            numberOfLines={1}
                        />
                        <TextInput
                            ref={this.num3}
                            style={styles.textInput}
                            onChangeText={number => this.inputNumber(number, 3)}
                            value={this.state.num3}
                            keyboardType="numeric"
                            numberOfLines={1}
                        />
                        <TextInput
                            ref={this.num4}
                            style={styles.textInput}
                            onChangeText={number => this.inputNumber(number, 4)}
                            value={this.state.num4}
                            keyboardType="numeric"
                            numberOfLines={1}
                        />
                    </View>

notice the refs here inside TextInput. In my onChange, I am passing a flag, telling which button it is to this.inputNumber

And this is how my inputNumber function looks like

inputNumber(value, flag) {
    const completeFlag = `num${flag}`
    this.setState({[completeFlag]: value})
    flag = flag + 1
    if (flag < 5 && value) {
        const nextFlag = `num${flag}`
        const textInputToFocus = this[nextFlag]
        textInputToFocus.current.focus()
    }
}

returnKeyType="next" doesn't move to next TextInput anymore , React Native Version: 0.59.8 (Expo) React Native version: React Native If you want to focus on the next text input, first you have to get ref of that Specifying returnKeyType will only change which icon will be Looking forward to a future version where this is handled automatically, but until then, agreed� TextInput is a controlled component, which means the native value will be forced to match this value prop if provided. For most uses, this works great, but in some cases this may cause flickering - one common cause is preventing edits by keeping value the same.

Android: Programmatically changing focus from one TextInput to , and for some versions, i think 0.55.4 too, you need also add returnKeyType='next' . https://facebook.github.io/react-native/docs/textinput.html� TextInput has by default a border at the bottom of its view. This border has its padding set by the background image provided by the system, and it cannot be changed. Solutions to avoid this is to either not set height explicitly, case in which the system will take care of displaying the border in the correct position, or to not display the border by setting underlineColorAndroid to trans

Focusing Next Input in React Native, By default, the React Native TextInput component does not automatically focus the next one once you hit "enter" on your virtual keyboard. I almost opened up a new issue, but decided to make a repro, only to find out that react-native core TextInputs do in fact work per the documentation, so the issue was in my own code. I am using a wrapper component called , which applies my own personal styles and sugar over React Native's core component.

Next Input Focus on React Native - DEV, Focus on the next input after edit on current text input on React Native. Tagged with ref, reactnative, form, input. TextInput is a controlled component, which means the native value will be forced to match this value prop if provided. For most uses this works great, but in some cases this may cause flickering - one common cause is preventing edits by keeping value the same.

Comments
  • Perfect! it worked! it was a smart and short answer. I voted up and marked it as a correct answer! thanks. :)