requireNativeComponent: "RNSScreenStackHeaderConfig" was not found in the UIManager when running android app

Question

When running an application on android i get this error. It builds correctly but crashes with exception. I have installed React-native-screens, @React-native/navigation and the dependencies listed on https://reactnavigation.org/docs/getting-started/

com.facebook.react.common.JavascriptException: Invariant Violation: requireNativeComponent: "RNSScreenStackHeaderConfig" was not found in the UIManager.

This error is located at:
    in RNSScreenStackHeaderConfig
    in Unknown
    in RNSScreen
    in N
    in ForwardRef
    in y
    in E
    in RNSScreenStack
    in w
    in RNCSafeAreaProvider
    in Unknown
    in v
    in Unknown
    in Unknown
    in Unknown
    in ForwardRef
    in Unknown
    in ForwardRef
    in p
    in c
    in P
    in RCTView
    in View
    in RCTView
    in View
    in h, stack:

It builds and runs on iOS fine but when running on android it crashes completely. Is there something I am overlooking here?

This is my Package json.

{
  "name": "<myprojectname>",
  "version": "0.0.1",
  "private": true,
  "scripts": {
    "android": "react-native run-android",
    "ios": "react-native run-ios",
    "start": "react-native start",
    "test": "jest",
    "lint": "eslint .",
    "postinstall": "npx jetify",
    "android:bundle:debug": "react-native bundle --platform android --dev false --entry-file index.js --bundle-output android/app/src/main/assets/index.android.bundle --assets-dest android/app/src/main/res/"
  },
  "dependencies": {
    "@react-native-community/async-storage": "^1.8.1",
    "@react-native-community/masked-view": "^0.1.11",
    "@react-navigation/native": "^6.0.2",
    "@react-navigation/native-stack": "^6.1.0",
    "@react-navigation/stack": "^6.0.7",
    "adbkit": "^2.11.1",
    "moment": "^2.24.0",
    "react": "16.9.0",
    "react-native": "0.63.0",
    "react-native-calendar-strip": "^1.4.1",
    "react-native-calendars": "^1.264.0",
    "react-native-firebase": "^5.6.0",
    "react-native-gesture-handler": "^1.10.3",
    "react-native-reanimated": "^2.2.0",
    "react-native-safe-area-context": "^3.3.1",
    "react-native-screens": "3.1.1",
    "react-native-snap-carousel": "^3.8.4",
    "react-native-vector-icons": "^6.6.0",
    "react-navigation": "^4.4.4",
    "react-navigation-stack": "^2.10.4",
    "react-redux": "^7.2.0",
    "redux": "^4.0.5"
  },
  "devDependencies": {
    "@babel/core": "^7.15.0",
    "babel-jest": "24.9.0",
    "eslint": "^6.5.1",
    "jest": "24.9.0",
    "jetifier": "^1.6.5",
    "metro-react-native-babel-preset": "^0.66.2",
    "react-test-renderer": "16.9.0"
  },
  "jest": {
    "preset": "react-native"
  }
}

I dont really know how to solve this, have tried removing caches, restarting metro, deleting node modules and all "related" errors. This error even happens when I create a fresh project and try installing and using the navigation library.

This is my entrypoint, example copied from React-navigation snack.

import * as React from 'react';
import { View, Text } from 'react-native';
import { NavigationContainer } from '@react-navigation/native';
import { createNativeStackNavigator } from '@react-navigation/native-stack';
import { enableScreens } from 'react-native-screens';

enableScreens(true);
function HomeScreen() {
  return (
    <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
      <Text>Home Screen</Text>
    </View>
  );
}

function DetailsScreen() {
  return (
    <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
      <Text>Details Screen</Text>
    </View>
  );
}

const Stack = createNativeStackNavigator();

