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

Perhaps I'm overlooking something, but it just looks like a simple Javascript error. You're destructing your props in your pure component MyNavScreen:

const MyNavScreen = ({ navigation }) => (

This means that you don't have access to this.props. You just have access to the destructured prop navigation. Hence the reason for the undefined error as this really is undefined:

 this.props.navigation.navigate('DrawerOpen')}>

If you change it instead to use navigation directly, it should work:

 navigation.navigate('DrawerOpen')}>

On mainScreen, you are fine because it's not a pure component with destructured arguments. So you still have access to this.props in render().

You should brush up on destructing if this is causing you trouble.