CODEWITHSUNDEEP
react-nativereact-navigation
Amir Hossein
Amir Hossein

Reputation: 1144

Unable to resolve module @react-navigation/stack

I create a blank project whit expo init then I installed react-navigation whit npm install @react-navigation/native and expo install react-native-gesture-handler react-native-reanimated react-native-screens react-native-safe-area-context @react-native-community/masked-view but when I run the app whit expo start I get this error: Unable to resolve module @react-navigation/stack from C:\Android\test\App.js: @react-navigation/stack could not be found within the project.

Error screenshot: enter image description here

App.js file:

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

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

const Stack = createStackNavigator();

function App() {
  return (
    <NavigationContainer>
      <Stack.Navigator>
        <Stack.Screen name="Home" component={HomeScreen} />
      </Stack.Navigator>
    </NavigationContainer>
  );
}

export default App;

The link I used to install the react-navigation

The link I used to create App.js here

package.json file:

{
  "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/native": "^5.9.4",
    "expo": "~41.0.0",
    "expo-status-bar": "~1.0.4",
    "react": "16.13.1",
    "react-dom": "16.13.1",
    "react-native": "https://github.com/expo/react-native/archive/sdk-41.0.0.tar.gz",
    "react-native-web": "~0.13.12",
    "react-native-gesture-handler": "~1.10.2",
    "react-native-reanimated": "~2.1.0",
    "react-native-screens": "~3.0.0",
    "react-native-safe-area-context": "3.2.0",
    "@react-native-community/masked-view": "0.1.10"
  },
  "devDependencies": {
    "@babel/core": "^7.9.0"
  },
  "private": true
}

Node version: v14.16.1

Npm version: 6.14.12

Upvotes: 3

Views: 13065

Answers (5)

HerAki69
HerAki69

Reputation: 11

Running

npm install @react-navigation/native-stack

Helped for me, and updating the expo sdk to latest version

Upvotes: 1

karteur
karteur

Reputation: 21

You need to go to the import line and change

import { createStackNavigator } from '@react-navigation/stack';

to

import { createStackNavigator } from '@react-navigation/native-stack';

Upvotes: 2

Williams Lopes
Williams Lopes

Reputation: 21

I know it's been a while and you've probably already found the solution, but if anyone else has the same question, here's the solution:

you need to change from

@react-navigation/stack

to @react-navigation/native-stack

Install again using npm

npm install @react-navigation/native-stack

Then import as follows:

import { createNativeStackNavigator } from '@react-navigation/native-stack'

Upvotes: 2

Subha
Subha

Reputation: 580

I don't see react-navigation/stack as a dependency in package.json.

If you see the first step of the doc it says "we need to install @react-navigation/stack".

Upvotes: 1

Nikhil bhatia
Nikhil bhatia

Reputation: 1397

do what the error say,

in terminal npm install @react-navigation/stack or yarn add @react-navigation/stack

Upvotes: 5

Related Questions