在 UIManager 中找不到“RNSScreen”（仅限 Android）

Question

I have been unable to run my React Native application for a few days now. I am going from one issue with dependencies to another...

The last issue here, I cannot solve. When I run the application I get this error message (see full error message in the bottom of the question):

Invariant Violation: requireNativeComponent: "RNSScreen" was not found in the UIManager.

I found this thread but none of the answers seem to work for me and I get the issue on Android only - the iOS version is running fine. I have all the suggested dependencies installed with the latest version, I have clean npn and react native caches, reinstalled the application on my device and much more.

I don't want to initialize a new project and move all the code etc. to this, but it seems like the final solution if I don't get a valid answer soon...

Let me know what you think.

UPDATE (20/11/2021)

I initiated a new React Native project and reinstalled all dependencies. I can run the application in XCode and run it on my iOS device but in Android Studio the application builds but I end up with the same error message:

Invariant Violation: requireNativeComponent: "RNSScreen" was not found in the UIManager.

Here is the content of the package.json file:

{
  "name": "MyReactNativeApplication",
  "version": "0.0.1",
  "private": true,
  "scripts": {
    "android": "react-native run-android",
    "ios": "react-native run-ios",
    "start": "react-native start",
    "test": "jest",
    "lint": "eslint ."
  },
  "dependencies": {
    "@bam.tech/react-native-make": "^3.0.3",
    "@react-native-async-storage/async-storage": "^1.15.11",
    "@react-native-clipboard/clipboard": "^1.9.0",
    "@react-native-community/cli": "^6.2.0",
    "@react-native-community/datetimepicker": "^3.5.2",
    "@react-native-community/masked-view": "^0.1.11",
    "@react-native-community/push-notification-ios": "^1.10.0",
    "@react-native-firebase/app": "^12.9.3",
    "@react-native-seoul/masonry-list": "^1.1.1",
    "@react-navigation/bottom-tabs": "^6.0.9",
    "@react-navigation/material-top-tabs": "^6.0.6",
    "@react-navigation/native": "^6.0.6",
    "@react-navigation/stack": "^6.0.11",
    "react": "17.0.2",
    "react-native": "0.66.3",
    "react-native-actionsheet": "^2.4.2",
    "react-native-add-calendar-event": "^4.0.0",
    "react-native-admob": "^2.0.0-beta.6",
    "react-native-admob-native-ads": "^0.4.1",
    "react-native-animatable": "^1.3.3",
    "react-native-autolink": "^4.0.0",
    "react-native-calendars": "^1.1268.0",
    "react-native-code-input": "^1.0.6",
    "react-native-confirmation-code-field": "^7.1.0",
    "react-native-contacts": "^7.0.2",
    "react-native-eject": "^0.1.2",
    "react-native-elements": "^3.4.2",
    "react-native-event-listeners": "^1.0.7",
    "react-native-fast-image": "^8.5.11",
    "react-native-gesture-handler": "^1.10.3",
    "react-native-get-location": "^2.1.2",
    "react-native-haptic-feedback": "^1.13.0",
    "react-native-image-picker": "^4.3.0",
    "react-native-input-scroll-view": "^1.11.0",
    "react-native-localize": "^2.1.5",
    "react-native-maps": "^0.28.1",
    "react-native-modal-datetime-picker": "^10.2.0",
    "react-native-notifications": "^4.1.2",
    "react-native-pager-view": "^5.4.9",
    "react-native-parallax-scroll-view": "^0.21.3",
    "react-native-parallax-scrollview": "^3.0.0",
    "react-native-push-notification": "^8.1.1",
    "react-native-reanimated": "^2.2.4",
    "react-native-rheostat": "^1.0.2",
    "react-native-safe-area": "^0.5.1",
    "react-native-safe-area-context": "^3.3.2",
    "react-native-screens": "^3.9.0",
    "react-native-segmented-control-tab": "^3.4.1",
    "react-native-slider": "^0.11.0",
    "react-native-snap-carousel": "^3.9.1",
    "react-native-svg": "^12.1.1",
    "react-native-tab-view": "^3.1.1",
    "react-native-tracking-transparency": "^0.1.1",
    "react-native-vector-icons": "^8.1.0",
    "react-native-video": "^5.2.0",
    "react-navigation": "^4.4.4",
    "rn-segmented-control": "^0.2.8",
    "rn-sliding-up-panel": "^2.4.5",
    "yarn": "^1.22.17"
  },
  "devDependencies": {
    "@babel/core": "^7.16.0",
    "@babel/runtime": "^7.16.3",
    "@react-native-community/eslint-config": "^3.0.1",
    "babel-jest": "^27.3.1",
    "eslint": "^8.2.0",
    "jest": "^27.3.1",
    "metro-react-native-babel-preset": "^0.66.2",
    "react-test-renderer": "17.0.2"
  },
  "jest": {
    "preset": "react-native"
  }
}

