React Native - navigation issue "undefined is not an object (this.props.navigation.navigate)"

Question

Im following this tutorial https://reactnavigation.org/docs/intro/ and im running into a bit of issues.

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

my code is seen down below.

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

Route 'Chat' should declare a screen. For example: ...etc

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

Element type is invalid: expected string.....You likely forgot to export your component..etc

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.

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

undefined is not an object (evaluating 'this.props.navigation.navigate')

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

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 (       <View>         <Text>Hello, Chat App!</Text>         <Button           onPress={() => navigate('Chat')}           title="Chat with Lucy"         />       </View>     );   } }    class ChatScreen extends React.Component {   static navigationOptions = {     title: 'Chat with Lucy',   };   render() {     return (       <View>         <Text>Chat with Lucy</Text>       </View>     );   } }  const SimpleApp = StackNavigator({   Home: { screen: HomeScreen },   Chat: { screen: ChatScreen }, }); AppRegistry.registerComponent('SimpleApp', () => SimpleApp); 

Answer 1

Additional Info: When you are nesting child components, you need to pass navigation as prop in parent component. //parent.js <childcomponent navigation={this.props.navigation}/>

And you can access navigation like this

//child.js

this.props.navigation.navigate('yourcomponent');

Reference: https://reactnavigation.org/docs/en/connecting-navigation-prop.html

Answer 2

With Expo you should't do the App registration your self instead you should let Expo do it, keeping in mind that you have to export default component always: Also you need to import View and Button from react-native: please find below the full code:

import React from 'react'; import {   AppRegistry,   Text,   View,   Button } from 'react-native'; import { StackNavigator } from 'react-navigation';   class HomeScreen extends React.Component {   static navigationOptions = {     title: 'Welcome',   };   render() {     const { navigate } = this.props.navigation;     return (       <View>         <Text>Hello, Chat App!</Text>         <Button           onPress={() => navigate('Chat', { user: 'Lucy' })}           title="Chat with Lucy"         />       </View>     );   } }   class ChatScreen extends React.Component {   // Nav options can be defined as a function of the screen's props:   static navigationOptions = ({ navigation }) => ({     title: `Chat with ${navigation.state.params.user}`,   });   render() {     // The screen's current route is passed in to `props.navigation.state`:     const { params } = this.props.navigation.state;     return (       <View>         <Text>Chat with {params.user}</Text>       </View>     );   } }  const  SimpleAppNavigator = StackNavigator({   Home: { screen: HomeScreen },   Chat: { screen: ChatScreen } });  const AppNavigation = () => (   <SimpleAppNavigator  /> );  export default class App extends React.Component {   render() {     return (         <AppNavigation/>     );   } }