React Native navigation TypeError: undefined is not an object (evaluating 'Object.keys(routeConfigs)')

Question

I have the following code in App.js file:-

import React, { Component } from 'react';
import { Platform, StyleSheet, Text, View } from 'react-native';
import { createAppContainer } from 'react-navigation';
import { createStackNavigator } from 'react-navigation-stack';
import { NavigationContainer} from "react-navigation";


const Home = ({ navigation }) => {
  return (
      <View>
        <Text>This is Home page!</Text>
      </View>
  )
}

const Stack = createStackNavigator();

function MyStack() {
  return (
      <Stack.Navigator>
        <Stack.Screen name="Home" component={Home} />
      </Stack.Navigator>
  );
}
 export default function App() {
   return (
       <NavigationContainer>
         <MyStack />
       </NavigationContainer>
   );
}

I followed the same instruction on this page:- https://reactnavigation.org/docs/stack-navigator/ But it gave an error

Answer 1

I fixed the issue by following the version 4 documentation The problem is that when i installed the react-navigation package by following these commands:-

yarn add @react-navigation/native

I assumed by default if i install any package without defining a specific version, it suppose to install the latest current version of that package which is (v5) any by default i followed the package documentation for the version 5 . and when i checked the installed package version i noticed that the version 4 is installed no 5 .

Now i used the version 4 stack creating syntax :-

const navigator = createStackNavigator({
    Home:Home,
},
    {
        initialRouteName: 'Home'
    });
export default createAppContainer(navigator);

Every thing work fine now

Here is the URL for the

V5 https://reactnavigation.org/docs/hello-react-navigation

V4 https://reactnavigation.org/docs/4.x/getting-started