how to move next textInput in react native

Question

I using React Native 0.48.4. How to select the next TextInput? i try with this below code it not working for me

<TextInput 
  returnKeyType={'next'}
  secureTextEntry={true}
  style={styles.textBox}
  keyboardType = 'number-pad'
  maxLength = {1}
  autoFocus={true}
  blurOnSubmit={true}
  onSubmitEditing={(event) => { 
    this.refs.SecondInput.setFocus(); 
  }}
  onChange={this.onChangePassCode}
  onChangeText={(passCode) => this.setState({passCode})}
/>
<TextInput 
  ref='SecondInput'
  returnKeyType='next'
  secureTextEntry={true}
  style={styles.textBox}
  keyboardType = 'number-pad'
  maxLength = {1}
  blurOnSubmit={false}
  onChange={this.onChangePassCode}
  onChangeText={(passCode) => this.setState({passCode})}
/>

Answer 1

Typical use case login and password is given below,

First, assign a variable to 'ref' call back in your TextInput component. Note: 'ref' is now a callback function, not a direct variable which was deprecated. Now call 'focus()' on this stored variable to focus that TextInput as given below

<TextInput
  keyboardType='email-address'
  returnKeyType='next'
  onSubmitEditing={() => this.passwordRef.focus()} 
  onChangeText={(email) => this.setState({email})}
/>

<TextInput
  ref={passwordRef => this.passwordRef = passwordRef}
  returnKeyType='done'
  autoCorrect={false}
  onChangeText={(password) => this.setState({password})}
/>

Read these docs and search for direct manipulation in react-native https://reactjs.org/docs/refs-and-the-dom.html#the-ref-callback-attribute