title: React Native, NavigatorIOS, undefined is not an object (evaluating 'this.props.navigator.push')
body: <p>I'm trying to use <code>NavigatorIOS</code> so in my <code>index.ios.js</code> I got:</p>
  
  <pre><code>'use strict';
  
  var React = require('react-native');
  var Home = require('./App/Components/Home');
  
  var {
    AppRegistry,
    StyleSheet,
    NavigatorIOS
  } = React;
  
  var styles = StyleSheet.create({
    container:{
      flex: 1,
      backgroundColor: '#111111'
    }
  });
  
  class ExampleApp extends React.Component{
    render() {
      return (
        &lt;NavigatorIOS
          style={styles.container}
          initialRoute={{
            title: 'example',
            component: Home
          }} /&gt;
      );
    }
  };
  
  AppRegistry.registerComponent('exampleapp', () =&gt; ExampleApp);
  module.exports = ExampleApp;
  </code></pre>
  
  <p>And then in the <code>Home.js</code>:</p>
  
  <pre><code>'use strict';
  
  var React = require('react-native');
  var Park = require('./Park');
  
  var {
    View,
    StyleSheet,
    Text,
    TouchableHighlight
  } = React;
  
  var styles = StyleSheet.create({
  ...
  });
  
  class Home extends React.Component{
    onPress() {
      this.props.navigator.push({
        title: 'Routed!',
        component: Park
      });
    }
  
    render() {
      return (
        &lt;View style={styles.mainContainer}&gt;
          &lt;Text&gt; Testing React Native &lt;/Text&gt;
          &lt;TouchableHighlight onPress={this.onPress} style={styles.button}&gt;
            &lt;Text&gt;Welcome to the NavigatorIOS . Press here!&lt;/Text&gt;
          &lt;/TouchableHighlight&gt;
        &lt;/View&gt;
      );
    }
  };
  
  module.exports = Home;
  </code></pre>
  
  <p>The issue I have is that when I click on the <code>TouchableHighlight</code> triggering <code>onPress()</code>, I am getting an error:</p>
  
  <pre><code>"Error: undefined is not an object (evaluating 'this.props.navigator')
  </code></pre>
  
  <p>So it seems that it can't find the <code>navigator</code> from props but the navigator should be passed by <code>NavigatorIOS</code>?</p>
  
  <p>Also it seems that the <code>Home</code> Component has <code>this.props.navigator</code> as per image:</p>
  
  <p><img src="https://i.stack.imgur.com/ujLEV.png" alt="enter image description here"></p>
  
  <p>Any hints?</p>
  
  <p>I found a couple of links (people having exactly the same problem but that didn't help):</p>
  
  <ul>
  <li><p><a href="https://github.com/facebook/react-native/issues/416" rel="nofollow noreferrer">https://github.com/facebook/react-native/issues/416</a></p></li>
  <li><p><a href="https://stackoverflow.com/questions/30079640/undefined-is-not-an-object-evaluating-this-props-navigator-push">undefined is not an object (evaluating &#39;this.props.navigator.push&#39;)</a></p></li>
  </ul>