Clash Royale CLAN TAG#URR8PPP

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

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?

DrawerNavigator

Router page

mainScreen

photos page

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

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

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>

)




3 Answers
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:

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

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


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

navigation

<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().

mainScreen

this.props

render()

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

photos page

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

this.props.onPress

<TouchableOpacity onPress=this.props.onPress/>


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

<Parent onPress=this.Handlepress />


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 :)

By clicking "Post Your Answer", you acknowledge that you have read our updated terms of service, privacy policy and cookie policy, and that your continued use of the website is subject to these policies.