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

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.

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

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

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

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.

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

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)

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

1. 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."
2. Quit my simulator
3. Terminated and re-ran npx react-native start
4. Terminated and re-ran npx react-native run-ios

After completing these steps the app ran successfully again.

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

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.... 

I had same error. Try this.

if you using ios

1. cd ios in your root folder
2. pod install
3. cd ..
4. yarn or npm ios. Again build.

if you using android

• in mainactivity.java file

• copy

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

  import android.os.Bundle;

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.

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());

steps:

1. stop you metro connection
2. restart you app

Then it will work.

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

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

If you are using @react-navigation/native-stack, you should install react-native-screens and react-native-safe-area-context too. I believe your error is because you don't have installed react-native-screens

This error is because the updated dependencies for react-navigator haven't been bundled into the app. On Android, re-install the app by running

react-native run-android

and this error vanishes.

I got the same error finally I made a success by following the solution.

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

install both modules in root folder or If you use microapp architecture install this inside your example folder too. Happy Coding!

Try to use all clearance commands and restart metro, it will be fine

npm install react-native-screens

npm install react-native-safe-area-context

Installing the above packages through should solve your problem. Try installing using --force flag. I hope this will solve your problem.

Follow these 4 steps. I resolved the same issue.

cd android 
.\gradlew clean 
npm start --reset-cache 
npm run android

If this issue persists even after installing npm install react-native-screens react-native-safe-area-context : try

cd ios >> pod install and try react-native run-ios again

use the following command : npm install react-native-screens react-native-safe-area-context

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

yarn add react-native-screens

yarn add react-native-screens

or

npm i react-native-screens