title: React Navigation - cannot read property 'navigate' of undefined
body: <p>I've been trying to get up and running with <a href="https://reactnavigation.org/docs/intro/" rel="nofollow noreferrer">react navigation</a> but I run into a problem when I try to move navigation items into their own components.</p>
  
  <p>HomeScreen.js</p>
  
  <pre><code>import React, { Component } from 'react';
  
  import {
    StyleSheet,
    View,
    Text
  } from 'react-native';
  
  import NavButton from '../components/NavButton'
  
  class HomeScreen extends Component {
    render() {
      return (
        &lt;View style={styles.container}&gt;
          &lt;Text&gt;
          Hello World
          &lt;/Text&gt;
  
          &lt;NavButton
          navigate={this.props.navigator}
          /&gt;
        &lt;/View&gt;
      );
    }
  }
  
  const styles = StyleSheet.create({
    container: {
      flex: 1,
      justifyContent: 'center',
      alignItems: 'center'
    }
  });
  
  
  export default HomeScreen;
  </code></pre>
  
  <p>Then in the NavButton component I try to navigate to the new screen.</p>
  
  <pre><code> class NavButton extends Component {
    render() {
      return (
        &lt;View&gt;
          &lt;Button
          title="Go to About"
          onPress={() =&gt; this.props.navigator.navigate('About')}
          /&gt;
        &lt;/View&gt;
      );
    }
  }
  export default NavButton;
  </code></pre>
  
  <p>But I keep getting the error "Cannot read property 'navigate' of undefined.</p>
  
  <p>Here is my Router.js file as well. </p>
  
  <pre><code>import React from 'react';
  import {StackNavigator} from 'react-navigation';
  
  import HomeScreen from '../screens/HomeScreen'
  import AboutScreen from '../screens/AboutScreen'
  
  
  export const AppNavigator = StackNavigator({
    Home: {
      screen: HomeScreen
    },
    About: {
      screen: AboutScreen
    }
  })
  </code></pre>