title: Change the focus automatically to the next TextInput in react native
body: <p>I am developing an App with react native. I have three TextInput boxes as bellow:</p>
  
  <p><a href="https://i.stack.imgur.com/4yLhA.png" rel="noreferrer"><img src="https://i.stack.imgur.com/4yLhA.png" alt="enter image description here"></a></p>
  
  <p>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. </p>
  
  <p>Here is my code:</p>
  
  <pre><code>  &lt;View style={styles.squareContainer}&gt;
                  &lt;View style={styles.square}&gt;
                      &lt;TextInput
                        onChangeText={(oldPassword) =&gt; 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={() =&gt; this.focusNextField('2')}
  
  
                      /&gt;
                  &lt;/View&gt;
                  &lt;View style={styles.square}&gt;
                      &lt;TextInput
                        style={{flex:1}}
                        ref="2"
                        onChangeText={(oldPassword) =&gt; this.setState({oldPassword})}
                        keyboardType={'numeric'}
                        maxLength = {1}
                        style={styles.inputText}
                        underlineColorAndroid='rgba(0,0,0,0)'
                        numberOfLines={1}
                        secureTextEntry={true}
                        onSubmitEditing={this.maxLength?1:() =&gt; this.focusNextField('3')}
  
  
                      /&gt;
                  &lt;/View&gt;
                  &lt;View style={styles.square}&gt;
                      &lt;TextInput
                        style={{flex:1}}
                        ref="3"
                        onChangeText={(oldPassword) =&gt; this.setState({oldPassword})}
                        returnKeyType='next'
                        keyboardType={'numeric'}
                        style={styles.inputText}
                        underlineColorAndroid='rgba(0,0,0,0)'
                        numberOfLines={1}
                        secureTextEntry={true}
  
  
                      /&gt;
                  &lt;/View&gt;
                &lt;/View&gt;
  </code></pre>
  
  <p>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 <code>this.triggerFunction()</code>. 
  I tried to use the following trick as you can see, but it did't work:</p>
  
  <pre><code>onSubmitEditing={this.maxLength?1:() =&gt; this.focusNextField('3')}
  </code></pre>
  
  <p>Can you help me to solve this problem. Thanks in advance. </p>