title: React Native navigator ref property
body: <p>I am trying to follow the example (<a href="https://github.com/facebook/react-native/tree/master/Examples/UIExplorer/Navigator" rel="nofollow">https://github.com/facebook/react-native/tree/master/Examples/UIExplorer/Navigator</a>) on the react native site to set up my navigator, but I can't seem to get it to work.  Right now I am having trouble with the ref property, as when its calls <code>_setNavigatorRef</code>, I am getting an error that it cannot find the <code>property _navigator of null</code> in the following code. It works in the example but I am not sure why:</p>
  
  <p><strong>index.ios.js</strong></p>
  
  <pre><code>'use strict';
  var React = require('react-native');
  var DataEntry = require('./app/DataEntry');
  var PasswordView = require('./app/PasswordView');
  var GoogSignIn = require('./app/GoogSignIn');
  
  
  var {
      AppRegistry,
      Image,
      StyleSheet,
      Text,
      View,
      Navigator,
      TouchableOpacity,
  } = React;
  
  class PasswordRecovery extends React.Component {
    render() {
      return (
        &lt;Navigator
          ref={this._setNavigatorRef}
          style={styles.container}
          initialRoute={{id: 'GoogSignIn', name: 'Index'}}
          renderScene={this.renderScene}
          configureScene={(route) =&gt; {
            if (route.sceneConfig) {
              return route.sceneConfig;
            }
            return Navigator.SceneConfigs.FloatFromRight;
          }} /&gt;
      );
    }
  
    renderScene(route, navigator) {
      switch (route.id) {
      case 'GoogSignIn':
        return &lt;GoogSignIn navigator={navigator} /&gt;;
      case 'DataEntry':
        return &lt;DataEntry navigator={navigator} /&gt;;
      case 'PasswordView':
        return &lt;PasswordView navigator={navigator} /&gt;;
      default:
        return this.noRoute(navigator);
    }
  
    noRoute(navigator) {
      return (
        &lt;View style={{flex: 1, alignItems: 'stretch', justifyContent: 'center'}}&gt;
          &lt;TouchableOpacity style={{flex: 1, alignItems: 'center', justifyContent: 'center'}}
              onPress={() =&gt; navigator.pop()}&gt;
            &lt;Text style={{color: 'red', fontWeight: 'bold'}}&gt;ERROR: NO ROUTE DETECTED&lt;/Text&gt;
          &lt;/TouchableOpacity&gt;
        &lt;/View&gt;
      );
    }
  
    _setNavigatorRef(navigator) {
      if (navigator !== this._navigator) {
        this._navigator = navigator;
  
        if (navigator) {
          var callback = (event) =&gt; {
            console.log(
              `TabBarExample: event ${event.type}`,
              {
                route: JSON.stringify(event.data.route),
                target: event.target,
                type: event.type,
              }
            );
          };
          // Observe focus change events from the owner.
          this._listeners = [
            navigator.navigationContext.addListener('willfocus', callback),
            navigator.navigationContext.addListener('didfocus', callback),
          ];
        }
      }
    }
  
    componentWillUnmount() {
      this._listeners &amp;&amp; this._listeners.forEach(listener =&gt; listener.remove());
    }
  }
  
  var styles = StyleSheet.create({
    container: {
      flex: 1,
      justifyContent: 'center',
      alignItems: 'center',
      backgroundColor: '#F5FCFF',
    },
    welcome: {
      fontSize: 20,
      textAlign: 'center',
      margin: 10,
    },
    instructions: {
      textAlign: 'center',
      color: '#333333',
      marginBottom: 5,
    },
  });
  
  
  AppRegistry.registerComponent('PasswordRecovery', () =&gt; PasswordRecovery);
  </code></pre>
  
  <p>I am just trying to get this all setup so that I can display a Google Sign in scene and then navigate from there.  The code for that scene so far is here:</p>
  
  <p><strong>GoogSignIn.js</strong></p>
  
  <pre><code>'use strict';
  
  var React = require('react-native');
  var { NativeAppEventEmitter } = require('react-native');
  var GoogleSignin = require('react-native-google-signin');
  var cssVar = require('cssVar');
  var { Icon } = require('react-native-icons');
  
  var {
    AppRegistry,
    StyleSheet,
    Text,
    View,
    TouchableOpacity,
    TouchableHighlight,
    PixelRatio,
    Navigator,
  } = React;
  
  var NavigationBarRouteMapper = {
  
    LeftButton: function(route, navigator, index, navState) {
      if (index === 0) {
        return null;
      }
  
      var previousRoute = navState.routeStack[index - 1];
      return (
        &lt;TouchableOpacity
          onPress={() =&gt; navigator.pop()}
          style={styles.navBarLeftButton}&gt;
          &lt;Text style={[styles.navBarText, styles.navBarButtonText]}&gt;
            {previousRoute.title}
          &lt;/Text&gt;
        &lt;/TouchableOpacity&gt;
      );
    },
  
    RightButton: function(route, navigator, index, navState) {
      return (
        null
      );
    },
  
    Title: function(route, navigator, index, navState) {
      return (
        &lt;Text style={[styles.navBarText, styles.navBarTitleText]}&gt;
          GOOGLE SIGN IN
        &lt;/Text&gt;
      );
    },
  
  };
  
  class GoogSignin extends React.Component {
    constructor(props) {
      super(props);
      this.state = {
        user: null
      };
    }
  
    componentWillMount() {
  var navigator = this.props.navigator;
  var callback = (event) =&gt; {
    console.log(
      `NavigationBarSample : event ${event.type}`,
      {
        route: JSON.stringify(event.data.route),
        target: event.target,
        type: event.type,
      }
    );
  };
  
  // Observe focus change events from this component.
  this._listeners = [
    navigator.navigationContext.addListener('willfocus', callback),
    navigator.navigationContext.addListener('didfocus', callback),
  ];
    }
  
    componentWillUnmount() {
      this._listeners &amp;&amp; this._listeners.forEach(listener =&gt; listener.remove());
    }
  
    componentDidMount() {
      this._configureOauth(
        '105558473349-7usegucirv10bruohtogd0qtuul3kkhn.apps.googleusercontent.com'
      );
    }
  
    renderScene(route, navigator) {
        console.log("HERE");
        return (
          &lt;View style={styles.container}&gt;
            &lt;TouchableHighlight onPress={() =&gt; {this._signIn(); }}&gt;
              &lt;View style={{backgroundColor: '#f44336', flexDirection: 'row'}}&gt;
                &lt;View style={{padding: 12, borderWidth: 1/2, borderColor: 'transparent', borderRightColor: 'white'}}&gt;
                  &lt;Icon
                    name='ion|social-googleplus'
                    size={24}
                    color='white'
                    style={{width: 24, height: 24}}
                  /&gt;
                &lt;/View&gt;
                &lt;Text style={{color: 'white', padding: 12, marginTop: 2, fontWeight: 'bold'}}&gt;Sign in with Google&lt;/Text&gt;
              &lt;/View&gt;
            &lt;/TouchableHighlight&gt;
          &lt;/View&gt;
        );
    }
  
    render() {
      return (
        &lt;Navigator
        debugOverlay={false}
        style={styles.appContainer}
        renderScene={this.renderScene}
        navigationBar={
          &lt;Navigator.NavigationBar
            routeMapper={NavigationBarRouteMapper}
            style={styles.navBar}/&gt;
        }/&gt;
      );
    }
  
    _configureOauth(clientId, scopes=[]) {
      console.log("WE HERE")
      GoogleSignin.configure(clientId, scopes);
  
      NativeAppEventEmitter.addListener('googleSignInError', (error) =&gt; {
        console.log('ERROR signin in', error);
      });
  
      NativeAppEventEmitter.addListener('googleSignIn', (user) =&gt; {
        console.log(user);
        this.setState({user: user});
      });
  
      return true;
    }
  
    _signIn() {
      GoogleSignin.signIn();
    }
  
    _signOut() {
      GoogleSignin.signOut();
      this.setState({user: null});
    }
  };
  
  var styles = StyleSheet.create({
    container: {
      flex: 1,
      justifyContent: 'center',
      alignItems: 'center',
      backgroundColor: '#F5FCFF',
    },
    messageText: {
      fontSize: 17,
      fontWeight: '500',
      padding: 15,
      marginTop: 50,
      marginLeft: 15,
    },
    button: {
      backgroundColor: 'white',
      padding: 15,
      borderBottomWidth: 1 / PixelRatio.get(),
      borderBottomColor: '#CDCDCD',
    },
    buttonText: {
      fontSize: 17,
      fontWeight: '500',
    },
    navBar: {
      backgroundColor: 'white',
    },
    navBarText: {
      fontSize: 16,
      marginVertical: 10,
    },
    navBarTitleText: {
      color: cssVar('fbui-bluegray-60'),
      fontWeight: '500',
      marginVertical: 9,
    },
    navBarLeftButton: {
      paddingLeft: 10,
    },
    navBarRightButton: {
      paddingRight: 10,
    },
    navBarButtonText: {
      color: cssVar('fbui-accent-blue'),
    },
    scene: {
      flex: 1,
      paddingTop: 20,
      backgroundColor: '#EAEAEA',
    },
  });
  
  
  
  module.exports = GoogSignin;
  </code></pre>