title: React-Native refs undefined on text input
body: <p>we are currently running React-Native 0.33</p>
  
  <p>We are trying to use the refs to go from 1 text input to another when they hit the next button.  Classic username to password.</p>
  
  <p>Anyone have any idea?  Below is the code we are using.  From other posts I've found on stack this is what they've done; however, it's telling us that this.refs is undefined.</p>
  
  <p><strong><em>UPDATE</em></strong>
  So I've narrowed the problem down to </p>
  
  <pre><code> render() {
      return (
        &lt;Navigator
            renderScene={this.renderScene.bind(this)}
            navigator={this.props.navigator}
  
            navigationBar={
              &lt;Navigator.NavigationBar style={{backgroundColor: 'transparent'}}
                  routeMapper={NavigationBarRouteMapper} /&gt;
            } /&gt;
      );
    }
  </code></pre>
  
  <p>If I just render the code below in the renderScene function inside of the original render it works, however with the navigator it won't work.  Does anyone know why? Or how to have the navigator show as well as render the code in renderScene to appear in the original render?</p>
  
  <pre><code>   class LoginIOS extends Component{
  
    constructor(props) {
      super(props);
      this.state={
        username: '',
        password: '',
        myKey: '',
      };
    }
  
    render() {
      return (
        &lt;Navigator
            renderScene={this.renderScene.bind(this)}
            navigator={this.props.navigator}
  
            navigationBar={
              &lt;Navigator.NavigationBar style={{backgroundColor: 'transparent'}}
                  routeMapper={NavigationBarRouteMapper} /&gt;
            } /&gt;
      );
    }
  
    renderScene() {
      return (
        &lt;View style={styles.credentialContainer}&gt;
                  &lt;View style={styles.inputContainer}&gt;
                    &lt;Icon style={styles.inputPassword} name="person" size={28} color="#FFCD00" /&gt;
                        &lt;View style={{flexDirection: 'row', flex: 1, marginLeft: 2, marginRight: 2, borderBottomColor: '#e0e0e0', borderBottomWidth: 2}}&gt;
                          &lt;TextInput 
                              ref = "FirstInput"
                              style={styles.input}
                              placeholder="Username"
                              autoCorrect={false}
                              autoCapitalize="none"
                              returnKeyType="next"
                              placeholderTextColor="#e0e0e0"
                              onChangeText={(text) =&gt; this.setState({username: text})}
                              value={this.state.username}
                              onSubmitEditing={(event) =&gt; {
                                this.refs.SecondInput.focus();
                              }}
                              &gt;
  
                          &lt;/TextInput&gt;
                        &lt;/View&gt;
                  &lt;/View&gt;
  
                  &lt;View style={styles.inputContainer}&gt;
                    &lt;Icon style={styles.inputPassword} name="lock" size={28} color="#FFCD00" /&gt;
                        &lt;View style={{flexDirection: 'row', flex: 1, marginLeft: 2, marginRight: 2, borderBottomColor: '#e0e0e0', borderBottomWidth: 2}}&gt;
                          &lt;TextInput
                              ref = "SecondInput"
                              style={styles.input}
                              placeholder="Password"
                              autoCorrect={false}
                              secureTextEntry={true}
                              placeholderTextColor="#e0e0e0"
                              onChangeText={(text) =&gt; this.setState({password: text})}
                              value={this.state.password}
                              returnKeyType="done"
                              onSubmitEditing={(event)=&gt; {
                                this.login();
                              }}
                              focus={this.state.focusPassword}
                              &gt;
                          &lt;/TextInput&gt;
                        &lt;/View&gt;
                  &lt;/View&gt;
        &lt;/View&gt;
        );
    }
  </code></pre>