[Solved]-invariant violation: requirenativecomponent: ""rnsscreen"" was not found in the uimanager in react native

If you encounter the error "Invariant Violation: requireNativeComponent: 'RNSScreen' was not found in the UIManager," you can try the following solutions:

1. Make sure that you have installed all the required dependencies for your React Native project. Run:

npm install

2. If you're using Expo, ensure that you have the necessary Expo modules installed:

expo install react-native-screens

3. If you're not using Expo, and you're using React Navigation, make sure that you have installed the necessary packages:

npm install @react-navigation/native

4. Ensure that you have linked the native dependencies properly. You can try unlinking and linking again:

react-native unlink react-native-screens
react-native link react-native-screens

5. If none of the above solutions work, try clearing the cache and reinstalling the node modules:

npm cache clean --force
rm -rf node_modules
npm install

6. Finally, restart your Metro bundler and rebuild your project:

npx react-native start --reset-cache
npx react-native run-android (or run-ios)

Created a 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 comparing it with the newly generated code, here are my findings:

Actual Problem: We had integrated the 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 the RNSScreen issue was getting thrown.

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

In conclusion, if any 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.

Uninstall the app from the emulator, then build the app again. Problem solved. Assuming that you already installed the packages you need.

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 getPackages() {       
                return Arrays.asList(
                    new MainReactPackage(),  
                    ...
                    new RNScreensPackage()
                );
            }
        
    

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.

Run the 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