Getting undefined is not an object evaluating _this.props.navigation
I use DrawerNavigator
and I have 3 pages:, Router page
B mainScreen
and photos page
,
I made a title bar of the navigation bar and I used This <TouchableHighlight onPress={() => this.props.navigation.navigate('DrawerOpen')}>
to open the Drawer menu in mainScreen, and I used that also for the photo page, the menu is ok in mainScreen, but when I click <TouchableHighlight onPress={() => this.props.navigation.navigate('DrawerOpen')}>
on the photos page, I get this error: How can I fix it?
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;
main screen:
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>
)
}
}
source to share
I may be missing something, but it just looks like a simple Javascript error. You destroy your props in a pure component MyNavScreen
:
const MyNavScreen = ({ navigation }) => (
This means that you do not have access to this.props
. You just have access to the destructured prop navigation
. Hence, the reason for the undefined error, since it is not actually defined:
<TouchableHighlight onPress={() => this.props.navigation.navigate('DrawerOpen')}>
If you change it to use navigation
directly, it should work:
<TouchableHighlight onPress={() => navigation.navigate('DrawerOpen')}>
You mainScreen
're fine because it's not a pure component with unstructured arguments. This way, you still have access to this.props
the render()
.
You must brush up on destruction if it is causing you problems.
source to share
Binding this worked for me
In my case, it worked when I linked this
to a method that is called prop
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 just use the arrow function
showDetails = (_id) => {
this.props.navigation.navigate('Details');
}
because while you are using the expression function, it is going to create its own scope .
source to share
Try it:
import { withNavigation } from 'react-navigation';
withNavigation
serves props throughout the project / application, you get access to navigation props from anywhere.
and
onPress={() => this.props.navigation.navigate('DrawerOpen')}
Finally,
export default withNavigation(MyPhotosHomeScreen);
check it out https://reactnavigation.org/docs/en/connecting-navigation-prop.html
source to share
This is how I did it in React Navigation 2 release: I call a method openDrawer()
from StackNavigator
which is a child navigator DrawerNavigator
.
This is mine 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>)
})
source to share
https://reactnavigation.org/docs/en/navigating.html
This link helped me solve this problem.
source to share
when you define a screen in createStackNavigator, it will pass a props called navigation by default, something like this => navigation={this.props.navigation}
but when you are using this.props.navigation.navigator("YOUR SCREEN ")
and not defining this screen in createStackNavigator, you must pass navigation={this.props.navigation}
from the screen that you defined in createStackNavigator and then you can use it in your component.
source to share
The ProductScreen class extends the {
default export ProductScreen; // make sure it mentions at the bottom of this line
Name it
<TouchableOpacity
onPress = {() => this.props.navigation.navigate('ProductAddScreen')}
activeOpacity={0.7} style={styles.button}>
<Text style={styles.message}>{this.state.notFound} </Text>
</TouchableOpacity>
source to share