[Solved]-invariant violation: requirenativecomponent: ""rnsscreenstackheaderconfig"" was not found in the uimanager.

I encountered this issue on iOS while working on navigation.

I'm uncertain about the exact resolution. However, I resolved it by reinstalling all the navigation packages, running npx pod-install, cleaning the metro cache, build data, and derived data. After performing these actions, the error disappeared.

Error Message:

While running your Android app, you might encounter the following error message: requireNativeComponent: "RNSScreenStackHeaderConfig" was not found in the UIManager.

This error typically occurs when the React Native component RNSScreenStackHeaderConfig is missing from the UIManager.

To resolve this issue, you can try the following steps:

1. Ensure that you have imported and registered the RNSScreenStackHeaderConfig component correctly in your React Native application.
2. Check if there are any typos in the import statement or if the component is properly installed in your project dependencies.
3. If you're using any third-party libraries that might rely on RNSScreenStackHeaderConfig, make sure they are compatible with your React Native version.
4. Restart the Metro Bundler and rebuild your Android project to ensure that all changes are applied correctly.
5. If the issue persists, consider updating your React Native version to the latest stable release, as the problem might be resolved in newer versions.

If you encounter this issue while utilizing nrwl/nx mono-repo for cross-platform build (mobile and web), ensure you include the react-native-screens and react-native-safe-area-context dependencies in the mobile application's package.json in addition to the workspace's package.json.

I encountered this problem after configuring navigation for iOS. Here's the solution I discovered:

1. In the terminal, execute npx pod-install ios because, as mentioned in the documentation, "If you're on a Mac and developing for iOS, you need to install the pods (via Cocoapods) to complete the linking."
2. Quit my simulator.
3. Terminated and re-ran npx react-native start.
4. Terminated and re-ran npx react-native run-ios.

Try this:

If you're using iOS:

1. Navigate to the ios directory in your root folder.
2. Run pod install.
3. Go back to the root directory (cd ..).
4. Execute yarn or npm ios to rebuild.

If you're using Android:

In your MainActivity.java file:

• Copy:

@Override
protected void onCreate(Bundle savedInstanceState) {
  super.onCreate(null);
}

• Also, import android.os.Bundle;

This worked for me:

1. Run npm install @react-navigation/native.
2. Execute npx expo install react-native-screens react-native-safe-area-context.
3. Run react-native run-android.

If it's still not working, then try:

1. Navigate to the android directory (cd android).
2. Execute ./gradlew clean.

Then attempt the above three steps again. Hopefully, it will work this time.

I encountered this issue on both iOS and Android. I resolved the Android side by updating the package:

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

Then, I added the following to dependencies in android/app/build.gradle:

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

Additionally, I added 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: Ensure there isn't already an import for com.swmansion.rnscreens to avoid app rebooting due to duplicate screen views.

Finally, I added this to android/settings.gradle:

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

Ensure you clean gradle before running the app. For example, navigate to the android folder and run:

./gradlew clean

For iOS, I simply added this to target 'myapp' do in ios/Podfile:

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

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

I spent several days working on this problem, and this is what worked for me:

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

Add the following import:

import com.swmansion.rnscreens.RNScreensPackage;

Then, add new RNScreensPackage() to the ReactPackage List:

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

Close both Metro and the iOS simulator.

Make sure to navigate to your ios folder and run pod install.

Then, reopen your simulator.

Simply use:

npm install react-native-screens