React Native Error undefined is not an object (evaluating 'navigation.push')

Question

I want to navigate to List.js after I click the button in MainMenu.js file, but it always shows me this error:

TypeError: undefined is not an object (evaluating 'navigation.push')

This is my App.js file

import { StatusBar } from 'expo-status-bar';
import React from 'react';
import { StyleSheet, Text, View, Button } from 'react-native';
import { List } from './List';
import { MainMenu } from './MainMenu';

export default function App() {
  return (
    <View style={styles.container}>
      <Text>Open up App.js to stassrt working on your app!</Text>
      <StatusBar style="auto" />
      <MainMenu></MainMenu>
    </View>
  );
}

And this is my MainMenu.js file (I have the button in this file):

import React from 'react';
import { Text, Button, View, StyleSheet } from 'react-native';
import { ScreenContainer } from 'react-native-screens';
import { List } from './List';
import { useNavigation } from '@react-navigation/core';


export const MainMenu = ({navigation}) => (
    
    <View>
      <Text>Hello HOW ARE YsOU</Text>
      <Button title="Click" onPress={() => navigation.push("List")}></Button>
    </View>
    
);

sid c · Accepted Answer · 2021-07-27 17:54:25Z

1

In your MainMenu component, you are expecting an object with a key navigation as props. You are not passing any props to the MainMenu, however, and so the props are undefined, but you are expecting an object. To fix this, change the component to:

import React from 'react';
import { Text, Button, View, StyleSheet } from 'react-native';
import { ScreenContainer } from 'react-native-screens';
import { List } from './List';
import { useNavigation } from '@react-navigation/core';


export const MainMenu = () => {
    const navigation = useNavigation()
    return (
      <View>
        <Text>Hello HOW ARE YsOU</Text>
        <Button title="Click" onPress={() => navigation.push("List")}> 
        </Button>
      </View>
    ); 
};

We are using the hook, instead of props.

answered Jul 27, 2021 at 17:54

sid c

1951 silver badge4 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Vojta Simek Over a year ago

I wrote it like this but now it shows: " Couldn't find a navigation object. Is your component inside a screen in a navigator? "

sid c Over a year ago

You didn't set up React Navigation correctly then. You have to include your App inside a screen navigator component for React Navigation to work. I suggest you look at reactnavigation.org/docs/hello-react-navigation, you need to create a stack navigator and wrap your app in it.

Vojta Simek Over a year ago

I tried to do it exactly as it was written there. It looks like this has no solution 😄

Vojta Simek Over a year ago

I reinstalled it and it solved it. Thanks :)

Jordan Penn · Accepted Answer · 2021-07-28 16:35:03Z

I don't know how you implemented the stack navigator, but I think your App.js file should look like this:

import { NavigationContainer } from "@react-navigation/native";
import { createStackNavigator } from "@react-navigation/stack";
import { StatusBar } from 'expo-status-bar';
import React from 'react';
import { StyleSheet, Text, View, Button } from 'react-native';
import { List } from './List';
import { MainMenu } from './MainMenu';

const Stack = createStackNavigator();

export default function App() {
return (
   <NavigationContainer>
     <Stack.Navigator>
        <>
         <Stack.Screen name="Main Menu" component={MainMenu} />
         <Stack.Screen name="List" component={List} />
       </>
    </Stack.Navigator>
  </NavigationContainer>
 );
}

And I think your MainMenu component should look like this:

import React from 'react';
import { Text, Button, View, StyleSheet } from 'react-native';
import { ScreenContainer } from 'react-native-screens';
import { List } from './List';

export const MainMenu = ({navigation}) => (
  <View style={styles.container}>
    <Text>Open up App.js to stassrt working on your app!</Text>
    <StatusBar style="auto" />
    <View>
     <Text>Hello HOW ARE YsOU</Text>
     <Button title="Click" onPress={() => navigation.navigate("List")</Button>      
    </View>
  </View>

Collectives™ on Stack Overflow

React Native Error undefined is not an object (evaluating 'navigation.push')

2 Answers 2

4 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related