title: React native accessing refs in a custom component
body: <p>I have a custom TextInput. When I edit the first <code>TextInput</code> and hit the "Next" in the keyboard, I want it to focus the second <code>TextInput</code>. I have searched before in Stack Overflow and it seems I can do it using <code>ref</code>. However I'm not sure how to do that with custom <code>TextInput</code>. </p>
  
  <p>Here is my basic CustomTextInput code:</p>
  
  <pre><code>let CustomTextInput = React.createClass({
      propTypes: {
          refName: React.PropTypes.string,
          returnKeyType: React.PropTypes.string,
          onSubmitEditing: React.PropTypes.func
      },
  
      getDefaultProps: function(){
          return {
              refName: "",
              returnKeyType: "default",
              onSubmitEditing: () =&gt; {}
          }
      },
  
      render: function(){
          return(
              &lt;View&gt;
                  &lt;TextInput 
                      ref={this.props.refName}
                      returnKeyType={this.props.returnKeyType}
                      onSubmitEditing={this.props.onSubmitEditing}
                  /&gt;
              &lt;/View&gt;
          )
      }
  });
  
  module.exports = CustomTextInput
  </code></pre>
  
  <p>And here is my Parent class that calls it:</p>
  
  <pre><code>let MyParent = React.createClass({
      render: function(){
          return(
              &lt;View&gt;
                  &lt;CustomTextInput
                      refName={'firstNameInput'},
                      returnKeyType={'next'}
                      onSubmitEditing={(event) =&gt; { 
                          this.refs.lastNameInput.focus();
                      }}
                  /&gt;
                  &lt;CustomTextInput
                      refName={'lastNameInput'}
                  /&gt;
              &lt;/View&gt;
          )
      }
  });
  </code></pre>
  
  <p>Right now, when I press the <code>Next</code> in the keyboard, after selecting the <code>firstName</code>, I got an exception:</p>
  
  <blockquote>
    <p>undefined is not an object (evaluating '_this2.refs.lastNameInput.focus')</p>
  </blockquote>
  
  <p>I'm not sure what I did wrong there.. Any help is appreciated. :)</p>