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

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:^[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:^[2]

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

Solution 3:^[3]

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 4:^[4]

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 5:^[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)

Solution 6:^[6]

Kill Metro and clean gradle build (it might take a minute or two):

cd android
.\gradlew clean

Start Metro and clear cache:

npm start --reset-cache

Recompile

npm run android

Also, make sure in MainActivity.java you have added import android.os.Bundle; BELOW package com.your_package_name. Description on https://reactnavigation.org/docs/getting-started/ for some people might suggest to put it on very top of this file, but this is wrong thinking. This is how it should look like:

package com.your_package_name;
import android.os.Bundle;

Solution 7:^[7]

Solution have in documentation of reactnavigation doc

After install @react-navigation/native you have to install two dependency npm install react-native-screens react-native-safe-area-context it's mention library.

NB: react-native-screens package requires one additional configuration step to properly work on Android devices. Edit MainActivity.java file which is located in

android/app/src/main/java/<your package name>/MainActivity.java.

Add the following code to the body of MainActivity class:

@Override
protected void onCreate(Bundle savedInstanceState) {
  super.onCreate(null);
}

and make sure to add an import statement at the top of this file:

import android.os.Bundle;

Solution 8:^[8]

If someone ends up here with this issue while using nrwl/nx mono-repo for cross-platform build (mobile and web), you need to add the react-native-screens and react-native-safe-area-context dependency in the mobile application package.json besides the workspace package.json.

Solution 9:^[9]

Did you make the changes given in the documentation? As per this https://reactnavigation.org/docs/getting-started/ you need to make changes in MainActivity.java which is located in android/app/src/main/java/<your package name>/MainActivity.java

Add this at the very start of the file import android.os.Bundle;

and then add @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(null); }

Once again go through the documentation

Solution 10:^[10]

Add in "settings.gradle"

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'

add in "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')

Just Making above only 2 changes  your project will work fine. 
Thanks....

Solution 11:^[11]

I encountered this problem after setting up navigation for ios. Here is the solution I found:

In the terminal, run npx pod-install ios because as explained in the docs, "If you're on a Mac and developing for iOS, you need to install the pods (via Cocoapods) to complete the linking."
Quit my simulator
Terminated and re-ran npx react-native start
Terminated and re-ran npx react-native run-ios

After completing these steps the app ran successfully again.

Solution 12:^[12]

Caveat: I realize this post is for android, but I'm wondering if it is an issue with installing the cocoa pods after talking to a colleague about this issue.

Hope you all are well! I too, was having this and wanted to add what worked for me. I'm working on a RN project with my first gig outta bootcamp, so I'm also pretty new to these builds. However, it's my understanding that anytime you run pod install you need to run the project from xcode in order to link the pods with node_modules.

To do this you'll want to:

Run xcode
Go to your project folder in question
Go to ios folder
Open <project_name>.xcworkspace
Click the play button on the top left to build the project (If you have a simulator selected, it should open the app once built)

After finishing these steps, I no longer had that error message.

Solution 13:^[13]

Changing settings.gradle and app/build.gradle was not enough. The following changes to MainApplication.java are needed:

    List<ReactPackage> packages = new PackageList(this).getPackages();
    // Packages that cannot be autolinked yet can be added manually here, for example:
    // packages.add(new MyReactNativePackage());
    packages.add(new com.swmansion.reanimated.ReanimatedPackage());
    packages.add(new com.swmansion.gesturehandler.react.RNGestureHandlerPackage());
    packages.add(new com.swmansion.rnscreens.RNScreensPackage());
    packages.add(new com.th3rdwave.safeareacontext.SafeAreaContextPackage());

Solution 14:^[14]

I just fix the issue, and this issue is an manual linking issue actually.

Following previous answers is not enough.

Here is my complete changes.

// settings.gradle

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

//app/build.gradle

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

}

And one more step.

//MainApplication.java

@override
protected List<ReactPackage> getPackages(){

    ...
    packages.add(new com.swmansion.rnscreens.RNScreensPackage());
    //My Metro told me that RNGestureHandlerPackage is created twice, hence I comment the line, and then everything works.
    // packages.add(new com.swmansion.gesturehandler.RNGestureHandlerPackage());
    packages.add(new com.th3rdwave.safeareacontext.SafeAreaContextPackage());
    packages.add(new com.swmansion.reanimated.ReanimatedPackage());

ref: https://github.com/software-mansion/react-native-gesture-handler/issues/684

Solution 15:^[15]

I face same Issue, so you just have to close project from emulator. and re-run .Error gone

Solution 16:^[16]

Install react-native screens and that should resolve the issue.

yarn add react-native-screens

Solution 17:^[17]

steps:

stop you metro connection
restart you app

Then it will work.

Solution 18:^[18]

yarn add react-native-screens

npm i react-native-screens

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution	Source
Solution 1
Solution 2	Yossi Arfi
Solution 3	Siddhesh Dabholkar
Solution 4	Philips Tel
Solution 5
Solution 6	Dawidowski
Solution 7	MD Ashik
Solution 8	Nitesh Agarwal
Solution 9	Mihir Panchal
Solution 10	sherkhan
Solution 11	Green
Solution 12	Dharman
Solution 13	paneer_tikka
Solution 14	SHZhao74
Solution 15	Azeem Sarwar
Solution 16	Abu Ehteshamuddin
Solution 17	Ankit Sharma
Solution 18	Dharman

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

Solution 1:[1]

Solution 2:[2]

Solution 3:[3]

Solution 4:[4]

Solution 5:[5]

Solution 6:[6]

Solution 7:[7]

Solution 8:[8]

Solution 9:[9]

Solution 10:[10]

Solution 11:[11]

Solution 12:[12]

Solution 13:[13]

Solution 14:[14]

Solution 15:[15]

Solution 16:[16]

Solution 17:[17]

Solution 18:[18]