title: React native Navigation problems: Transitions
body: <p>I've started this week to learn React-native and I'm breaking my brain trying to test a basic navigation. I've searched around the internet and I haven´t found the solution.</p>
  
  <p>This is my code:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="false" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>import React, { Component } from 'react';
  import {
    AppRegistry,
    StyleSheet,
    Text,
    View,
    Navigator,
    TouchableOpacity,
    TouchableHighlight,
    Image
  } from 'react-native';
  
  class PageOne extends Component {
    constructor(props){
      super(props);
    }
  
    _handlePress() {
  
      this.props.navigator.push({component:PageTwo});
    }
  
    render() {
       let pic = {
        uri: 'http://npsapps.com/wp-content/uploads/2015/09/slider1-bg.png'
      };
      return (
         &lt;View style={{flex: 1, alignItems: 'stretch'}}&gt;
          &lt;Image source={pic} style={{flex: 1, alignItems: 'center', justifyContent:'center'}}&gt;
            &lt;TouchableHighlight style={styles.button} onPress={this._handlePress}&gt;
              &lt;Text style={styles.buttonText}&gt;Hello&lt;/Text&gt;
            &lt;/TouchableHighlight&gt;
          &lt;/Image&gt;
        &lt;/View&gt;
      )
    }
  }
  
  class PageTwo extends Component {
    constructor(props){
      super(props);
    }
  
    _handlePress() {
      this.props.navigator.pop();
    }
  
    render() {
      return (
        &lt;View style={[styles.container, {backgroundColor: 'purple'}]}&gt;
          &lt;Text style={styles.welcome}&gt;This is page two!&lt;/Text&gt;
         &lt;/View&gt;
      )
    }
  }
  
  class ReactNativeNavigationExample extends Component {
    _renderScene(route, navigator) {
      return &lt;route.component navigator={navigator} /&gt;
    }
  
    _configureScene(route) {
      //return CustomSceneConfig;
      return Navigator.SceneConfigs.FloatFromRight 
    }
  
    render() {
      return (
        &lt;Navigator
          initialRoute={{component: PageOne }}
          renderScene={this._renderScene}
          configureScene={this._configureScene} 
          navigationBar={
             &lt;Navigator.NavigationBar
              routeMapper={NavigationBarRouteMapper}/&gt;}
        /&gt;
      );
    }
  }
  
  var NavigationBarRouteMapper = {
    LeftButton(route, navigator, index, navState) {
      if(index &gt; 0) {
        return (
          &lt;TouchableHighlight
             underlayColor="transparent"
             onPress={() =&gt; { if (index &gt; 0) { navigator.pop() } }}&gt;
            &lt;Text style={ styles.leftNavButtonText }&gt;Back&lt;/Text&gt;
          &lt;/TouchableHighlight&gt;
      )} 
      else { return null }
    },
    RightButton(route, navigator, index, navState) {
      if (route.onPress) return ( &lt;TouchableHighlight
                                  onPress={ () =&gt; route.onPress() }&gt;
                                  &lt;Text style={ styles.rightNavButtonText }&gt;
                                      { route.rightText || 'Right Button' }
                                  &lt;/Text&gt;
                                &lt;/TouchableHighlight&gt; )
    },
    Title(route, navigator, index, navState) {
      return &lt;Text style={ styles.title }&gt;MY APP TITLE&lt;/Text&gt;
    }
  };
  
  const styles = StyleSheet.create({
    container: {
      flex: 1,
      justifyContent: 'center',
      alignItems: 'center',
      backgroundColor: '#F5FCFF',
    },
    welcome: {
      fontSize: 20,
      textAlign: 'center',
      margin: 10,
      color: 'white',
    }
  });
  
  AppRegistry.registerComponent('testProject', () =&gt; ReactNativeNavigationExample);</code></pre>
  </div>
  </div>
  </p>
  
  <p>And here is the error that I get:
  <a href="https://i.stack.imgur.com/oIN6M.png" rel="nofollow"><img src="https://i.stack.imgur.com/oIN6M.png" alt="enter image description here"></a></p>
  
  <p>¿Anybode know why I can't get navigator property from the second page?</p>
  
  <p>Thanks.</p>