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';

I had the same issue, re-run - npm install @react-navigation/native solved the problem — Liron Sher, Feb 06 '20 at 06:38
I really appreciate it, Issue has been solved, Do you know how to change Drawer style?I mean backgroundeColor and etc... — roz333, Feb 06 '20 at 08:12
thanks @LironSher update @react-navigation/native worked for me — Hassan jan, Apr 02 '20 at 18:32

score 52 · Answer 1 · answered Feb 06 '20 at 14:46

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

score 10 · Answer 2 · edited Nov 08 '20 at 00:12

10

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

edited Nov 08 '20 at 00:12

Krzysztof Madej

32,704
10
78
107

answered Nov 07 '20 at 20:08

Irfan Khan

461
5
7

score 3 · Answer 3 · answered Mar 07 '20 at 01:10

try install: yarn add react-navigation-stack

and dependencies: yarn add react-native-gesture-handler react-native-reanimated react-native-screens react-native-safe-area-context @react-native-community/masked-view

in your routes: import { createStackNavigator } from 'react-navigation-stack';

score 3 · Answer 4 · answered Aug 28 '20 at 04:27

3

Uninstall @react-navigation/native and reinstall worked for me.

answered Aug 28 '20 at 04:27

SuRao

31
1

3

Are you referring to some other answer here? Your post is phrased like a "Thanks." but I cannot tell what for... – Yunnosch Aug 28 '20 at 06:05

hong developer · Accepted Answer · 2020-02-07T05:27:19.430

2

I don't understand what you're trying to do now. I think you want to add a drawer Navigator.

Your problem is you have to use one container, but you have two, and createStackNavigator has two parameters, but you have three.

createStackNavigator(RouteConfigs, StackNavigatorConfig);

I think your navigator structure should be as follows.

Drawers.js

export default const Drawers = () => {
  const Drawer = createDrawerNavigator();
  return (
        <Drawer.Navigator initialRouteName="login">
          <Drawer.Screen name="login" component={Login} />
          <Drawer.Screen name="second" component={SecondPage} />
        </Drawer.Navigator>
  )
};

App.js

import Drawers from "./Drawers"
...

const AppNavigator = createStackNavigator({
  login: { screen: Drawers },
  header: { screen: Header },
  second: { screen: SecondPage },
  footer: { screen: Footer },
  third: { screen: ThirdPage }
}, {
  initialRouteName: 'login',
  headerMode: 'none',
  mode: 'modal',
});

export default createAppContainer(AppNavigator)

index.js

import Login from './login';
import Header from './header';
import SecondPage from './secondpage';
import Footer from './footer';
import ThirdPage from './thirdpage';

export { Login, Header, SecondPage, Footer, ThirdPage}

OR

This issue can be a compatibility issue with the version. React-Navigation and StackNavigator versions must be up to date.

edited Feb 07 '20 at 05:27

answered Feb 06 '20 at 05:14

hong developer

13,291
4
38
68

I tried your solution right now, unfortunately it didn't work – roz333 Feb 06 '20 at 05:32
Sure this is the index.js content: ``` export * from './login'; export * from './header'; export * from './secondpage'; export * from './footer'; export * from './thirdpage'; ``` – roz333 Feb 06 '20 at 05:54
Sorry buddy, Please take a look to this one https://imgur.com/a/SMhjl4i – roz333 Feb 06 '20 at 06:06
@roz333 Look at my changed answer. Try changing 'index.js' like this. – hong developer Feb 06 '20 at 06:10
I did but same error occurred, I'm guessing that should be something wrong with drawer syntax, They have recently changed drawer method and there is no any tutorial for new method on internet. – roz333 Feb 06 '20 at 06:20
@roz333 There is no problem in the drawer. I think React-Navigation and StackNavigator should be updated to the latest. – hong developer Feb 06 '20 at 07:37
Yes buddy, I just found out that ,A few hours ago they have updated to version 5, After updating issue was solved.Thanks for your time. – roz333 Feb 06 '20 at 08:10
@roz333 I have completed and corrected my answers. Could you choose my answer, vote and close the question? – hong developer Feb 07 '20 at 05:28
Done, Thanks for your help – roz333 Feb 07 '20 at 05:57

score -3 · Answer 6 · answered Feb 06 '20 at 05:55

-3

Index.js content

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

answered Feb 06 '20 at 05:55

roz333

695
2
18
30

native.createnavigator factory is not a function

6 Answers6