react-navigation/native error: viewmanagerresolver returned null for either RNSScreenContentWrapper or RCTRNSScreenContentWrapper

Question

In a fresh created react native project, bootstrapped using @react-native-community/cli, I installed @react-navigation/native-stack guided by youtube video. I ended up with code:

import {NavigationContainer} from "@react-navigation/native"
import {createNativeStackNavigator} from "@react-navigation/native-stack";
import WelcomeReactNative from "./screens/WelcomeReactNative.tsx";

const Stack = createNativeStackNavigator()

function App(): React.JSX.Element {

    return (
        // <WelcomeReactNative/>
        <NavigationContainer>
            <Stack.Navigator initialRouteName='WelcomeReactNative'>
                <Stack.Screen name='WelcomeReactNative' component={WelcomeReactNative}/>
            </Stack.Navigator>
        </NavigationContainer>
    );
}

export default App;

It didn't work. Error pop up in emulator from with I can't copy text .

without navigation prj runs fine

return (
        <WelcomeReactNative/>
        // <NavigationContainer>
        //     <Stack.Navigator initialRouteName='WelcomeReactNative'>
        //         <Stack.Screen name='WelcomeReactNative' component={WelcomeReactNative}/>
        //     </Stack.Navigator>
        // </NavigationContainer>
    );

I want to add navigation functionality, but I am not sure how to move forward. After error message showing, I have to press"a - run on Android" in Metro console, in order to be able to run the app again. Creating new prj from start does not help.

my package.json

{
  "name": "RN_LSA",
  "version": "0.0.1",
  "private": true,
  "scripts": {
    "android": "react-native run-android",
    "ios": "react-native run-ios",
    "lint": "eslint .",
    "start": "react-native start",
    "test": "jest"
  },
  "dependencies": {
    "@react-navigation/native": "^7.0.14",
    "@react-navigation/native-stack": "^7.2.0",
    "react": "18.3.1",
    "react-native": "0.76.5"
  },
  "devDependencies": {
    "@babel/core": "^7.25.2",
    "@babel/preset-env": "^7.25.3",
    "@babel/runtime": "^7.25.0",
    "@react-native-community/cli": "15.0.1",
    "@react-native-community/cli-platform-android": "15.0.1",
    "@react-native-community/cli-platform-ios": "15.0.1",
    "@react-native/babel-preset": "0.76.5",
    "@react-native/eslint-config": "0.76.5",
    "@react-native/metro-config": "0.76.5",
    "@react-native/typescript-config": "0.76.5",
    "@types/react": "^18.2.6",
    "@types/react-test-renderer": "^18.0.0",
    "babel-jest": "^29.6.3",
    "eslint": "^8.19.0",
    "jest": "^29.6.3",
    "prettier": "2.8.8",
    "react-test-renderer": "18.3.1",
    "typescript": "5.0.4"
  },
  "engines": {
    "node": ">=18"
  }
}

GitHub

Answer 1

npm install react-native-reanimated react-native-screens react-native-safe-area-context

this will update safe area contex and screens to latest version but your dependencies is going to increase way to more you know

so you have to have total these much dependencies to workout with stack navigation

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

You will need to build the project again, for the change to apply