Error: undefined is not an object (evaluating this.props.navigation.navigate)

Asked
Active3 hr before
Viewed126 times

9 Answers

objectpropsundefinederror
90%

Stack Overflow Public questions & answers , Stack Overflow help chat , Meta Stack Overflow

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')}>
load more v
88%

I'm getting myself familiar with the new react-navigation version. I'm seeing an issue while using the navigation.navigate method.,This doesn't worked still having the same issue,import { useNavigation } from '@react-navigation/native';

import { useNavigation } from '@react-navigation/native';

function NotificationsScreen() {
const navigation = useNavigation(); 
return(
<Button
        onPress={() => navigation.navigate('Notifications')}
        title="Go to notifications"
      />
);
}
load more v
72%

navigate(‘ReportDetails’, item),and here is my StackNavigator in my main component:,here is my main navigation component:

here is the top part of my ListItem:

<TouchableOpacity
            style={{flex:1}}
            onPress={()=> this.props.navigation.navigate('ReportDetails', item)}
            >. . .
load more v
65%

And after search on the docs and the react-navigation issues page and here on SO,undefined is not an object (evaluating '_this2.props.navigation.navigate'), Ask questionsundefined is not an object (evaluating '_this2.props.navigation.navigate') on a recursive component

<router>

export const HomeStack = createStackNavigator({
  Home: {
    screen: Home
  },

  PostShow: {
    screen: PostShow,

    navigationOptions: ({ navigation }) => ({
      title: `${navigation.state.params.post.title}`,
      headerTitleStyle,
      headerStyle
    })
  }
});

The postSHow component with:

<postShow>

  render() {
    const { title, body } = this.state;

    return (
      <View style={{ flex: 1 }}>
       
          <Text>{title}</Text>
          <Comments
            comments={this.state.comments}
          
            //navigation={this.props.navigation}
            //navigate={this.props.navigation.navigate}
          />               
     
      </View>
    );
  }
}
load more v
75%

Pretag
 Pretag team - issue, fix, solve, resolve
40%

My splash screen code is :,I want to go to the homepage after splash screen. but I am getting the error ,and my home screen is

I want to go to the homepage after splash screen. but I am getting the error

 ERROR TypeError: undefined is not an object(evaluating '_this.props.navigation.navigate')
load more v
22%

I am trying to make my first React Native Android app and I am getting this error:,undefined is not an object (evaluating ‘this.props.navigation.navigate’),You are exporting the component wrong. You should get rid of the export default on your class HomeScreen definition and at the bottom of the file do export default App;

import React from 'react';
import { StyleSheet, Text, View, Button, TextInput } from 'react-native';
import { StackNavigator } from 'react-navigation';

export default class HomeScreen extends React.Component {

  static navigationOptions = {
    title: 'Home',
  };

  render() {
    const { navigate } = this.props.navigation;    

    return (
      <View>
        <Button 
          title="Show Centers near me"
          onPress={() =>
            navigate('Results', "Search Term")
          }
          />
        <Text>or</Text>
      </View>
    );
  }
}


class ResultsScreen extends React.Component {

  static navigationOptions = {
    title: 'Results',
  };


  render() {
  const { navigate } = this.props.navigation;

    return (
      <View>
        <Text>Hi</Text>
      </View>
    );
  }
}

const App = StackNavigator({
  Home: { screen: HomeScreen },
  Results: { screen: ResultsScreen }
});
60%

<TouchableOpacity onPress={() => navigate(“topicDetail”)}>,//End of Drawer open Butoon,or I Should Access this.props to my photos page and pass this.props.navigation.navigate('DrawerOpen')?

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:
photo_ - - _ - -
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>

        )
    }
}
load more v
48%

navigation.navigate error,Additionally you can use a HOC or bring the the navigate function using the useContext from react navigation,But I am using the props -> navigation in the code of AppTextInput with a button component which should call TabNavigator but it’s throwing an error.

Pretag
 Pretag team - issue, fix, solve, resolve

Other "object-props" queries related to "Error: undefined is not an object (evaluating this.props.navigation.navigate)"