function AppTest() {
  return (
    <NavigationContainer>
      <Stack.Navigator 
      screenOptions={{
        headerStyle: {
          backgroundColor: '#f4511e',
        },
        headerTintColor: '#fff',
        headerTitleStyle: {
          fontWeight: 'bold',
        },
      }}
      initialRouteName="Home">
        <Stack.Screen  options={{ title: 'My home' }} name="Home" component={HomeScreen} />
        <Stack.Screen  options={{ title: 'My home' }} name="Details" component={DetailsScreen} />
      </Stack.Navigator>
    </NavigationContainer>
  );
}

export default AppTest;

Any suggestions?

Solution 1

I faced this issue on ios during my work on navigation.

I'm not sure what exactly solved the issue. I reinstalled all the navigation packages and ran npx pod-install, cleaned metro cache, build data, derived data and the error disappeared.

Solution 2

I had the same issue, I just reloaded my emulator via xCode and it worked.

Solution 3

You just need to make sure installing the dependencies after installing stack on windows run this code:

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

Solution 4

i encountered the same issue ater Editing MainActivity.java file which is located in android/app/src/main/java/<your package name>/MainActivity.java while following react-navigation-getting-started-guide

you need to stop the metro-server

and then, run react-native run-android

Solution 5

Mihir Panchal Thanks for the reply but I found a solution myself.

SOLUTION.

I followed the instructions in the documentation. Did not work any differently.

I saw that some projects where imported in these 3 files: settings.gradle, app/build.gradle and mainactivity.java ex.

Settings.gradle:

include ':react-native-firebase'
project(':react-native-firebase').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-firebase/android')
include ':react-native-gesture-handler'
project(':react-native-gesture-handler').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-gesture-handler/android')
include ':react-native-vector-icons'
project(':react-native-vector-icons').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-vector-icons/android')
include ':react-native-screens'
project(':react-native-screens').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-screens/android')
include ':react-native-reanimated'
project(':react-native-reanimated').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-reanimated/android')

include ':react-native-gesture-handler'
project(':react-native-gesture-handler').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-gesture-handler/android')
include (':react-native-safe-area-context')
project(':react-native-safe-area-context').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-safe-area-context/android')
include ':app'

...

app/build.gradle

  implementation project(':react-native-screens')
    implementation project(':react-native-reanimated')
    implementation project(':react-native-gesture-handler')
    implementation project(':react-native-safe-area-context')

and finally in my mainApplication.java

  @Override
    protected List<ReactPackage> getPackages() {
      return Arrays.<ReactPackage>asList(
          new MainReactPackage(),
            new AsyncStoragePackage(),
            new RNFirebasePackage(),
            new RNFirebaseFirestorePackage(),
            new RNFirebaseLinksPackage(),
            new RNFirebaseAuthPackage(),
            new ReanimatedPackage(),
            new RNGestureHandlerPackage(),
            new RNScreensPackage(),
            new SafeAreaContextPackage()
      );
    }

To get the librarys to work and everything to be setup it had to be linked here. Don't know if this helps anyone but I was stuck for some time and doing this made the application work as expected. Might be easy to miss if you are not experienced(I am not very experienced with RN)

View more solutions

Comments

[user983924]

Did you found the solution? I get the same error and i tried all answers but didnt work.

[Romo]

Note, said colleague mentioned: "Anytime you see “not found in UIManager” run the project from xcode".

[Admin]

Your answer could be improved with additional supporting information. Please edit to add further details, such as citations or documentation, so that others can confirm that your answer is correct. You can find more information on how to write good answers in the help center.

[Haren Sarma]

This actually worked for me

[Asim Imam]

this is not a solution, what to do with this information?

[myNameCoad]

This works for me too.

[Admin]

Your answer could be improved with additional supporting information. Please edit to add further details, such as citations or documentation, so that others can confirm that your answer is correct. You can find more information on how to write good answers in the help center.

[Somendra Meena]

Thanks @Philips. I'm using a Windows machine and this solution worked for me.

[Brian Patterson]

This does not really answer the question. If you have a different question, you can ask it by clicking Ask Question. To get notified when this question gets new answers, you can follow this question. Once you have enough reputation, you can also add a bounty to draw more attention to this question. - From Review