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

Maguatte Lo · Accepted Answer · 2025-04-06 19:10:16Z

12

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

edited Apr 6 at 19:10

Maguatte Lo

32 bronze badges

answered Dec 24, 2024 at 17:54

Rudresh Singh

1214 bronze badges

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

2 Comments

AntiRakPro Dec 24, 2024 at 21:22

yep, it worked. Is it popular to wait 20 min for compiling, among react native developers, or it is my poor library choice ? Expo not a variant for me, by the way.

Deepak Sharma Jan 18 at 20:16

initially, I look at package-lock.json file, and node_modules and found these packages where there, so I was debugging further, and these packages entry MUST be there in package.json file, then only it will work. Thanks @Rudresh Singh

Collectives™ on Stack Overflow

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

1 Answer 1

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related