Unable to resolve module 'react-navigation'

Question

Here is the error I get:

package.json

{
  "name": "LoginApp2",
  "version": "0.0.1",
  "private": true,
  "scripts": {
    "start": "node node_modules/react-native/local-cli/cli.js start",
    "test": "jest"
  },
  "dependencies": {
    "react": "16.0.0-alpha.12",
    "react-native": "0.48.3"
  },
  "devDependencies": {
    "babel-jest": "21.2.0",
    "babel-preset-react-native": "4.0.0",
    "jest": "21.2.1",
    "react-test-renderer": "16.0.0-alpha.12"
  },
  "jest": {
    "preset": "react-native"
  }
}

index.js

  import React, { Component } from 'react';
import { AppRegistry,View,Text,StyleSheet } from 'react-native';

import UsersManager from './pages/app';
AppRegistry.registerComponent('LoginApp2', () => UsersManager);

pages/app.js

import React, { Component } from 'react';
import { AppRegistry,View,Text,StyleSheet,ScrollView,TouchableOpacity } from 'react-native';
import { StackNavigator } from 'react-navigation';

import HomeScreen from './home';
import Login from './login';
import Register from './register';
import Profile from './profile';

const UsersManager = StackNavigator({
Home: { screen: HomeScreen },
Login: { screen: Login },
Register: {screen: Register},
Profile: {screen: Profile}

});
export default UsersManager;

Can someone please help me solve this issue?

Make sure that you have installed 'react-navigation' on your project. — semira
– semira, Commented Apr 21, 2018 at 4:34

Ronan Boiteau · Accepted Answer · 2018-05-14 23:59:14Z

34

This error means that either you haven't installed the react-navigation module or that you have installed the module but didn't re-built your project using react-native run-android or react-native run-ios.

Following these steps should solve your issue:

Install react-navigation module.
Re-build your project.
Restart the packager by stopping the current packager and then starting the packager again with react-native start.

edited May 14, 2018 at 23:59

Ronan Boiteau

10.3k7 gold badges39 silver badges62 bronze badges

answered Dec 10, 2017 at 9:52

Akshay Rao

3,5441 gold badge17 silver badges19 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Ahmad M Ibrahim Over a year ago

The error still occure . Nothing changed.i installed react navigation module globally and not inside the project.Rebuild the project by react-native run-android ? i did it also

Akshay Rao Over a year ago

You need to install the react-navigation in your project instead of globally installing it. Run npm install react-navigation --save inside your project folder.

Ahmad M Ibrahim Over a year ago

Sorry but nothing changed same error.Even i created new project and installed react-navigation module

Akshay Rao Over a year ago

This error only comes if the packager doesn't get the desired module in the node modules. Just follow the steps in sequence i.e. Install react navigation in your project , then build your project using react-native run-android and restart your packager by stopping the current packager and starting again using react-native start and reload your application by pressing the reload button or by pressing double r.

Satan Pandeya · Accepted Answer · 2020-05-29 02:16:14Z

16

We need to install the following dependencies:

npm i react-navigation @react-native-community/masked-view react-native-gesture-handler react-native-reanimated react-native-safe-area-context react-native-screens

In code import the following:

import {createAppContainer} from 'react-navigation'; 
import {createStackNavigator} from 'react-navigation-stack';

edited May 29, 2020 at 2:16

Satan Pandeya

3,8155 gold badges30 silver badges53 bronze badges

answered Jan 23, 2020 at 10:10

Snehal

5537 silver badges11 bronze badges

Comments

Shobhakar Tiwari · Accepted Answer · 2020-06-25 07:40:51Z

9

Date : 25-June-2020 Working :

Follow this steps:

Install React Navigation npm install react-navigation
Install Dependencies expo install react-native-gesture-handler react-native-reanimated react-native-screens react-native-safe-area-context @react-native-community/masked-view
Install React Navigation Stack npm install react-navigation-stack @react-native-community/masked-view
Start the app and clear cache with npm start -c

answered Jun 25, 2020 at 7:40

Shobhakar Tiwari

7,8824 gold badges38 silver badges74 bronze badges

Comments

Varun Naharia · Accepted Answer · 2020-02-12 07:09:12Z

4

You have to just install the missing module ex.

npm install react-navigation

Then restart with

npm start

answered Feb 12, 2020 at 7:09

Varun Naharia

5,39810 gold badges53 silver badges91 bronze badges

Comments

Siddhartha Mukherjee · Accepted Answer · 2022-10-11 16:30:02Z

4

You can use this way

npm install @react-navigation/native @react-navigation/native-stack
expo install react-native-screens react-native-safe-area-context // Expo
npm install react-native-screens react-native-safe-area-context // react native

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

