React Native - Shift focus to next Input box upon pressing "Next" button in keyboard

Question

I am very new in react Native world. I want to shift focus from the first input box to second input box. Please find my below code.

<View style={styles.inputViewStyle}>
                  <TextInput
                    ref={firstnameRef => (this.firstnameRef = 
                    firstnameRef)}
                    label="Firstname"
                    returnKeyType="next"
                    autoCorrect={false}
                    value={this.state.firstname}
                    onSubmitEditing={() => 
              this.refs.middlenameRef.focus()}
                    onChangeText={firstname => this.setState({ firstname })}
                    blurOnSubmit={false}
                  />
                </View> 

    <View style={styles.inputViewStyle}>
                  <TextInput
                    ref={middlenameRef => (this.middlenameRef = middlenameRef)}
                    label="Middlename"
                    returnKeyType="go"
                    value={this.state.middlename}
                    onChangeText={middlename => this.setState({ middlename })}
                  />
                </View>

I am getting error -> "undefined is not an object(evaluating 'this2.middlenameRef.focus()')"

UPDATE: constructor(props) { super(props); this.state = { firstname: "", middlename: "", lastname: ""
};

Please guide. Thanks in advance.

Answer 1

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}

Answer 2

<TextInput
    placeholder = "FirstTextInput"
    returnKeyType = { "next" }
    onSubmitEditing={() => { this.secondTextInput.focus(); }}
    blurOnSubmit={false}
/>
<TextInput
    ref={(input) => { this.secondTextInput = input; }}
    placeholder = "secondTextInput"
/>

Answer 3

Try this:

onSubmitEditing={() => { this.middlenameRef.focus() }}

Answer 4

You can get instance directly through this. And null Checking could be a good option for debug.

onSubmitEditing={() => this.middlenameRef && this.middlenameRef.focus()}