React Native - navigation issue "undefined is not an object (this.props.navigation.navigate)" : <p>Im following this tutorial <a href="https://reactnavigation.org/docs/intro/" rel="noreferrer">https://reactnavigation.org/docs/intro/</a>  and im running into a bit of issues.</p>

<p>Im using the Expo Client app to render my app every time and not a simulator/emulator.</p>

<p>my code is seen down below. </p>

<p>I originally had the  "SimpleApp" const defined above "ChatScreen" component  but that gave me the following error:</p>

<blockquote>
  <p>Route 'Chat' should declare a screen. For example: ...etc</p>
</blockquote>

<p>so I moved the decleration of SimpleApp to just above "AppRegistry" and that flagged a new error </p>

<blockquote>
  <p>Element type is invalid: expected string.....You likely forgot to export your component..etc</p>
</blockquote>

<p>the tutorial did not add the key words "export default" to any  component which I think it may have to do with the fact that im running it on the Expo app? so I added "export default" to "HomeScreen" and the error went away.</p>

<p>The new error that I cant seem to get rid off(based on the code below) is the following:</p>

<blockquote>
  <p>undefined is not an object (evaluating 'this.props.navigation.navigate')</p>
</blockquote>

<p>I can't get rid of it unless I remove the "{}" around "const {navigate}" but that will break the navigation when I press on the button from the home screen</p>

<pre><code>import React from 'react';
import {AppRegistry,Text,Button} from 'react-native';
import { StackNavigator } from 'react-navigation';

export default class HomeScreen extends React.Component {
  static navigationOptions = {
    title: 'Welcome',
  };
  render() {
    const { navigate } = this.props.navigation;
    return (
      &lt;View&gt;
        &lt;Text&gt;Hello, Chat App!&lt;/Text&gt;
        &lt;Button
          onPress={() =&gt; navigate('Chat')}
          title="Chat with Lucy"
        /&gt;
      &lt;/View&gt;
    );
  }
}



class ChatScreen extends React.Component {
  static navigationOptions = {
    title: 'Chat with Lucy',
  };
  render() {
    return (
      &lt;View&gt;
        &lt;Text&gt;Chat with Lucy&lt;/Text&gt;
      &lt;/View&gt;
    );
  }
}

const SimpleApp = StackNavigator({
  Home: { screen: HomeScreen },
  Chat: { screen: ChatScreen },
});
AppRegistry.registerComponent('SimpleApp', () =&gt; SimpleApp);
</code></pre>
