'Invariant Violation: requireNativeComponent: "RNSScreen" was not found in the UIManager.' error in react native cli

Question

I keep getting RNSScreen error. I have followed all instructions on react-navigation guide but nothing has worked for me.

Answer 1

Looks like native packages are not linked automatically. So try this

Note : In your case it can be '../' instead of '../../../' because I am using Monorepo.

Podfile

pod 'RNScreens', :path => '../../../node_modules/react-native-screens/'
pod 'RNGestureHandler', :path => '../../../node_modules/react-native-gesture-handler/'
pod 'react-native-safe-area-context', :path => '../../../node_modules/react-native-safe-area-context/'

Then Install pods

yarn podinstall

Then terminate already running MetroBundler terminal. And, build app again

yarn ios

---

Working Example

/**
 * @format
 */
import 'react-native-gesture-handler';
import {AppRegistry} from 'react-native';

import SplashScreen from '../common/src/containers/splashScreen';
import LoginScreen from '../common/src/containers/loginScreen';
import LoginOTPScreen from '../common/src/containers/loginOTPScreen';
import SearchScreen from './src/searchScreen';

import React from 'react';
import {name as appName, displayName} from './app.json';
import {Provider as PaperProvider} from 'react-native-paper';
import {NavigationContainer} from '@react-navigation/native';
import {createStackNavigator} from '@react-navigation/stack';

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

const Stack = createStackNavigator();
const App = () => {
  return (
    <PaperProvider>
      <NavigationContainer>
        <Stack.Navigator initialRouteName="SplashScreen">
          <Stack.Screen name="SplashScreen" component={SplashScreen} />
          <Stack.Screen name="LoginScreen" component={LoginScreen} />
          <Stack.Screen name="LoginOTPScreen" component={LoginOTPScreen} />
          <Stack.Screen name="SearchScreen" component={SearchScreen} />
        </Stack.Navigator>
      </NavigationContainer>
    </PaperProvider>
  );
};

AppRegistry.registerComponent(appName, () => App);

Make sure import 'react-native-gesture-handler'; is the top

Answer 2

I had this error and was doing expo start --dev-client and when I just did expo start it works. Go figure.

Answer 3

For those who are getting this error when working in a monorepo (@nrwl/nx for me), this solution worked for me.

https://github.com/nrwl/nx-react-native/issues/98#issuecomment-995299032

Adding the following packages in the app's package.json (not the workspace root's package.json) has solved the problem for both iOS and Android.

"@react-navigation/native": "*",
"@react-navigation/native-stack": "*",
"react-native-screens": "*",
"react-native-safe-area-context": "*"

Answer 4

Try below steps

• First stop the metro

• Delete the "node_modules" folder

• Run below commands respectively

  npm install, npx react-native start, npx react-native run-ios

Answer 5

There were many answers that didn't work for me. Finally I found this was related to react-native-screens package configuration.

On iOS obtaining current device orientation requires asking the system to generate orientation notifications. Our library uses them to enforce correct interface orientation when navigating between screens. To make sure that there are no issues with screen orientation you should put following code in your AppDelegate.m:

- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions
{
    ... 
#if !TARGET_OS_TV
    [[UIDevice currentDevice] beginGeneratingDeviceOrientationNotifications];
#endif // !TARGET_OS_TV
    ...
    return YES:
}

- (void)applicationWillTerminate:(UIApplication *)application
{
#if !TARGET_OS_TV
    [[UIDevice currentDevice] endGeneratingDeviceOrientationNotifications];
#endif // !TARGET_OS_TV
}

Reference: https://www.npmjs.com/package/react-native-screens

Answer 6

If anyone is using nx ( https://nx.dev/ ). My solution is:

Adding the following packages in the app's package.json (not the workspace root's package.json) has solved the problem for both iOS and Android.

"@react-navigation/native": "*",
"@react-navigation/native-stack": "*",
"react-native-screens": "*",
"react-native-gesture-handler": "*",
"react-native-safe-area-context": "*"

More about: https://github.com/nrwl/nx-react-native/issues/98#issuecomment-995299032

Answer 7

If you're using nx expo, you should be to intall libraries using:

nx run <APP_NAME>:install react-native-safe-area-context