title: React-Native: Setting focus to custom component built off an array
body: <p>I am trying to create a list of custom inputs based on an array, and when pressing the the enter key, I'd like the focus to automatically move to the next custom input.  I can get this to work with a regular <code>&lt;TextInput&gt;</code> react component using the <code>ref</code> and <code>onSubmitEditing</code> but I cannot get this to function properly using my custom component that wraps a <code>&lt;TextInput&gt;</code> </p>
  
  <p>Here is my code, it consists of two files: <code>App.js</code> and <code>TextInput2.js</code>  (I know that currently the last line will error because of the reference counter but if I can get it to work I'll address the last issue)</p>
  
  <p><a href="https://snack.expo.io/ryegY7tgB" rel="nofollow noreferrer">Working Snack</a></p>
  
  <p>-- App.js --</p>
  
  <pre class="lang-js prettyprint-override"><code>    import React from 'react';
      import { StyleSheet, View, TextInput } from 'react-native';
      import  TextInput2 from './TextInput2'
  
      export default class App extends React.Component {
        constructor(){
          super();
          this.myRef = [];
          this.state = {}
        }
  
        focusField = (key) =&gt; {
          this.myRef[key].focus()    
        }
  
        render() {
          let textFields = ["one", "two", "three", "four", "five"];
          return (
            &lt;View style={styles.container}&gt;
              {
                textFields.map((x, i) =&gt; {
                  this.myRef[i] = React.createRef();
                  let k = i + 1 
                  return(
                    &lt;TextInput2 
                      name={x}
                      key={i}                
                      placeholder={x + " This Doesnt Work"}
                      ref={ref =&gt; this.myRef[i] = ref}
                      nextRef={this.myRef[k]}
                      //onSubmitEditing={() =&gt; this.focusField(k)}
                      //onSubmitEditing={() =&gt; this.myRef[k].focus()}
                      blurOnSubmit={false}         
                    /&gt;
                  )
                })
              }
              {
  
                textFields.map((x, i) =&gt; {
                  this.myRef[i] = React.createRef(); 
                  return(
                    &lt;TextInput 
                      name={x}
                      key={i}
                      placeholder="This works!"
                      ref={ref =&gt; this.myRef[i] = ref} 
                      onSubmitEditing={() =&gt; this.focusField(i+1)}
                      blurOnSubmit={false}         
                    /&gt;
                  )
                })
              }
            &lt;/View&gt;
          );
        }
      }
  
      const styles = StyleSheet.create({
        container: {
          flex: 1,
          justifyContent: 'center',
          alignItems: 'center',
          backgroundColor: '#F5FCFF',
        },  
      });
  </code></pre>
  
  <p>--TextInput2.js --</p>
  
  <pre class="lang-js prettyprint-override"><code>    import React from 'react';
      import { View, TextInput } from 'react-native';
  
      export default class TextInput2 extends React.Component {
          state={}
          handleFocus = () =&gt; {}
          handleBlur = () =&gt; {}
  
          focus() {
              this.props.nextRef.focus()
          }   
  
          render() {
              return (
                  &lt;View &gt;
                      &lt;TextInput
                          {...this.props}                    
                          onFocus={this.handleFocus}
                          onBlur={this.handleBlur}
                          onSubmitEditing={() =&gt; this.focus()}                                                                   
                      /&gt;                             
                  &lt;/View&gt;
              )
          }
      }
  </code></pre>
  
  <p>I've read <a href="https://github.com/facebook/react-native/issues/20668" rel="nofollow noreferrer">this post</a> and <a href="https://stackoverflow.com/questions/40052630/react-native-this2-refs-myinput-focus-is-not-a-function?rq=1">this</a> but cannot seem to determine how to setup the function to set focus on the next field.</p>