'Unable to resolve module 'react-navigation'

Here is the error I get:

Error

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?



Solution 1:[1]

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:

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

Solution 2:[2]

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';

Solution 3:[3]

Date : 25-June-2020 Working :

Follow this steps:

  1. Install React Navigation npm install react-navigation

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

  3. Install React Navigation Stack npm install react-navigation-stack @react-native-community/masked-view

  4. Start the app and clear cache with npm start -c

Solution 4:[4]

You have to just install the missing module ex.

npm install react-navigation

Then restart with

npm start

Solution 5:[5]

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

Solution 6:[6]

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

npx react-native start --reset-cache

Solution 7:[7]

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

Solution 8:[8]

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

Solution 9:[9]

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

Solution 10:[10]

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

Solution 11:[11]

You need to install stack-navigator in your project.

  1. npm install @react-navigation/stack and
  2. 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