title: How to autofocus next TextInput on react-native
body: <p>I'm trying to create a passcode protected screen. The screen will uses 4 numeric input as the passcode.</p>
  
  <p>The way I'm doing this is create a TextInput Component and call it 4 times in my main screen.</p>
  
  <p>The problem I'm having is the TextInputs will not focus on the next one as I type the value of the previous TextInput. </p>
  
  <p>I'm using refs for all PasscodeTextInput component (I've been informed that it is a legacy method but I do not know any other way, alas).</p>
  
  <p><strong><em>Tried this method(without creating my own component), no luck too.</em></strong>
  <a href="https://github.com/facebook/react-native/blob/42cbc55f5f2c64fa2ed0cacaf3c8f8991fad6137/Examples/UIExplorer/TextInputExample.ios.js#L237" rel="noreferrer">METHOD</a></p>
  
  <p><a href="https://github.com/facebook/react-native/blob/42cbc55f5f2c64fa2ed0cacaf3c8f8991fad6137/Examples/UIExplorer/TextInputExample.ios.js#L237" rel="noreferrer"><img src="https://i.stack.imgur.com/RYjXg.png" alt="Image"></a></p>
  
  <p><strong>index.ios.js</strong></p>
  
  <pre><code>import React, { Component } from 'react';
  import { AppRegistry, TextInput, View, Text } from 'react-native';
  import { PasscodeTextInput } from './common';
  
  export default class ProgressBar extends Component {
    render() {
      const { centerEverything, container, passcodeContainer,  textInputStyle} = styles;
      return (
        &lt;View style={[centerEverything, container]}&gt;
          &lt;View style={[passcodeContainer]}&gt;
            &lt;PasscodeTextInput
              autoFocus={true}
              ref="passcode1"
              onSubmitEditing={(event) =&gt; { this.refs.passcode2.focus() }} /&gt;
            &lt;PasscodeTextInput
              ref="passcode2"
              onSubmitEditing={(event) =&gt; { this.refs.passcode3.focus() }} /&gt;
            &lt;PasscodeTextInput
              ref="passcode3"
              onSubmitEditing={(event) =&gt; { this.refs.passcode4.focus() }}/&gt;
            &lt;PasscodeTextInput
              ref="passcode4" /&gt;
          &lt;/View&gt;
        &lt;/View&gt;
      );
    }
  }
  
  const styles = {
    centerEverything: {
      justifyContent: 'center',
      alignItems: 'center',
    },
    container: {
      flex: 1,
      backgroundColor: '#E7DDD3',
    },
    passcodeContainer: {
      flexDirection: 'row',
    },
  }
  
  AppRegistry.registerComponent('ProgressBar', () =&gt; ProgressBar);
  </code></pre>
  
  <p><strong>PasscodeTextInput.js</strong></p>
  
  <pre><code>import React from 'react';
  import {
    View,
    Text,
    TextInput,
    Dimensions
  } from 'react-native';
  
  const deviceWidth = require('Dimensions').get('window').width;
  const deviceHeight = require('Dimensions').get('window').height;
  
  const PasscodeTextInput = ({ ref, autoFocus, onSubmitEditing, onChangeText, value}) =&gt; {
  
    const { inputStyle, underlineStyle } = styles;
  
    return(
      &lt;View&gt;
        &lt;TextInput
          ref={ref}
          autoFocus={autoFocus}
          onSubmitEditing={onSubmitEditing}
          style={[inputStyle]}
          maxLength={1}
          keyboardType="numeric"
          placeholderTextColor="#212121"
          secureTextEntry={true}
          onChangeText={onChangeText}
          value={value}
        /&gt;
        &lt;View style={underlineStyle} /&gt;
      &lt;/View&gt;
    );
  }
  
  const styles = {
    inputStyle: {
      height: 80,
      width: 60,
      fontSize: 50,
      color: '#212121',
      fontSize: 40,
      padding: 18,
      margin: 10,
      marginBottom: 0
    },
    underlineStyle: {
      width: 60,
      height: 4,
      backgroundColor: '#202020',
      marginLeft: 10
    }
  }
  
  export { PasscodeTextInput };
  </code></pre>
  
  <p><strong>Update 1</strong></p>
  
  <p><strong>index.ios.js</strong></p>
  
  <pre><code>import React, { Component } from 'react';
  import { AppRegistry, TextInput, View, Text } from 'react-native';
  import { PasscodeTextInput } from './common';
  
  export default class ProgressBar extends Component {
  
    constructor() {
      super()
      this.state = {
        autoFocus1: true,
        autoFocus2: false,
        autoFocus3: false,
        autoFocus4: false,
      }
    }
  
    onTextChanged(t) { //callback for immediate state change
      if (t == 2) { this.setState({ autoFocus1: false, autoFocus2: true }, () =&gt; { console.log(this.state) }) }
      if (t == 3) { this.setState({ autoFocus2: false, autoFocus3: true }, () =&gt; { console.log(this.state) }) }
      if (t == 4) { this.setState({ autoFocus3: false, autoFocus4: true }, () =&gt; { console.log(this.state) }) }
    }
  
    render() {
      const { centerEverything, container, passcodeContainer, testShit, textInputStyle } = styles;
      return (
        &lt;View style={[centerEverything, container]}&gt;
          &lt;View style={[passcodeContainer]}&gt;
            &lt;PasscodeTextInput
              autoFocus={this.state.autoFocus1}
              onChangeText={() =&gt; this.onTextChanged(2)} /&gt;
            &lt;PasscodeTextInput
              autoFocus={this.state.autoFocus2}
              onChangeText={() =&gt; this.onTextChanged(3)} /&gt;
            &lt;PasscodeTextInput
              autoFocus={this.state.autoFocus3}
              onChangeText={() =&gt; this.onTextChanged(4)} /&gt;
            &lt;PasscodeTextInput
              autoFocus={this.state.autoFocus4} /&gt;
          &lt;/View&gt;
        &lt;/View&gt;
      );
    }
  }
  
  const styles = {
    centerEverything: {
      justifyContent: 'center',
      alignItems: 'center',
    },
    container: {
      flex: 1,
      backgroundColor: '#E7DDD3',
    },
    passcodeContainer: {
      flexDirection: 'row',
    },
  }
  
  AppRegistry.registerComponent('ProgressBar', () =&gt; ProgressBar);
  </code></pre>