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?

Did you found the solution? I get the same error and i tried all answers but didnt work. — user983924, Mar 05 '22 at 19:48
You need to re-execute this command : `npx react-native run-android` to resolve and configure react-navigation modules. — Menai Ala Eddine - Aladdin, Jan 06 '23 at 14:27

score 41 · Answer 1 · answered Mar 20 '22 at 12:41

41

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.

answered Mar 20 '22 at 12:41

Nitesh Agarwal

659
1
9
14

This is the final NX repo solution. I tried every other solution and none of them worked. – yathavan Mar 01 '23 at 21:34
2

This worked, IN ADDTION to running `pod install` (after the commands above) and within the iOS dir (for iOS only obviouisly), deleting the app from the device, and then rebuilding – enjoi4life411 Jun 30 '23 at 21:40
Worked for me. Thanks man – kazmi066 Jul 12 '23 at 09:44

Aliaksei · Answer 2 · 2021-09-27T14:34:56.613

30

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.

edited Sep 27 '21 at 14:34

answered Sep 16 '21 at 09:27

Aliaksei

1,094
11
20

2

This is so useful to me for ios issue. Also, I did 'cd ios' and 'bundle install', 'npx pod-install' Thanks. – cocoa Aug 23 '22 at 18:13
1

Thanks a ton Aliaksei - you've solved another of the many dependency issues not handled well (at all)... – Joe149 Nov 01 '22 at 00:37
This resolves the issue – DecPK Jun 03 '23 at 18:36

score 13 · Answer 3 · edited Jan 10 '23 at 21:06

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;

score 13 · Answer 4 · answered Feb 22 '22 at 10:18

13

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

answered Feb 22 '22 at 10:18

Plipus Tel

666
3
13
23

score 11 · Answer 5 · answered Oct 03 '21 at 06:17

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

score 9 · Answer 6 · answered Feb 01 '22 at 23:06

9

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;

answered Feb 01 '22 at 23:06

Dawidowski

101
1
3

on win10 npx react-native start --reset-cache was enough – Vit Dec 13 '22 at 16:50
Recompiling (`npm run android`) did the trick for me – gignu Dec 23 '22 at 21:29
Note it should be ./gradlew clean. Not .\gradlew clean if I am not mistaken – Liam Clark Gutiérrez Jan 18 '23 at 23:45
This killed my app, no idea how to fix now. – Skinsky Gnudy Jul 29 '23 at 05:31

score 6 · Answer 7 · answered Nov 16 '21 at 09:42

6

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

answered Nov 16 '21 at 09:42

Yossi Arfi

71
1
1

score 6 · Answer 8 · answered May 01 '22 at 17:37

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.

Thanks. Out of all the answers, this helped me fix the error. — realsajeel289, May 09 '23 at 08:02

Anders Saxrud · Answer 9 · 2021-09-06T10:53:22.563

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 started facing this issue after upgrading my MacOS to 13.1 (Ventura). This solution worked for me. — Abdullah Sheikh, Jan 19 '23 at 07:03

score 4 · Answer 10 · edited Jan 10 '23 at 21:07

4

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

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

edited Jan 10 '23 at 21:07

blackgreen

34,072
23
111
129

answered Sep 22 '22 at 17:32

pavan bangalala

111
1
2

score 3 · Answer 11 · answered Sep 04 '21 at 13:02

3

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

answered Sep 04 '21 at 13:02

Mihir Panchal

125
6

That did it, yes... but FFS, the couldn't come up with a more meaningful error message? – Robbie Matthews Dec 20 '22 at 05:19

score 1 · Answer 12 · answered Sep 27 '21 at 08:34

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

score 1 · Answer 13 · answered Apr 08 '22 at 06:49

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

score 1 · Answer 14 · answered Jun 15 '22 at 06:21

1

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

answered Jun 15 '22 at 06:21

WAHYU NANDA NOVAN

286
3
7

score 1 · Answer 15 · answered Jun 27 '22 at 19:18

I had same error. Try this.

if you using ios

cd ios in your root folder
pod install
cd ..
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;

score 1 · Answer 16 · answered Jul 16 '22 at 17:50

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!

score 1 · Answer 17 · edited Sep 09 '22 at 08:07

1

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.

edited Sep 09 '22 at 08:07

csgeek

711
6
15

answered Sep 04 '22 at 15:35

RImanuelSundar

11
2

score 1 · Answer 18 · answered Dec 23 '22 at 18:48

1

If you're on a Mac and developing for iOS, you need to install the pods (via Cocoapods) to complete the linking.

npx pod-install ios

