undefined is not an object (evaluating 'route.key') React Navigation

Question

I am having trouble getting the stack navigator in react native to work. I am just making blank stack navigators to go inside a bottomTabsNavigator. And I get an error referring to using the route.key. Even if I make a simple Stack navigator I still get this error, and can't seem to see any mention of it online anywhere. Any help would be very appreciated :)

import * as React from 'react';
import { NavigationContainer } from '@react-navigation/native';
import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
import { createStackNavigator } from '@react-navigation/stack';

import Icon from 'react-native-vector-icons/MaterialIcons';
import CartScreen from './screens/CartScreen'
import RecipeScreen from './screens/RecipeScreen'
import ProfileScreen from './screens/ProfileScreen'

const Stack = createStackNavigator();


function Navigator() {

    return (

        <NavigationContainer>

            <Stack.Navigator
                screenOptions={({ route }) => ({
                    headerStyle: {
                        backgroundColor: 'salmon',
                    },
                    headerTintColor: 'white',
                    headerTitleStyle: {
                        fontWeight: 'bold',
                    },
                })}
                tabBarOptions={{
                    showLabel: false,
                    activeTintColor: 'white',
                    inactiveTintColor: 'pink',
                    style: {backgroundColor: 'salmon', height: 60,}
                }}
            >
                <Stack.Screen name="cart" component={CartScreen} />
                <Stack.Screen name="recipe" component={RecipeScreen} />
                <Stack.Screen name="profile" component={ProfileScreen} />

            </Stack.Navigator>
        </NavigationContainer>

    )

}

export default Navigator

Solution was to use yarn instead of npm

score 21 · Answer 1 · answered Apr 28 '21 at 15:53

21

I had the same problem, and it was the @react-navigation/native and @react-navigation/stack versions installed. Make sure that the 2 libraries have the same version in the package.json file.

answered Apr 28 '21 at 15:53

Kaelgh

211
1
2

This fixed it for me! – Aric Kuter Aug 18 '21 at 09:20
what if they are not in same version? – Aahad Oct 02 '21 at 19:08
this fixed my issue as well thanks – ameen Oct 15 '21 at 01:24

score 1 · Answer 2 · answered Apr 06 '21 at 12:06

1

Here you have provided the same name in the parent screen and child screens so you are getting this error to have a try with a different name in screen declarations.

answered Apr 06 '21 at 12:06

Jignesh Mayani

6,937
1
20
36

Hello. Doesn't seem to be the fix. I've changed the code to not include the bottom tab navigator to show that its still not working even without it – Ryan Apr 06 '21 at 13:41
can you please have a try by removing the screenOptions and tabBarOptions ? – Jignesh Mayani Apr 06 '21 at 13:47
Still nothing :( – Ryan Apr 06 '21 at 14:58
Actually what issue you are facing now ? – Jignesh Mayani Apr 07 '21 at 04:49
Was the same issue, an error saying undefined is not an object (evaluating 'route.key'). I've solved the problem by using yarn instead of npm though – Ryan Apr 07 '21 at 10:03
Yes I've figured it out myself, thank you :) – Ryan Apr 08 '21 at 13:59
@Ryan glad to hear. – Jignesh Mayani Apr 08 '21 at 14:09
@Ryan how do you fixed the error?? – Aahad Oct 02 '21 at 18:59

score 0 · Answer 3 · answered Jan 26 '22 at 15:51

so this error occurs when you have a different version of these @react-navigation/native and @react-navigation/native-stack the version of this both terms should be the same

if the version of these is not similar then uninstall the older version using:- npm uninstall
Reinstall the new version using:- npm install
On my PC one of these versions was lower than 6 so after following these steps it solved my error.

undefined is not an object (evaluating 'route.key') React Navigation

3 Answers3

Linked