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

Viewed 7159

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

4 Answers

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

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": "*"

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

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

Related