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

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 2

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 3

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 4

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 5

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 6

In then compnent that you're trying enter to another view you must send the object navigation by you use this in the onPress of component imported

example

Implementing component in a view <CardComponent title="bla bla" navigation={this.props.navigation} />

Component template

<View> <Button title={this.props.title} onPress={()=> this.props.navigation.navigate("anotherAwesomeView")}/> </View>

This problem is because the component that you're trying implement is not defined on stackNavigation, and by this the methot navigation is not avalible for you, and passing this object navigator by params you'll can access to it