UPDATE (21/11/2021)

Full error message:

ERROR  Invariant Violation: requireNativeComponent: "RNSScreen" was not found in the UIManager.

This error is located at:
    in RNSScreen (at createAnimatedComponent.js:242)
    in AnimatedComponent (at createAnimatedComponent.js:295)
    in AnimatedComponentWrapper (at src/index.native.tsx:208)
    in Screen (at Screens.tsx:37)
    in MaybeScreen (at CardStack.tsx:642)
    in RNSScreenContainer (at src/index.native.tsx:277)
    in ScreenContainer (at Screens.tsx:20)
    in MaybeScreenContainer (at CardStack.tsx:561)
    in RCTView (at View.js:32)
    in View (at Background.tsx:13)
    in Background (at CardStack.tsx:559)
    in CardStack (at StackView.tsx:437)
    in RCTView (at View.js:32)
    in View (at SafeAreaProviderCompat.tsx:42)
    in SafeAreaProviderCompat (at StackView.tsx:430)
    in RCTView (at View.js:32)
    in View (at GestureHandlerRootView.android.tsx:21)
    in GestureHandlerRootView (at StackView.tsx:429)
    in StackView (at createStackNavigator.tsx:118)
    in Unknown (at createStackNavigator.tsx:117)
    in StackNavigator (at App.js:244)
    in LandingStack (at SceneView.tsx:126)
    in StaticContainer
    in EnsureSingleNavigator (at SceneView.tsx:118)
    in SceneView (at useDescriptors.tsx:210)
    in RCTView (at View.js:32)
    in View (at CardContainer.tsx:280)
    in RCTView (at View.js:32)
    in View (at CardContainer.tsx:278)
    in RCTView (at View.js:32)
    in View (at CardSheet.tsx:33)
    in CardSheet (at Card.tsx:557)
    in RCTView (at View.js:32)
    in View (at createAnimatedComponent.js:242)
    in AnimatedComponent (at createAnimatedComponent.js:295)
    in AnimatedComponentWrapper (at Card.tsx:536)
    in PanGestureHandler (at GestureHandlerNative.tsx:14)
    in PanGestureHandler (at Card.tsx:530)
    in RCTView (at View.js:32)
    in View (at createAnimatedComponent.js:242)
    in AnimatedComponent (at createAnimatedComponent.js:295)
    in AnimatedComponentWrapper (at Card.tsx:526)
    in RCTView (at View.js:32)
    in View (at Card.tsx:520)
    in Card (at CardContainer.tsx:218)
    in CardContainer (at CardStack.tsx:649)
    in MaybeFreeze (at src/index.native.tsx:229)
    in RNSScreen (at createAnimatedComponent.js:242)
    in AnimatedComponent (at createAnimatedComponent.js:295)
    in AnimatedComponentWrapper (at src/index.native.tsx:208)
    in Screen (at Screens.tsx:37)
    in MaybeScreen (at CardStack.tsx:642)
    in RNSScreenContainer (at src/index.native.tsx:277)
    in ScreenContainer (at Screens.tsx:20)
    in MaybeScreenContainer (at CardStack.tsx:561)
    in RCTView (at View.js:32)
    in View (at Background.tsx:13)
    in Background (at CardStack.tsx:559)
    in CardStack (at StackView.tsx:437)
    in RNCSafeAreaProvider (at SafeAreaContext.tsx:76)
    in SafeAreaProvider (at SafeAreaProviderCompat.tsx:46)
    in SafeAreaProviderCompat (at StackView.tsx:430)
    in GestureHandlerRootView (at GestureHandlerRootView.android.tsx:26)
    in GestureHandlerRootView (at StackView.tsx:429)
    in StackView (at createStackNavigator.tsx:118)
    in Unknown (at createStackNavigator.tsx:117)
    in StackNavigator (at App.js:710)
    in EnsureSingleNavigator (at BaseNavigationContainer.tsx:430)
    in BaseNavigationContainer (at NavigationContainer.tsx:132)
    in ThemeProvider (at NavigationContainer.tsx:131)
    in NavigationContainerInner (at App.js:689)
    in App (at renderApplication.js:50)
    in RCTView (at View.js:32)
    in View (at AppContainer.js:92)
    in RCTView (at View.js:32)
    in View (at AppContainer.js:119)
    in AppContainer (at renderApplication.js:43)
    in MyReactNativeApplication(RootComponent) (at renderApplication.js:60)
 WARN  Possible Unhandled Promise Rejection (id: 0):
