CODEWITHSUNDEEP
reactjsreact-nativereact-native-navigation
Gourav Sanyal
Gourav Sanyal

Reputation: 166

Yarn error with React native Navigation: "Module not found: Can't resolve 'react-navigation'"

While trying to make a navigation system in a react native app with expo, installed react-navigation with yarn and I can't resolve this error

Module not found: Can't resolve 'react-navigation'

These are the dependencies in package.json

  "dependencies": {
    "@react-native-community/masked-view": "^0.1.11",
    "@react-navigation/native": "^6.0.6",
    "@react-navigation/native-stack": "^6.2.5",
    "expo": "~43.0.2",
    "expo-status-bar": "~1.1.0",
    "react": "17.0.1",
    "react-dom": "17.0.1",
    "react-native": "0.64.3",
    "react-native-gesture-handler": "^2.0.0",
    "react-native-reanimated": "^2.2.4",
    "react-native-safe-area-context": "^3.3.2",
    "react-native-screens": "^3.10.0",
    "react-native-web": "0.17.1",
    "react-navigation-stack": "^2.10.4"
  },

This is where I'm using the react native navigation

import React from 'react'
import { View, Text } from 'react-native'
import { NavigationContainer } from 'react-navigation'
import { createNativeStackNavigator } from '@react-navigation/native-stack'
import SignUpScreen from '../screens/Sign Up Screen/SignUpScreen';
import SignInScreen from '../screens/SignIn Screen/SignInScreen';
import ConfirmEmailScreen from '../screens/ConfirmEmailScreen';
import ForgotPasswordScreen from '../screens/ForgotPAsswordScreen';
import NewPasswordScreen from '../screens/NewPasswordScreen';


const Stack = createNativeStackNavigator()

const Navigation = () => {
    return (
        <NavigationContainer>
            <Stack.Navigator>
                <Stack.Screen name="SignIn" component={SignInScreen}/>
            </Stack.Navigator>
        </ NavigationContainer>
    )
}

export default Navigation

This is the error in the browser

./src/Navigation/index.js:3
Module not found: Can't resolve 'react-navigation'
  1 | import React from 'react'
  2 | import { View, Text } from 'react-native'
> 3 | import { NavigationContainer } from 'react-navigation'
  4 | import { createNativeStackNavigator } from '@react-navigation/native-stack'
  5 | import SignUpScreen from '../screens/Sign Up Screen/SignUpScreen';
  6 | import SignInScreen from '../screens/SignIn Screen/SignInScreen';

Upvotes: 0

Views: 765

Answers (2)

Akshay Shenoy
Akshay Shenoy

Reputation: 1248

As mentioned in comments, NavigationContainer is a part of @react-navigation/native. This should solve the problem.

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

Upvotes: 0

Altommy
Altommy

Reputation: 26

From the doc Example React Navigation DOC

You are use 6.* version to add NavigationContainer, use that.

import { NavigationContainer } from "@react-navigation/native";

Upvotes: 1

Related Questions