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

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

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

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;

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

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

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

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

The error.

error: bundling failed: Error: Unable to resolve module `@react-navigation/native` from `C:\Projects\project\node_modules\react-navigation-tabs\src\views\BottomTabBar.js`: Module `@react-navigation/native` does not exist in the Haste module map

This might be related to https://github.com/facebook/react-native/issues/4968
To resolve try the following:
  1. Clear watchman watches: `watchman watch-del-all`.
  2. Delete the `node_modules` folder: `rm -rf node_modules && npm install`.
  3. Reset Metro Bundler cache: `rm -rf /tmp/metro-bundler-cache-*` or `npm start -- --reset-cache`.
  4. Remove haste cache: `rm -rf /tmp/haste-map-react-native-packager-*`.
    at ModuleResolver.resolveDependency (C:\Projects\project\node_modules\metro\src\node-haste\DependencyGraph\ModuleResolution.js:139:15)
    at ResolutionRequest.resolveDependency (C:\Projects\project\node_modules\metro\src\node-haste\DependencyGraph\ResolutionRequest.js:49:18)
    at DependencyGraph.resolveDependency (C:\Projects\project\node_modules\metro\src\node-haste\DependencyGraph.js:219:16)
    at Object.resolve (C:\Projects\project\node_modules\metro\src\lib\transformHelpers.js:141:30)
    at dependencies.map.result (C:\Projects\project\node_modules\metro\src\DeltaBundler\traverseDependencies.js:373:31)
    at Array.map (<anonymous>)
    at resolveDependencies (C:\Projects\project\node_modules\metro\src\DeltaBundler\traverseDependencies.js:369:18)
    at C:\Projects\project\node_modules\metro\src\DeltaBundler\traverseDependencies.js:188:33
    at Generator.next (<anonymous>)
    at step (C:\Projects\project\node_modules\metro\src\DeltaBundler\traverseDependencies.js:298:30)

I had the same problem. I tried 'watch man watch-del-all...' and '..reset cache' but no changed And make sure u installed @react-navigation/native

yarn add @react-navigation/native

I had the same problem. I tried 'watch man watch-del-all...' and '..reset cache' but no changed And make sure u installed @react-navigation/native

yarn add @react-navigation/native