Getting undefined is not an object evaluating _this.props.navigation

Question

I\'m using DrawerNavigator and I have 3 pages: Router page, mainScreen and a photos page,
I maked a header navbar are

Answer 1

functional components take props as argument. You should try this

const MyNavScreen = ({props}) =>

and then call the props without this key word

onPress = {() => props.navigation.navigate('DrawerOpen')} 

Answer 2

If you are using navigation in child component don't forget to send navigation in props to child

    <ChildComponent navigation={this.props.navigation}/>

Access in child component like this

    props.navigation.navigate("ScreenName")

Answer 3

Try this:

import { withNavigation } from 'react-navigation';

withNavigation serves the props all over the project/app, you access the navigation props from anywhere.

and

onPress={() => this.props.navigation.navigate('DrawerOpen')} 

Finally,

export default withNavigation(MyPhotosHomeScreen);

check out this https://reactnavigation.org/docs/en/connecting-navigation-prop.html

Answer 4

when you defined screen in createStackNavigator , it by default pass a props called navigation, something like this => navigation={this.props.navigation}

but when you using this.props.navigation.navigator("YOUR SCREEN ") and didn't defined this screen at createStackNavigator you must pass the navigation={this.props.navigation} form the screen that you defined in createStackNavigator and then you can use it in your component .

Answer 5

If you want navigation in child component,then you have to get props in child component.

Suppose you have 3 components - Comp_1,Comp_2,Comp_3 and you want to navigate from Comp_2 -> Comp_3. To do this follow these steps.

1. Pass props in Comp_1 component.Like this

   <Comp_2 navigation={this.props.navigation}/>

2. Now in Comp_2, we can navigate from Comp_2 -> Comp_3 like this.

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

For example -

<Button onPress = {() => this.props.navigation.navigate('Comp_3')} title = 'Go to Comp_3 Screen' />

Answer 6

I encountered the same problem. That's how I solved it:

1. Verify that all your constructors have "props" has argument
2. Bind the function with use the function this.props.navigation.navigate in the constructor like this: this.your_function = this.your_function.bind(this)