native.createnavigator factory is not a function

Question

I am going to design a Drawer navigation in my project.

I installed that by this command:

npm install @react-navigation/drawer 

Then imported that into App.js

import { createDrawerNavigator } from '@react-navigation/drawer'; import { NavigationContainer } from '@react-navigation/native'; 

This is my package.json content:

"@react-native-community/masked-view": "^0.1.6", "@react-navigation/drawer": "^5.0.0", "react": "16.9.0", "react-native": "0.61.5", "react-native-gesture-handler": "^1.5.6", "react-native-reanimated": "^1.7.0", "react-native-screens": "^2.0.0-beta.1", "react-native-view-shot": "^3.0.2", "react-navigation": "^4.1.1", "react-navigation-stack": "^2.1.0", 

This is my App.js content:

const App = () => {   const Drawer = createDrawerNavigator();   return (     <View style={styles.container}>       <NavigationContainer>         <Drawer.Navigator initialRouteName="login">           <Drawer.Screen name="login" component={Login} />           <Drawer.Screen name="second" component={SecondPage} />         </Drawer.Navigator>       </NavigationContainer>     </View>   ) }; 

I should say that I've already created Login and SecondPage components and declared them in a file named root.js

import { createAppContainer } from 'react-navigation'; import { createStackNavigator } from 'react-navigation-stack'; import { Login, Header, SecondPage, Footer, ThirdPage } from './components/index';  const AppNavigator = createStackNavigator({   login: { screen: Login },   header: { screen: Header },   second: { screen: SecondPage },   footer: { screen: Footer },   third: { screen: ThirdPage } }, {   initialRouteName: 'login',   headerMode: 'none',   mode: 'modal', }, {});  export default createAppContainer(AppNavigator); 

But i'm getting an error (following screen).

How can i fix this?

index.js

export * from './login'; export * from './header'; export * from './secondpage'; export * from './footer'; export * from './thirdpage'; 

Answer 1

You're combining both React Navigation 4 and React Navigation 5 in your project. It's not valid.

React Navigation 4 packages: react-navigation, react-navigation-stack, react-navigation-drawer etc.

React Navigation 5 packages: @react-navigation/native, @react-navigation/stack, @react-navigation/drawer etc.

Follow the official docs and use the correct version and syntax of the packages https://reactnavigation.org/docs/en/getting-started.html

Basically remove your code in root.js and create stack navigator like here https://reactnavigation.org/docs/en/stack-navigator.html

Answer 2

npm install --save @react-navigation/native 

after that re-run

npm install @react-navigation/native 

It works for me. I hope, it will work in your case