title: React-Native TextInput focus on a FlatList
body: <p>I have a component that renders a <a href="https://facebook.github.io/react-native/docs/flatlist" rel="nofollow noreferrer"><code>&lt;FlatList /&gt;</code></a> and every item on that list is a <a href="https://facebook.github.io/react-native/docs/textinput" rel="nofollow noreferrer"><code>&lt;TextInput /&gt;</code></a>.</p>
  
  <p>What I want to achieve is basically jump between those TextInputs when they are submitted, using the Input <code>ref.focus()</code> method and <a href="https://facebook.github.io/react-native/docs/textinput#onsubmitediting" rel="nofollow noreferrer"><code>onSubmitEditing</code></a> props. The thing is that since the FlatList is dynamic and every item has his own <code>key</code> prop meaning that every component rendered in the list is a different instance, I can't find a way to save all the TextInput references and then use them to jump to the next TextInputs.</p>
  
  <p>Expo Demo: <a href="https://snack.expo.io/@karljs/react-native-textinput-flatlist" rel="nofollow noreferrer">https://snack.expo.io/@karljs/react-native-textinput-flatlist</a></p>
  
  <pre><code>    class Input extends Component {
        constructor (props) {
          super(props)
          this.inputRef = null;
        }
  
        render () {
          return (
            &lt;View style={styles.row}&gt;
              &lt;Text&gt;{this.props.name}&lt;/Text&gt;
              &lt;TextInput
                style={styles.input}
                ref={(ref) =&gt; this.inputRef = ref}
              /&gt;
              // onSubmitEditing={() =&gt; this.nextInput.focus() }}
            &lt;/View&gt;
          )
        }
      }
  
      export default class App extends Component {
        render() {
          return (
            &lt;View style={styles.container}&gt;
              &lt;FlatList
                data={[{name: 'John'}, {name: 'Paul'}]}
                renderItem={({item, index}) =&gt; &lt;Input
                  key={index}
                  name={item.name}
                /&gt;}
              /&gt;     
            &lt;/View&gt;
          );
        }
      }
  </code></pre>
  
  <p>Thanks!</p>