Unable to resolve @react-navigation/drawer in react native to create drawer navigation

Question

I am trying to create new drawer navigation but getting this below error

Unable to resolve "react-native-screens" from "node_modules\@react-navigation\drawer\src\views\DrawerView.tsx"
Failed building JavaScript bundle.

but same code i tried in new empty project it worked with react-native-drawer in older version of "react-navigation": "^2.6.2" but the same not working in "react-navigation": "^4.0.10", it shows that react-native-drawer is removed and @react-native/drawer is latest so we need to use that but its not working kindly help me resolving this...Code is in below

import * as React from 'react';
import { View, Text } from 'react-native';
import { NavigationContainer } from '@react-navigation/native';
import { createDrawerNavigator } from '@react-navigation/drawer';

function Feed() {
  return (
    <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
      <Text>Feed Screen</Text>
    </View>
  );
}

function Article() {
  return (
    <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
      <Text>Article Screen</Text>
    </View>
  );
}

const Drawer = createDrawerNavigator();

function MyDrawer() {
  return (
    <Drawer.Navigator>
      <Drawer.Screen name="Feed" component={Feed} />
      <Drawer.Screen name="Article" component={Article} />
    </Drawer.Navigator>
  );
}

export default function DrawerNavigator() {
  return (
    <NavigationContainer>
      <MyDrawer />
    </NavigationContainer>
  );
}

Yes, I have installed dependency and also tried deleting node-module and reinstalling it — UdayaPrakashJayaraman, Feb 19 '20 at 17:27

score 0 · Answer 1 · edited Dec 14 '20 at 06:25

0

Yup! this is old question but I want to answer for this. However we know that react native packages varies based on version updates. Follow the below steps if your using (version)V5x I am sure it works.

npm install --save react-navigation-drawer (Install Packages)
import { createDrawerNavigator } from 'react-navigation-drawer'; (Import Navigator using 'react-navigation-drawer')

edited Dec 14 '20 at 06:25

Suraj Rao

29,388
11
94
103

answered Dec 14 '20 at 06:16

Ajay Kumar

1
1

score 0 · Answer 2 · edited Jul 07 '23 at 09:27

0

npm install @react-navigation/drawer

To use this drawer navigator, import it from @react-navigation/drawer:

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

edited Jul 07 '23 at 09:27

Vulwsztyn

2,140
1
12
20

answered May 03 '21 at 18:49

Amranur Rahman

1,061
17
29

Sourabh Gera · Answer 3 · 2022-12-15T07:35:36.327

0

Add react-native-reanimated/plugin in babel.config.js file

module.exports = {
  presets: ['module:metro-react-native-babel-preset'],
  Plugin: ['react-native-reanimated/plugin'],
};

edited Dec 15 '22 at 07:35

answered Nov 25 '22 at 06:46

Sourabh Gera

862
7
7

UdayaPrakashJayaraman · Accepted Answer · 2020-08-10T03:39:27.103

I know this is not a right solution but anyway it worked for me...

instead of @react-navigation/drawer we can use

import { createDrawerNavigator,DrawerItems} from 'react-navigation-drawer';

this works and I have pasted my working code below

In ReactNative update they moved createDrawerNavigator and DrawerItems from react-navigation to react-navigation-drawer...

import React from 'react';
import { StyleSheet, Text, View, SafeAreaView, ScrollView,Dimensions,Image } from 'react-native';

import { createAppContainer} from 'react-navigation';
import {createStackNavigator} from 'react-navigation-stack';
import { createDrawerNavigator,DrawerItems} from 'react-navigation-drawer';

import Login from '../screens/Login';
import Home from '../screens/Home';



const CustomDrawComponent=(props) => (
    <SafeAreaView style={{flex:1}}>
        <View style={{paddingTop:45, backgroundColor:'green'}}>
      <View style={{height:150,alignItems:'center', justifyContent:'center'}}>
        <Image source={require('../assets/Logos/userPic.png')} 
                style={{height:120,width:120,borderRadius:60}} />
      </View>
      </View>
      <ScrollView>
        <DrawerItems {...props}/>
      </ScrollView>
      <Text style={{paddingBottom:100, paddingLeft:65}}>Vision Cultura V1.0</Text>
    </SafeAreaView>
  )
const screens = createDrawerNavigator({
    Main: {
            screen: createStackNavigator({
            Home: {screen: Home},
            Login: {screen: Login},
            
        }, {initialRouteName: "Login"})
    },
    Home: Home,
    Login: Login

},
{
    contentComponent:CustomDrawComponent
});

const index = createAppContainer(screens);
export default index;

Downgrading react-navigation is not a solution, just a poor work around. — Bruno, Jul 13 '20 at 15:47
Yes you did sir. In the original question you were trying to use package '@react-navigation/drawer' that is ReactNavigation 5.x (https://reactnavigation.org/docs/drawer-navigator). As you didn't succeed you switched to the old 'react-navigation-drawer' that is ReactNavigation 4.x (https://reactnavigation.org/docs/4.x/drawer-navigator) — Bruno, Jul 16 '20 at 14:40

Unable to resolve @react-navigation/drawer in react native to create drawer navigation

4 Answers4