CODEWITHSUNDEEP
javascriptandroidreactjsreact-nativereact-navigation
Anders Saxrud
Anders Saxrud

Reputation: 677

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?

Upvotes: 53

Views: 133087

Answers (30)

RAHUL SINGH
RAHUL SINGH

Reputation: 1

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

you need to add the

npm i react-native-safe-area-context

dependency in the mobile application package.json

Upvotes: 0

Giedrius Šlikas
Giedrius Šlikas

Reputation: 1199

Navigating to ios folder and executing

pod install

Worked for me

Upvotes: 0

Dilip kumar romi
Dilip kumar romi

Reputation: 13

Error => Invariant Violation: requireNativeComponent: "RNSScreenStackHeaderConfig" was not found in the UIManager.

resolve=> npm install react-native-cli @react-native-community/cli --force

and restart running react native apps

it's working fine

Upvotes: 0

Tim Pegas
Tim Pegas

Reputation: 409

DISCLAIMER: I encountered this issue when scaffolding a monorepo framework using Nx (@nx/react-native) recipe. Specifically when setting things up with @react-navigation/native npm package installation. If you are coming here for the same reason, then keep reading. Otherwise, read from Case-2: Bare React native app and after

Case-1: Nx Monorepo issue

  1. First, make sure you delete any old .lock files:

On the root directory of your Nx monorepo, run

rm -rf node_modules package-lock.json

Then change directory inside your app that you want to run and do the same (Nx does that for you but just in case there is any leftover files):

rm -rf node_modules

Then inside your /ios directory run:

rm -rf /Pods Podfile.lock

  1. Then you need to make sure you clean your npm cache:

Go back to your project root and run:

npm cache clean --force

  1. As described in their official documentation, for @react-navigation/native you need to also make sure you install peer dependencies, like so (I use npm)
npm i --save react-native-screens react-native-safe-area-context

Or if you are using yarn do the same.

Don't forget to also include them as dependencies inside the package.json file of your app! This will take care of the installation of your npm packages inside your monorepo, as well as the app /node_modules.

Then you need to make sure you run the app with the reset flag like so:

npx nx serve <app> --reset-cache

Nx takes care of the Pods installation as well.

Case-2: Bare React native app

  1. Make sure you delete any old .lock files:

From the root directory of you app, run

rm -rf node_modules package-lock.json

Then inside your /ios directory run:

rm -rf /Pods Podfile.lock

  1. Then you need to make sure you clean your npm cache:

Go back to your application root and run:

npm cache clean --force

  1. As described in their official documentation for React Navigation 6.x you need to also make sure you install peer dependencies, like so (I use npm)
npm i --save react-native-screens react-native-safe-area-context

Or if you are using yarn do the same.

Then you need to make sure you run the app with the reset flag like so:

npx run start --ios --reset-cache

Hope this solution covers both cases and helps you all. 🤞

Upvotes: 1

Milan Parmar
Milan Parmar

Reputation: 61

  1. Check Your OS

If You are Using Mac,
you need to install the pods (via Cocoapods) to complete the linking.

npx pod-install ios

This will Definitely resolve you issue in MacOS.

Upvotes: 3

Yuvraj Patil
Yuvraj Patil

Reputation: 8774

I did everything recommented by official docs of React Navigation library but it was still giving this error.

In my case I was doing the adb reverse which was causing the issue.

I uninstalled the app from device and reinstalled. It worked fine then.

Upvotes: 0

Mohd. Anas Siddiqui
Mohd. Anas Siddiqui

Reputation: 783

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.

Upvotes: 3

EremesKim
EremesKim

Reputation: 1

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

Upvotes: 0

ABHISHEK GUPTA
ABHISHEK GUPTA

Reputation: 71

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.

Upvotes: 0

pavan bangalala
pavan bangalala

Reputation: 131

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

Upvotes: 6

MD Ashik
MD Ashik

Reputation: 9835

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;

Upvotes: 24

Matheus Lima
Matheus Lima

Reputation: 23

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

[![enter image description here](https://i.sstatic.net/FJWrR.png)](https://i.sstatic.net/FJWrR.png)

Upvotes: 1

Muhammad Naseem
Muhammad Naseem

Reputation: 11

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.

Upvotes: 0

Oussama Mg
Oussama Mg

Reputation: 153

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

Upvotes: 0

Muhammad Haris
Muhammad Haris

Reputation: 181

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

Upvotes: 0

Sudeshna Das
Sudeshna Das

Reputation: 1

Follow these 4 steps. I resolved the same issue.

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

Upvotes: 0

RImanuelSundar
RImanuelSundar

Reputation: 21

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.

Upvotes: 2

Wahab Kazmi
Wahab Kazmi

Reputation: 9

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

Upvotes: 0

gsm
gsm

Reputation: 2426

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!

Upvotes: 1

ster
ster

Reputation: 46

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.

Upvotes: 0

berkayer
berkayer

Reputation: 61

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;

Upvotes: 2

wahyu nanda
wahyu nanda

Reputation: 406

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

Upvotes: 1

Green
Green

Reputation: 1761

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.

Upvotes: 8

Azeem Sarwar
Azeem Sarwar

Reputation: 1

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

Upvotes: 0

SHZhao74
SHZhao74

Reputation: 93

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

Upvotes: 1

Harsh Developer
Harsh Developer

Reputation: 1

yarn add react-native-screens

or

npm i react-native-screens

Upvotes: -1

Nitesh Agarwal
Nitesh Agarwal

Reputation: 1017

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.

Upvotes: 74

Ankit Sharma
Ankit Sharma

Reputation: 11

steps:

  1. stop you metro connection
  2. restart you app

Then it will work.

Upvotes: 0

Plipus Tel
Plipus Tel

Reputation: 755

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

Upvotes: 18

Dawidowski
Dawidowski

Reputation: 151

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;

Upvotes: 14

Related Questions