const Stack = createNativeStackNavigator();

<NavigationContainer>
    <Stack.Navigator initialRouteName={ routeName } screenOptions = {{ headerShown: false }}>
        <Stack.Screen name="Home" component = { componentName } />
        <Stack.Screen name="Onboarding" component = { componentName } />
    </Stack.Navigator>
</NavigationContainer>

you can flow this document

edited Oct 11, 2022 at 16:30

answered Aug 21, 2022 at 19:39

Siddhartha Mukherjee

2,9712 gold badges27 silver badges30 bronze badges

Comments

user3368933 · Accepted Answer · 2019-06-09 08:36:11Z

3

I just started to learn react. And got this problem, tried everything from the internet - nothing worked. Using Yarn instead of npm helped!

answered Jun 9, 2019 at 8:36

user3368933

412 bronze badges

1 Comment

Rajender Kumar Over a year ago

yarn add @react-navigation/native worked for me as well

Craig Gazimbi · Accepted Answer · 2021-10-24 19:41:43Z

3

run "npm add @react-navigation/native" :that saved me hours

answered Oct 24, 2021 at 19:41

Craig Gazimbi

435 bronze badges

1 Comment

Community Over a year ago

Your answer could be improved with additional supporting information. Please edit to add further details, such as citations or documentation, so that others can confirm that your answer is correct. You can find more information on how to write good answers in the help center.

Julian · Accepted Answer · 2020-09-30 19:54:32Z

1

install has been replaced with add to add new dependencies. Run yarn add react-navigation instead.

edited Sep 30, 2020 at 19:54

Julian

37.3k24 gold badges138 silver badges196 bronze badges

answered Sep 30, 2020 at 15:36

Itai Gary

112 bronze badges

Comments

Abolfazl Roshanzamir · Accepted Answer · 2021-08-04 14:40:53Z

1

This error happened after updating to the new version, to fix it, just run the following command

npx react-native start --reset-cache

answered Aug 4, 2021 at 14:40

Abolfazl Roshanzamir

15.1k9 gold badges76 silver badges83 bronze badges

Comments

Tyler2P · Accepted Answer · 2023-02-18 21:03:32Z

1

Stop the server and run:

npm start

This will resolve the issue.

edited Feb 18, 2023 at 21:03

Tyler2P

2,37030 gold badges26 silver badges34 bronze badges

answered Feb 18, 2023 at 14:16

Bilal Mohmand

515 bronze badges

Comments

Tuturado · Accepted Answer · 2021-11-18 00:24:29Z

0

I resolve this error reading the react navigation documentation, execute yarn add @react-navigation/native-stack. Then the react navigation will be work

answered Nov 18, 2021 at 0:24

Tuturado

1

Comments

3ameration · Accepted Answer · 2022-03-19 14:11:54Z

0

Install React Navigation

npm install react-navigation --legacy-peer-deps

or

yarn add react-navigation

Install Dependencies

expo install react-native-gesture-handler react-native-reanimated react-native-screens react-native-safe-area-context @react-native-community/masked-view

Install React Navigation Stack

npm install react-navigation-stack @react-native-community/masked-view --legacy-peer-deps

or

yarn add react-navigation-stack @react-native-community/masked-view

Start the app and clear cache with expo r -c

edited Mar 19, 2022 at 14:11

answered Mar 19, 2022 at 14:01

3ameration

2394 silver badges4 bronze badges

Comments

Boris Biswas · Accepted Answer · 2022-03-19 22:33:53Z

0

You need to install stack-navigator in your project.

npm install @react-navigation/stack and
npm install react-native-gesture-handler

2nd is also required, as per reactnavigation.org

You can also follow this link for detailed steps: https://reactnavigation.org/docs/stack-navigator/

Refer this image as well

answered Mar 19, 2022 at 22:33

Boris Biswas

675 bronze badges

Comments

lakshan sampath · Accepted Answer · 2022-07-20 07:22:40Z

0

If you're using Expo, run:

expo start -c If you're not using Expo, run:

npx react-native start --reset-cache If that doesn't work, you can also try the following:

rm -rf $TMPDIR/metro-bundler-cache-*

More information enter link description here

answered Jul 20, 2022 at 7:22

lakshan sampath

3611 gold badge3 silver badges7 bronze badges

Collectives™ on Stack Overflow

Unable to resolve module 'react-navigation'

14 Answers 14

4 Comments

Comments

Comments

Comments

Comments

1 Comment

1 Comment

Comments

Comments

Comments

Comments

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

14 Answers 14

4 Comments

Comments

Comments

Comments

Comments

1 Comment

1 Comment

Comments

Comments

Comments

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related