0

I am trying to make an app using react native. However, the issue is that the modules for the drawer and native aren't being resolved, or "Module not found: Can't resolve '@reactnavigation/drawer'" and "Module not found: Can't resolve '@reactnavigation/native'".

I have done ever step I can think of. I have node.js, installedexpo-cli, ran the expo init, cd to the project name, and installed npm install @react-navigation/stack", "npm install @react-navigation/native", "npm install @react-navigation/drawer", "expo install react-native-gesture-handler react-native-reanimated," and even added "npm install react-native-reanimated@~2.2.0" at the recommendation of someone else.

But even though I think I am following every step, it's still not working.The only other problem I can think of is the node version. But when I uninstall it using "remove program" and reinstall it, at the recommended version, it stays at the earlier downloaded version. But I'm not even sure that is the issue. What should I do?

import * as React from 'react';
import { View, Text } from 'react-native';
import { NavigationContainer } from '@reactnavigation/native';
import { createDrawerNavigator } from '@reactnavigation/drawer';
function Home() {
return (
<View style={{ flex: 1, justifyContent: 'center',
    alignItems: 'center' }}>
<Text>Home</Text></View>);}
    function AboutUs() {
    return (
       <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
       <Text>About Us</Text>
       </View>
    );}

const Drawer = createDrawerNavigator(); function MyDrawer() { return ( <Drawer.Navigator useLegacyImplementation> <Drawer.Screen name="Home" component={Home} /> <Drawer.Screen name="Abou us" component={AboutUs} /> </Drawer.Navigator> );} export default function App() { return ( );}

    {
  "name": "drawernav",
  "version": "1.0.0",
  "main": "node_modules/expo/AppEntry.js",
  "scripts": {
    "start": "expo start",
    "android": "expo start --android",
    "ios": "expo start --ios",
    "web": "expo start --web",
    "eject": "expo eject"
  },
  "dependencies": {
    "@react-navigation/drawer": "^6.4.1",
    "@react-navigation/native": "^6.0.10",
    "@react-navigation/stack": "^6.2.1",
    "expo": "~44.0.0",
    "expo-status-bar": "~1.2.0",
    "react": "17.0.1",
    "react-dom": "17.0.1",
    "react-native": "0.64.3",
    "react-native-gesture-handler": "~2.1.0",
    "react-native-reanimated": "~2.3.1",
    "react-native-web": "0.17.1",
    "react-navigation-stack": "^2.10.4"
  },
  "devDependencies": {
    "@babel/core": "^7.12.9"
  },
  "private": true
}

1 Answer 1

1

your imports are wrong, they should be

import {NavigationContainer} from '@react-navigation/native';
import {createDrawerNavigator} from '@react-navigation/drawer';
Sign up to request clarification or add additional context in comments.

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.