Source:  Twitter logo

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

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

49 users liked answer #0dislike answer #049
satya164 profile pic
satya164
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

10 users liked answer #1dislike answer #110
Irfan Khan profile pic
Irfan Khan

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

3 users liked answer #2dislike answer #23
Gabriel Scalici profile pic
Gabriel Scalici

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

3 users liked answer #3dislike answer #33
SuRao profile pic
SuRao

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.

2 users liked answer #4dislike answer #42
hong developer profile pic
hong developer

Index.js content

export * from './login';
export * from './header';
export * from './secondpage';
export * from './footer';
export * from './thirdpage';
-3 users liked answer #5dislike answer #5-3
roz333 profile pic
roz333

Copyright © 2022 QueryThreads

All content on Query Threads is licensed under the Creative Commons Attribution-ShareAlike 3.0 license (CC BY-SA 3.0).