This is in the react-navigation/native documentation Here

answered Dec 23 '22 at 18:48

Matheus Lima

23
3

this worked for me – Ali Aug 11 '23 at 14:17

score 1 · Answer 19 · answered Mar 30 '23 at 06:43

This works for me:

1- npm install @react-navigation/native
2- npx expo install react-native-screens react-native-safe-area-context
3- react-native run-android

if still not working, then try:

1- cd android
2- ./gradlew clean

then try the above 3 steps again I hope it will work then.

score 0 · Answer 20 · edited Nov 15 '21 at 18:41

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.

Note, said colleague mentioned: "Anytime you see “not found in UIManager” run the project from xcode". — Romo, Nov 15 '21 at 18:37

score 0 · Answer 21 · answered Dec 05 '21 at 20:30

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

score 0 · Answer 22 · answered Feb 27 '22 at 10:22

0

steps:

stop you metro connection
restart you app

Then it will work.

answered Feb 27 '22 at 10:22

Ankit Sharma

11

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](/help/how-to-answer). – Community Feb 27 '22 at 20:31

score 0 · Answer 23 · answered Apr 12 '22 at 14:57

0

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

answered Apr 12 '22 at 14:57

Azeem Sarwar

1
1

This does not really answer the question. If you have a different question, you can ask it by clicking [Ask Question](https://stackoverflow.com/questions/ask). To get notified when this question gets new answers, you can [follow this question](https://meta.stackexchange.com/q/345661). Once you have enough [reputation](https://stackoverflow.com/help/whats-reputation), you can also [add a bounty](https://stackoverflow.com/help/privileges/set-bounties) to draw more attention to this question. - [From Review](/review/late-answers/31520179) – Brian Patterson Apr 15 '22 at 04:33

score 0 · Answer 24 · answered Jul 15 '22 at 11:17

0

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.

answered Jul 15 '22 at 11:17

ster

46
3

score 0 · Answer 25 · answered Aug 25 '22 at 04:49

0

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

answered Aug 25 '22 at 04:49

Wahab Kazmi

9
1

score 0 · Answer 26 · edited Sep 14 '22 at 17:02

0

Follow these 4 steps. I resolved the same issue.

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

edited Sep 14 '22 at 17:02

vatbub

2,713
18
41

answered Sep 10 '22 at 05:17

Sudeshna Das

1
1

Oussama Mg · Answer 27 · 2022-10-17T13:35:09.040

0

I had the same issue yesterday even tho i already had react-native-screens installed and i solved it by running the following commands

npm uninstall react-native-cli @react-native-community/cli --force

then i did this this command

npm install react-native-cli @react-native-community/cli --force

after that i ran npm run android and it workede

edited Oct 17 '22 at 13:35

answered Oct 12 '22 at 21:39

Oussama Mg

113
7

score 0 · Answer 28 · answered Oct 14 '22 at 10:12

Add this line in MainActivity.java file in the bottom of "getMainComponentName" function

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

also Import

 import android.os.Bundle;

add this line in android/build.gradle

ext{
...
  kotlinVersion = "1.4.10"
}

then clean the gradlew and run the project

score 0 · Answer 29 · answered Dec 06 '22 at 11:46

0

For android emulators I solved it in this way: 1- close metro 2-go to android and write: .\gradlew clean delete already build app from emulator. 3- run npx react-native run-android.

answered Dec 06 '22 at 11:46

Muhammad Naseem

11
1

score 0 · Answer 30 · answered Jan 14 '23 at 16:48

0

I was having the same problem due to expo linking. I went through this doc and uses the automatic linking. Might be helpful for someone.

answered Jan 14 '23 at 16:48

ABHISHEK GUPTA

41
1
6

score 0 · Answer 31 · answered Jan 19 '23 at 01:06

I was using expo and got this error. All packages were installed normally. The problem is that I ran into an environment different from expo-go because I was using dev-client. If you are using dev-client, delete the build file, rebuild it, and run dev-client again.

this method worked for me

score -1 · Answer 32 · edited Mar 24 '22 at 21:50

-1

yarn add react-native-screens

or

npm i react-native-screens

edited Mar 24 '22 at 21:50

Dharman

30,962
25
85
135

answered Mar 24 '22 at 09:13

Harsh Developer

1

score -2 · Answer 33 · answered Jan 07 '22 at 20:39

-2

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

yarn add react-native-screens

answered Jan 07 '22 at 20:39

Abu Ehteshamuddin

109
1
4

1

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](/help/how-to-answer). – Community Jan 08 '22 at 00:34

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

33 Answers33

Linked