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
}

CodePudding user response：

your imports are wrong, they should be

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