Fixing "RNSScreen was not found in the UIManager" Error in React Native

When implementing React Navigation in a React Native application, a common error developers encounter is the Invariant Violation: requireNativeComponent: "RNSScreen" was not found in the UIManager. This error typically occurs when the necessary native modules for React Navigation aren't properly installed or linked.

Root Cause

The error occurs because react-native-screens, a dependency of React Navigation, isn't properly integrated with your React Native project. This package provides native implementations for screens that enable better performance and memory management in navigation.

Primary Solutions

Solution 1: Install Required Dependencies and Restart

The most common solution is to ensure all React Navigation dependencies are properly installed and then restart your development environment:

1. Install the core navigation package:

   npm install @react-navigation/native

2. Install all required dependencies:

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

3. For iOS projects, install CocoaPods:

   npx pod-install ios

4. Stop the Metro bundler (press Ctrl+C multiple times)

5. Rebuild your application:

   npx react-native run-ios

   or

   npx react-native run-android

WARNING

Always stop your running Metro server and rebuild your application after installing new packages. The most common cause of this error is installing packages while the development server is running.

Solution 2: Check for Version Compatibility Issues

If you're using an older version of React Native (below 0.69), you may encounter compatibility issues with newer versions of react-native-screens. In this case:

1. Pin the compatible version in your package.json:

   {
     "dependencies": {
       "react-native-screens": "3.18.0"
     }
   }

2. Clear the Metro cache:

   npx react-native start --reset-cache

Solution 3: Clean and Rebuild (Android)

For Android-specific issues, try a clean rebuild:

1. Clean the Gradle build:

   cd android
   ./gradlew clean
   cd ..

2. Rebuild your application:

   npx react-native run-android

Solution 4: For Expo Users

If you're using Expo with a development build:

1. Install required dependencies:

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

2. Configure Babel (babel.config.js):

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

3. Rebuild your development client:

   # Uninstall old dev client from your device/emulator
   npx expo run:ios --clean
   # or
   npx expo run:android --clean

Advanced Troubleshooting

Manual Linking (React Native < 0.60)

For older React Native versions that don't support autolinking:

1. Add to android/settings.gradle:

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

2. Add to android/app/build.gradle:

   dependencies {
     implementation project(':react-native-screens')
   }

3. Add to android/app/src/main/java/.../MainApplication.java:

   import com.swmansion.rnscreens.RNScreensPackage;
   
   @Override
   protected List<ReactPackage> getPackages() {
     return Arrays.<ReactPackage>asList(
       new MainReactPackage(),
       new RNScreensPackage() // Add this line
     );
   }

iOS Manual Configuration

For iOS, ensure your Podfile includes:

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

Then update your CocoaPods:

cd ios
pod install --repo-update
cd ..

Prevention and Best Practices

1. Always restart Metro after installing new packages
2. Keep your React Native ecosystem updated to avoid compatibility issues
3. Use compatible versions of navigation-related packages
4. Follow the official React Navigation installation guide for your specific React Native version

INFO

If you've tried all solutions and the error persists, consider creating a new React Native project and migrating your code. This often resolves deep configuration issues that are difficult to diagnose.

Conclusion

The "RNSScreen was not found" error is typically resolved by ensuring all React Navigation dependencies are properly installed, clearing caches, and performing clean rebuilds. The solutions provided cover most scenarios across different React Native versions and development environments (Expo vs. bare React Native).

By following these steps systematically, you should be able to resolve this error and successfully implement navigation in your React Native application.