Invariant Violation: requireNativeComponent: "RNSScreen" was not found in the UIManager

Question

I am getting RNSScreen error even though I have installed all related packages and followed react-navigation guide (https://reactnavigation.org/docs/getting-started#installation) but nothing worked for me.

Please add code and data as text ([using code formatting](//stackoverflow.com/editing-help#code)), not images. Images: A) don't allow us to copy-&-paste the code/errors/data for testing; B) don't permit searching based on the code/error/data contents; and [many more reasons](//meta.stackoverflow.com/a/285557). Images should only be used, in addition to text in code format, if having the image adds something significant that is not conveyed by just the text code/error/data. — cigien, May 01 '21 at 23:39
See this answer https://stackoverflow.com/a/67956805/3437900 — Shiva, Jun 13 '21 at 09:40
I have this issue on my android version only. I have been through all of your suggestions above without any luck. Please take a look at my question with a full description here: https://stackoverflow.com/questions/70007180/rnsscreen-was-not-found-in-the-uimanager-android-only — Simon Degn, Nov 21 '21 at 21:12

score 86 · Answer 1 · answered May 18 '21 at 18:41

86

Faced the same issue while implementing Navigation. Run following commands

npm install @react-navigation/native

React Navigation is made up of some core utilities and those are then used by navigators to create the navigation structure in your app. 

In your project directory, run:

npm install react-native-reanimated react-native-gesture-handler react-native-screens react-native-safe-area-context @react-native-community/masked-view

This will install versions of these libraries that are compatible.

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

npx pod-install ios

Now run 

react-native run-ios

answered May 18 '21 at 18:41

Gurjinder Singh

9,221
1
66
58

2

what's difference between `npx pod-install ios` vs `pod-install ios` ? – vikramvi Oct 07 '21 at 10:37
1

In my case I ran slightly different commands `pod-install ios` and `npx react-native run-ios` – vikramvi Oct 07 '21 at 10:38
that is so annoying litteraly made two apps and forgot how to solve it in both cases, thank yall guys – danyalutsevich Mar 24 '23 at 00:18
@vikramvi both mean the exact same thing – Coder Gautam YT Apr 27 '23 at 10:46
This is the best answer installing pod and restarting your app is the real deal – BoyePanthera Jul 06 '23 at 00:54

score 25 · Answer 2 · answered Jul 31 '21 at 12:00

25

That usually happens when you install all packages to add navigation without terminating the running build. Make sure to stop the running process for ( android or IOS ) then run it again after installing them and adding the routing components

answered Jul 31 '21 at 12:00

Mohammed Ramadan

655
7
10

2

also worked for me. just have to "turn it off and on again". – Asad S Jun 03 '22 at 03:20
What do you mean by "the running build"? – Diana Dec 02 '22 at 13:36
I mean the running environment, and in this case its the development environment that we usually run it with yarn start or yarn dev :D – Mohammed Ramadan Dec 06 '22 at 09:16
I think he meant the metro... – chenop Mar 20 '23 at 13:53
This is the correct answer, need to stop and re run "npm run android". – Quentin Jul 07 '23 at 21:06

score 18 · Answer 3 · answered Apr 02 '21 at 16:20

18

I think you are missing to install react-native-screens components. That is required part in install react navigation guideline.

Dont forget to run pod install in ios folder after install package from npm.

answered Apr 02 '21 at 16:20

Dat Ho

694
3
10

I have already installed it as mentioned in the documentation but did not work. For more information, I am using a windows machine and Android AVD Manager. – Amit Agrawal Apr 03 '21 at 08:09
If you are building for Android, I think you should run `npx jetify` after install package – Dat Ho Apr 04 '21 at 09:22

score 16 · Answer 4 · answered Jun 09 '21 at 15:06

16

stop all the terminal servers and then run

npx react-native run-android

if it still does not work,

npm i react-native-screens

and then

npx react-native run-android

answered Jun 09 '21 at 15:06

kaizen

1,132
1
14
20

First Uninstall the package using: npm uninstall react-native-screens Then Install it again npm install react-native-screens – Man Oct 13 '22 at 09:24

Chaudhry Talha · Answer 5 · 2023-07-08T09:31:19.623

This solution (source) always works for me, here is the exact solution:

TLDR; This happens when you install packages to add navigation without terminating the running build of the app.

Step-by-step:

If you're facing with this error

Invariant Violation: requireNativeComponent: "RNSScreen" was not found in the UIManager.

Follow these steps:

1. Make sure in your `package.json` file if you have the following packages:

@react-native-community/masked-view
@react-navigation/native
@react-navigation/stack
react-native-gesture-handler
react-native-reanimated
react-native-safe-area-context
react-native-screens

2. Next ensure if you have pods up-to-date (For iOS only) by making sure cd ios --> pod install --> cd ..

3. And finally cancel the current build by pressing Ctrl+C (twice/thrice) and then do npx react-native run-ios

score 9 · Answer 6 · answered Apr 08 '21 at 17:44

9

Close Metro and run npx run android to rebuild your code

answered Apr 08 '21 at 17:44

web_walkerX

840
10
19

score 9 · Answer 7 · edited Feb 01 '22 at 11:54

9

RNSSCreens error because the react-native-screens isn't installed on the your project

just run npm install react-native-screens react-native-safe-area-context or if your using yarn run 'yarn add install react-native-screens react-native-safe-area-context'

edited Feb 01 '22 at 11:54

kingdevil731

5
3

answered Dec 13 '21 at 17:38

Amarulloh M Khoeri

136
1
6

score 6 · Answer 8 · answered Oct 12 '22 at 16:36

This was happening to me on both iOS and Android. I managed to get Android working again by updating the package:

"react-native-screens": "^3.18.1"

Then adding this to dependencies in: android/app/build.gradle

implementation project(':react-native-screens')

Then adding this to protected List getPackages() in: android/app/src/main/java/com/myapp/MainApplication.java

@Override
protected List<ReactPackage> getPackages() {
  @SuppressWarnings("UnnecessaryLocalVariable")
  List<ReactPackage> packages = new PackageList(this).getPackages();
  packages.add(new com.swmansion.rnscreens.RNScreensPackage());
  return packages;
}

NOTE: Make sure you don't already have an import for com.swmansion.rnscreens otherwise the app will keep rebooting due to duplicate screen views

Then finally adding this to android/settings.gradle

include ':react-native-screens'
project(':react-native-screens').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-screens/android')

Make sure you clean gradle before running the app, for example navigate to android folder and run:

./gradlew clean

As for iOS, just add this to target 'myapp' do in: ios/Podfile

pod 'RNScreens', :path => '../node_modules/react-native-screens'

Make sure you delete your Podfile.lock and then run pod install --repo-update in your iOS folder before running the app.

Thank you so much. After testing a lot of things. It is your solution that allowed me to launch my application. — Massimo Alvaro, Feb 13 '23 at 11:00

score 4 · Answer 9 · answered May 15 '22 at 14:10

As I don't have enough reputations to upVote the answer, I am mentioning the answer which worked out to me here Solution mentioned by @Gurjinder Singh , worked smoothly..

Recapturing:

Issue : With Expo, Sanity.io app was working on device in dev, but once apk was generated using "eas build -p android --profile preview" , build was successful but when I tried opening the app in my mobile, after splash screen app was crashing.

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

Solution worked:

npm install @react-navigation/native

npm install react-native-reanimated react-native-gesture-handler react-native-screens react-native-safe-area-context @react-native-community/masked-view

thanks to community and @Gurjinder Singh (top voted)

Mike Hardy · Answer 10 · 2022-10-14T21:37:39.943

Happy Update: react-native-screens 3.18.2 is out with a fix for this, if you were impacted by the 3.18.1 release that caused compile problems (which you can check by seeing the message below, if needed)

So, mostly obsolete now answer preserved below, but just updating packages should get you moving. Cheers

Nowadays if this is happening it is because react-native-screens 3.18.1 includes new configuration that is only compatible with react-native 0.69+

If you are using an older react-native you need to make sure your react-native-screens dependency is exactly 3.18.0:

  "react-native-screens": "3.18.0",

then likely a npx react-native start --reset-cache to restart your javascript bundler with a fresh cache.

You will know if this is your problem if you see something like this when you say npx react-native run-android:

warn Package react-native-screens has been ignored because it contains invalid configuration. Reason: "dependency.platforms.android.componentDescriptors" is not allowed

There may be a 3.18.2 soon with a fix - reference: https://github.com/software-mansion/react-native-screens/issues/1614#issuecomment-1276245207

For those who had this warning recently, I just had it and only locking version "react-native-screens": "3.13.0" did the trick for me, but if you want the complete answer, this is the one ! — yaken, Oct 14 '22 at 03:32

score 3 · Answer 11 · edited Apr 14 '21 at 08:31

3

Hey i was also facing same problem . Just use

npm install react-native-screens

.

edited Apr 14 '21 at 08:31

Bhargav Rao

50,140
28
121
140

answered Apr 14 '21 at 08:26

user12426087

41
1

score 2 · Answer 12 · answered Apr 03 '21 at 15:45

I've encountered the same problem, and solved it.

You can just close the terminal and app on Android Emulator(or device), and just run npm run android or react-native run-android again.

I think they might have some cache and occur the error.

I hope you can fix the problem.

score 2 · Answer 13 · answered Apr 07 '21 at 16:19

2

Close the Metro and IOS simulator.
Ensure you go to your ios folder run pod install
Reopen your simulator

This should solve the problem. I also use quite a while to figure it out

answered Apr 07 '21 at 16:19

TeckBeng

27
8

score 2 · Answer 14 · answered Jan 11 '22 at 21:33

I worked on this problem for several days and this is want worked for me:

In the android\app\src\main\java(your project name)\MainApplication.java

add to Imports:

import com.swmansion.rnscreens.RNScreensPackage;

Then add new RNScreensPackage() to the ReactPackage List:

@Override
    protected List<ReactPackage> getPackages() {       
      return Arrays.<ReactPackage>asList(
          new MainReactPackage(),  
            ...
            new RNScreensPackage()
      );
    }

Edit: This was after I tried everything else here.

If do an RN upgrade from 0.64.2 to 0.68.1, this answer is the key to fix this problem. — Heaven, Apr 26 '22 at 08:34

score 1 · Answer 15 · answered Apr 02 '21 at 16:16

1

This helped me. install this package

npm i react-native-screens

and add

import { enableScreens } from 'react-native-screens';

enableScreens();

answered Apr 02 '21 at 16:16

Ragul CS

417
3
11

In which file, do I need to add these lines ? – Amit Agrawal Apr 03 '21 at 06:42
In `App.js` Import `react-native-screens` and add `enableScreens()` before `return` statement. Refer the package (https://www.npmjs.com/package/react-native-screens) – Ragul CS Apr 03 '21 at 06:53
3

Nope, it also did not work. Again getting the same error as mentioned. – Amit Agrawal Apr 03 '21 at 08:07
1

@upgoingstar have you fixed the issue? I am currently having the same issue – web_walkerX Apr 08 '21 at 12:19
Using ```react-native 0.64.0``` and ```@react-navigation/bottom-tabs 5.11.9``` I just restarted my development environment and built the code and it worked – web_walkerX Apr 08 '21 at 17:43

score 1 · Answer 16 · answered Apr 07 '21 at 04:28

1

You go into the ios folder of your project folder and run the following command.

pod install

Then run the simulator.

answered Apr 07 '21 at 04:28

DaeHyeon Kim

11
1

score 1 · Answer 17 · answered Apr 19 '21 at 00:48

You must have react-native-screens installed and I'm guessing that you have done it. So, I will just you a Problem that maybe is not really clear in the documentation.

So you probably just Install React Navigation on your app.

Once you installed it, you need to restart you app.

So close your app, run react-native run-ios or react-native run-android again.

React navigation Install some native modules. Thus, you need to restart that app as I mention.

This is really clear on their documentation.

score 1 · Answer 18 · answered Apr 24 '21 at 11:57

1

I also came across the same problem. For Android, I uninstall the app from the emulator then build the app again.Problem solved. Assuming that you already installed packages you need.

answered Apr 24 '21 at 11:57

fatih511

21
3

Just re-build should be enough, smth likes `react-native run-android` – Евгений Масленков Jun 27 '21 at 14:21

score 1 · Answer 19 · answered May 14 '21 at 12:08

1

Just stop running your node server and build the app again from Xcode/Android Studio or using command react-native run-ios or react-native run-android

answered May 14 '21 at 12:08

Akshat Sharda

31
3

score 1 · Answer 20 · answered May 15 '21 at 17:51

1

In case you are on android, you need to rebuild using npx run android or react-native run-android The new installed apk will work fine

answered May 15 '21 at 17:51

Abhishek Mathur

478
5
12

score 1 · Answer 21 · answered Jan 28 '22 at 01:41

1

I also get this error and after doing these steps my app starting running

cd android
./gradlew clean (for windows or linux)
npm install react-native-screen
react-native start & react-native run-android

answered Jan 28 '22 at 01:41

Bilal Yaqoob

790
1
10
22

score 1 · Answer 22 · answered Jun 22 '22 at 11:34

worked for me yarn add react-native-reanimated

"@react-navigation/native": "^6.0.10", "@react-navigation/native-stack": "^6.6.2", "react": "17.0.2", "react-native": "0.68.2", "react-native-reanimated": "^2.8.0", "react-native-safe-area-context": "^4.3.1", "react-native-screens": "^3.13.1", "styled-components": "^5.3.5"

score 0 · Accepted Answer · answered Apr 29 '21 at 17:38

Finally found the solutions, first by creating new project and secondly re-setup of the react-google-maps library.

Workaround Solution: Created new project, installed all dependencies from scratch, followed step-by-step installation guidelines of react-native screens, and finally moved all my code files into a newly created project. This worked for me :D

After digging into the project code and compared project code with newly generated code, here are my findings:

Actual Problem: We had integrated react-native-google-maps library some time ago, for which I and other developers followed step-by-step guidelines and made changes in the MainActivity.java file in the android folder. There were some misconfigurations due to which RNSScreen issue was getting thrown.

Actual Solution Removed react-native-google-maps completely (uninstalled npm packages) and removed Google Maps configuration and did set up the react-google-maps library again

In conclusion, if any of the developers, try to set up google maps in react native, please check the version of react native and react-native-google-maps library and then follow the steps carefully.

Hopefully, this would answer your queries.

score 0 · Answer 24 · edited Jul 18 '21 at 23:17

0

In my case, the following code block helped!

npm install react-native-screens
npm run android/ ios

edited Jul 18 '21 at 23:17

Showrin Barua

1,737
1
11
22

answered Jul 16 '21 at 08:34

Elpulga Nguyễn

9
1

score 0 · Answer 25 · answered Jul 19 '21 at 10:25

(It Workes For Me..!)

for React-native developers.. Some times the changes of packages Not reflacted in xcode so follow this steps for Solution..

Open Project in xcode -> Clean Buid Folder -> (Rebuid Your Project)Run on any Simulator and wait for Build.. ->Once Build either You can run again by Terminal or continue work by xcode..

score 0 · Answer 26 · answered Oct 11 '21 at 07:01

none of the recommended answers worked until I tried what I found in this comment plus restart my steps:

deleting the node_modules directory
turn Metro and actually quit the simulator completely
yarn to install again
start metro via npx react-native start
install pods via npx pod-install ios
run simulator again via npx react-native run-ios

score 0 · Answer 27 · answered Oct 21 '21 at 02:41

Make sure the below plugin install and linked with android & ios?

npm install react-native-screens

If not linked then perform the below command

react-native link react-native-screens

after successfully linked for android and ios, "Sync Gradle" from android studio and "pod install" for ios

Now close the terminal and again build and run app

score 0 · Answer 28 · answered May 12 '22 at 01:21

0

I updated Expo to 45.0.0. That fixed the error and solved a problem with the app crashing after launch in production mode but working fine on device with QR code or simulator.

answered May 12 '22 at 01:21

Larry Feldman

39
1
8

score 0 · Answer 29 · edited Oct 26 '22 at 05:48

You need to do a few things:

Open android/app/src/main/java/MainApplication.

Replace the function getPackages() with:

@Override protected                                                        
List<ReactPackage> getPackages() {
@SuppressWarnings("UnnecessaryLocalVariable")List<ReactPackage> packages = new PackageList(this).getPackages();
          // Packages that cannot be autolinked yet can be added manually here, for example:
          // packages.add(new ReactNativeFirebaseAuthPackage());
          return packages;
        }

yarn start --reset-cache or npm start -- --reset-cache
Clean:
```
 cd android
./gradlew clean
```

score 0 · Answer 30 · answered Jun 11 '23 at 05:52

A rather important step that I didn't see mentioned here, was that if you're an expo developer using a dev-client, you would have to rebuild your dev-client. To that end, these are the steps I followed to resolve this issue:

Stop your metro server.
Run this in the terminal to install the required dependencies:

npm install react-native-reanimated react-native-gesture-handler react-native-screens react-native-safe-area-context @react-native-masked-view/masked-view

Add the reanimated plugin to the babel.config.js file, ensuring it's the last one listed. These is what my own babel.config.js file looked like

module.exports = function (api) {
  api.cache(true);
  return {
    presets: ["babel-preset-expo"],
    plugins: [
      [
        "module-resolver",
        {
          extensions: [".tsx", ".ts", ".js", ".json"],
        },
      ],
      "react-native-reanimated/plugin",
    ],
  };
};

Should be optional: delete node_modules directory and run npm install
Not Optional: Run npx expo install --check to fix all dependencies that are not compatible with the installed expo SDK.
Head to your emulator and uninstall your dev-client.
Rebuild your dev-client using whatever command is best suited for your use case. You can find specific instructions here
Restart your emulator
Reinstall the dev-client
Run expo r -c to clear the cache while running

You're good to go!

score -1 · Answer 31 · answered Jan 13 '23 at 22:05

Actually The Solution Is Very Simple.

You will however need to add some dependencies yourself: open android/app/build.gradle and add the following under dependencies:

Past The Follwing 2 Line Code.

implementation 'androidx.appcompat:appcompat:1.1.0-rc01'
implementation 'androidx.swiperefreshlayout:swiperefreshlayout:1.1.0-alpha02'

Invariant Violation: requireNativeComponent: "RNSScreen" was not found in the UIManager

31 Answers31

Linked