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 area and I used This <TouchableHighlight onPress={() => this.props.navigation.navigate('DrawerOpen')}> to open Drawer menu in mainScreen and used that for photos page too, menu is ok in mainScreen, But when I click <TouchableHighlight onPress={() => this.props.navigation.navigate('DrawerOpen')}> in photos page, I got this error:

How Can I fix That?

My photos page:

import React from 'react';
import { Button, ScrollView, View, Text, StyleSheet, TouchableHighlight } from 'react-native';
import { DrawerNavigator } from 'react-navigation';
import MaterialIcons from 'react-native-vector-icons/MaterialIcons';
import Icon from 'react-native-vector-icons/FontAwesome'

const MyNavScreen = ({ navigation }) => (
  <View>
    <View style={styles.containerNavbar}>
      <TouchableHighlight onPress={() => this.props.navigation.navigate('DrawerOpen')}>
        <Icon name="bars" size={30} color="#fff" />
      </TouchableHighlight>
      <Text style={styles.navbarTitle}>Photos</Text>
    </View>

    <ScrollView>
      <View><Text>photo</Text></View>
      <Button onPress={() => navigation.goBack(null)} title="Go back" />
    </ScrollView>
  </View>
);

const MyPhotosHomeScreen = ({ navigation }) => (
  <MyNavScreen navigation={navigation} />
);
MyPhotosHomeScreen.navigationOptions = {
  title: 'Photos',
  drawerIcon: ({ tintColor }) => (
    <MaterialIcons
      name="photo"
      size={24}
      style={{ color: tintColor }}
    />
  ),
};
export default MyPhotosHomeScreen;

mainScreen:

export default class MainScreen extends React.Component {
    static navigationOptions = {
        drawerLabel: 'Home',
        drawerIcon: ({ tintColor }) => (
            <MaterialIcons
                name="home"
                size={24}
                style={{ color: tintColor }}
            />
        )
    };

    render() {
        return (
            <View>
                <View style={styles.containerNavbar}>
                    <TouchableHighlight onPress={() => this.props.navigation.navigate('DrawerOpen')}>
                        <Icon name="bars" size={30} color="#fff" />
                    </TouchableHighlight>
                    <Text style={styles.navbarTitle}>mainScreen</Text>
                </View>

                <View>
                    <View style={styles.containerFooter}>
                        <Text style={styles.footerTitle}>Footer</Text>
                    </View>
                </View>
            </View>

        )
    }
}

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:

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

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

<TouchableHighlight onPress={() => 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.

Answer 2

Binding this worked for me

In my case it worked when I bind this to the method that calls the prop it in the constructor.

constructor(props){
    super(props);
    this.showDetails = this.showDetails.bind(this);// you should bind this to the method that call the props
}

showDetails(_id){
    this.props.navigation.navigate('Details');
}

Or Simply use arrow function

showDetails = (_id) => {
      this.props.navigation.navigate('Details');
}

because while you use expression function it is going to create it's own scope.

Answer 3

If you use TouchableOpacity/Height in your child element, pass it this.props.onPress like this:

<TouchableOpacity onPress={this.props.onPress}/>

Then call the onPress function in your parent component like this:

<Parent onPress={this.Handlepress} />

Answer 4

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 5

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 6

This is how I have done it in React Navigation 2 release: I call the openDrawer() method from a StackNavigator that is a child navigator of the DrawerNavigator.

This is my DrawerNavigator:

export const Drawer = DrawerNavigator(
    {
        MyAccount: {screen: TabsStack},
    });


export const TabsStack = StackNavigator({

    Tabs: {
        screen: Tabs, navigationOptions: ({navigation}) => ({
            headerLeft: (
                <TouchableOpacity style={{marginLeft: 10, marginTop: 3}}
                                  onPress={() => navigation.openDrawer()}>
                    <Image source={require('./assets/menu_h.png')}/>
                </TouchableOpacity>)
        })

Answer 7

i had the same problem when i was using the header component

now you can use the navigation variable in other component like this

<TouchableOpacity onPress={() => { this.props.navigation.navigate("Play");}}>

Happy Codding :)

Answer 8

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 9

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)

Answer 10

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 .