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

Answer 1

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.

Answer 2

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.

Answer 3

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

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