Invariant Violation: requireNativeComponent: "RNSScreen" was not found in the UIManager.
invariant@http://localhost:8081/index.bundle?platform=android&dev=true&minify=false&app=com.MyReactNativeApplication.app&modulesOnly=false&runModule=true:2391:26
getNativeComponentAttributes@http://localhost:8081/index.bundle?platform=android&dev=true&minify=false&app=com.MyReactNativeApplication.app&modulesOnly=false&runModule=true:53270:48
http://localhost:8081/index.bundle?platform=android&dev=true&minify=false&app=com.MyReactNativeApplication.app&modulesOnly=false&runModule=true:52823:28
createInstance@http://localhost:8081/index.bundle?platform=android&dev=true&minify=false&app=com.MyReactNativeApplication.app&modulesOnly=false&runModule=true:7143:46
completeWork@http://localhost:8081/index.bundle?platform=android&dev=true&minify=false&app=com.MyReactNativeApplication.app&modulesOnly=false&runModule=true:14962:48
completeUnitOfWork@http://localhost:8081/index.bundle?platform=android&dev=true&minify=false&app=com.MyReactNativeApplication.app&modulesOnly=false&runModule=true:17830:34
performUnitOfWork@http://localhost:8081/index.bundle?platform=android&dev=true&minify=false&app=com.MyReactNativeApplication.app&modulesOnly=false&runModule=true:17807:29
workLoopSync@http://localhost:8081/index.bundle?platform=android&dev=true&minify=false&app=com.MyReactNativeApplication.app&modulesOnly=false&runModule=true:17736:28
renderRootSync@http://localhost:8081/index.bundle?platform=android&dev=true&minify=false&app=com.MyReactNativeApplication.app&modulesOnly=false&runModule=true:17712:25
performSyncWorkOnRoot@http://localhost:8081/index.bundle?platform=android&dev=true&minify=false&app=com.MyReactNativeApplication.app&modulesOnly=false&runModule=true:17473:40
performSyncWorkOnRoot@[native code]
flushSyncCallbacks@http://localhost:8081/index.bundle?platform=android&dev=true&minify=false&app=com.MyReactNativeApplication.app&modulesOnly=false&runModule=true:7798:36
flushSyncCallbacksOnlyInLegacyMode@http://localhost:8081/index.bundle?platform=android&dev=true&minify=false&app=com.MyReactNativeApplication.app&modulesOnly=false&runModule=true:7779:29
scheduleUpdateOnFiber@http://localhost:8081/index.bundle?platform=android&dev=true&minify=false&app=com.MyReactNativeApplication.app&modulesOnly=false&runModule=true:17160:49
dispatchAction@http://localhost:8081/index.bundle?platform=android&dev=true&minify=false&app=com.MyReactNativeApplication.app&modulesOnly=false&runModule=true:11805:43
dispatchAction@[native code]
_callee$@http://localhost:8081/index.bundle?platform=android&dev=true&minify=false&app=com.MyReactNativeApplication.app&modulesOnly=false&runModule=true:251553:27
tryCatch@http://localhost:8081/index.bundle?platform=android&dev=true&minify=false&app=com.MyReactNativeApplication.app&modulesOnly=false&runModule=true:24265:23
invoke@http://localhost:8081/index.bundle?platform=android&dev=true&minify=false&app=com.MyReactNativeApplication.app&modulesOnly=false&runModule=true:24435:32
tryCatch@http://localhost:8081/index.bundle?platform=android&dev=true&minify=false&app=com.MyReactNativeApplication.app&modulesOnly=false&runModule=true:24265:23
invoke@http://localhost:8081/index.bundle?platform=android&dev=true&minify=false&app=com.MyReactNativeApplication.app&modulesOnly=false&runModule=true:24337:30
http://localhost:8081/index.bundle?platform=android&dev=true&minify=false&app=com.MyReactNativeApplication.app&modulesOnly=false&runModule=true:24347:21
tryCallOne@http://localhost:8081/index.bundle?platform=android&dev=true&minify=false&app=com.MyReactNativeApplication.app&modulesOnly=false&runModule=true:28942:16
http://localhost:8081/index.bundle?platform=android&dev=true&minify=false&app=com.MyReactNativeApplication.app&modulesOnly=false&runModule=true:29043:27
http://localhost:8081/index.bundle?platform=android&dev=true&minify=false&app=com.MyReactNativeApplication.app&modulesOnly=false&runModule=true:29634:26
_callTimer@http://localhost:8081/index.bundle?platform=android&dev=true&minify=false&app=com.MyReactNativeApplication.app&modulesOnly=false&runModule=true:29530:17
_callReactNativeMicrotasksPass@http://localhost:8081/index.bundle?platform=android&dev=true&minify=false&app=com.MyReactNativeApplication.app&modulesOnly=false&runModule=true:29569:17
callReactNativeMicrotasks@http://localhost:8081/index.bundle?platform=android&dev=true&minify=false&app=com.MyReactNativeApplication.app&modulesOnly=false&runModule=true:29779:44
__callReactNativeMicrotasks@http://localhost:8081/index.bundle?platform=android&dev=true&minify=false&app=com.MyReactNativeApplication.app&modulesOnly=false&runModule=true:3049:46
http://localhost:8081/index.bundle?platform=android&dev=true&minify=false&app=com.MyReactNativeApplication.app&modulesOnly=false&runModule=true:2827:45
__guard@http://localhost:8081/index.bundle?platform=android&dev=true&minify=false&app=com.MyReactNativeApplication.app&modulesOnly=false&runModule=true:3032:15
flushedQueue@http://localhost:8081/index.bundle?platform=android&dev=true&minify=false&app=com.MyReactNativeApplication.app&modulesOnly=false&runModule=true:2826:21
flushedQueue@[native code]
callFunctionReturnFlushedQueue@[native code]

UPDATE (24/11/2021)

No solution found yet. I can run my app when deleting most of my app.js -file. I can keep all imports, set all variables and render something but take a look at this...

This is able to run:

render() {

        const LoadingRootStack  = createStackNavigator();

        return (
            <NavigationContainer linking={linking} fallback={<Text>Loading...</Text>}>
                <View>
                    <Text>hello world</Text>
                </View>
            </NavigationContainer>
        );

    }

But this is causing the error above:

render() {

        const LoadingRootStack  = createStackNavigator();

        return (
            <NavigationContainer linking={linking} fallback={<Text>Loading...</Text>}>
                <View>
                    <Text>hello world</Text>
                </View>

                <LoadingRootStack.Navigator initialRouteName="Loading">
                    <LoadingRootStack.Screen name="Loading" component={LoadingStack} options={{headerShown:false}}/>
                </LoadingRootStack.Navigator>

            </NavigationContainer>
        );

    }

I have checked the installation for createStackNavigator / @react-navigation/stack but everything seems fine...

Please help me: :-)

Answer 1

I had the same problem not long ago - please, if anyone knows something, speak up <3

Answer 2

I've reached Simon on reddit and we solved the issue.

The project had misconfigured navigation and Android project had lots of leftovers from older versions of React Native. Also the project wasn't jetified .

The weirdest part was that after project cleanup and properly configured navigation the bug still persisted. What potentially fixed it was the implementation of Multidex on MainApplication.java and removal of import com.facebook.react.shell.MainReactPackage

+ import androidx.multidex.MultiDex;
- import com.facebook.react.shell.MainReactPackage;

+   @Override
+      protected void attachBaseContext(Context base) {
+          super.attachBaseContext(base);
+          MultiDex.install(this);
+      }

android/app/build.gradle

defaultConfig {
        applicationId "xxxxx"
        minSdkVersion rootProject.ext.minSdkVersion
        targetSdkVersion rootProject.ext.targetSdkVersion
        versionCode 1
        versionName "1.0"
        multiDexEnabled true 
    }

...

dependencies {
     implementation 'androidx.multidex:multidex:2.0.1'
...
}