1

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! :-)

Simon Degn
  • 901
  • 1
  • 12
  • 40
  • 1
    Did you try closing your all processes and running only for android? and some additional step - `cd android && ./gradlew` – Anuj Raghuvanshi Nov 20 '21 at 17:30
  • @AnujRaghuvanshi yes and I just did it again without any luck.. :-) – Simon Degn Nov 20 '21 at 17:42
  • 1
    Have you gone through all possible solutions mentioned here ?https://stackoverflow.com/questions/66921263/invariant-violation-requirenativecomponent-rnsscreen-was-not-found-in-the-ui – Anuj Raghuvanshi Nov 20 '21 at 18:09
  • 1
    @AnujRaghuvanshi yes. I mention this in the question. I've tried all possible solutions without any changes. – Simon Degn Nov 20 '21 at 18:23
  • 1
    https://github.com/software-mansion/react-native-screens/issues/885#issuecomment-818682730 – Anuj Raghuvanshi Nov 20 '21 at 19:33
  • @AnujRaghuvanshi unfortunately not working either. I've been through the full list of suggestions on that thread as well. But thanks – Simon Degn Nov 20 '21 at 20:58
  • 2
    @SimonDegn I was facing similar error. And was using latest version `react-native-screens`. But some dependencies required older version of `react-native-screens`. After downgrading to appropriate version, it worked. – Sanjay Kochrekar Nov 21 '21 at 05:41
  • @SanjayKochrekar which version did you downgrade react-native-screens to? I've tried 3.9.0 andd 3.1.1 without any luck. – Simon Degn Nov 21 '21 at 09:58
  • 1
    @SimonDegn I tried some of the major release. You can try like this 2.x.x. As I was working on older project, some dependency using older version. I checked which module using `react-native-screens` in dependency section of 'npmjs.com'. And according release date I used `react-native-screens`. – Sanjay Kochrekar Nov 21 '21 at 10:22
  • @SanjayKochrekar I tried all day to make the application run with a 2.18.1 of the react-native-screens. This caused a snowball-effect of dependency-issues with other libraries and I never made it run. I'm not sure if the version is the problem since I now tested an older version of my package.json with a 3.7.2 version of the react-native-screen that has worked for weeks but I still get the "RNSScreen was not found in the UIManager."-error. – Simon Degn Nov 21 '21 at 14:58
  • 1
    @SimonDegn can you post full error message – Sanjay Kochrekar Nov 21 '21 at 17:05
  • @SanjayKochrekar the full error message is added to the original question now. – Simon Degn Nov 21 '21 at 17:49
  • @SanjayKochrekar any suggestions? :-) – Simon Degn Nov 22 '21 at 14:20
  • I opened this issue - if anyone is interested: https://github.com/software-mansion/react-native-screens/issues/1221 – Simon Degn Nov 24 '21 at 23:33
  • @SimonDegn can you provide reproducible example in git repo – Muhammad Numan Nov 26 '21 at 07:06

1 Answers1

4

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'
...
}
Stathis Ntonas
  • 1,222
  • 2
  • 20
  • 49
  • is this just a workaround? – Heaven Apr 26 '22 at 04:34
  • @Heaven it's hard to know, project had many issues. May I ask why you are asking? – Stathis Ntonas Apr 26 '22 at 12:47
  • 1
    I also encountered this problem, too. But I was another issue. I encountered this issue after I upgraded the RN from 0.64.2 to 0.68.1 and some related packages. But I fixed it by adding `RNScreensPackage` to `getPackages()` inside MainApplication. Therefore, my issue was caused by upgrading the package. – Heaven Apr 27 '22 at 09:31
  • I have the same problem, but I don't have this package MainReactPackage in MainApplication.java and after adding attachBaseContext method i get the error: "error: method does not override or implement a method from a supertype @Override". Don't understand how this decision solved the error – jocoders Oct 13 '22 at 06:27
  • @StathisNtonas Hey Στάθη. I am having the same issue for my thesis. If you could probably help me I will be glad. I am using expo cli. – apanay22 Feb 27 '23 at 16:56
  • @apanay22 it’s really difficult to help without context, this is actually a common error, have you found anything on google? – Stathis Ntonas Feb 28 '23 at 19:27
  • @StathisNtonas No worries I fixed the issue! Thanks though for answering! – apanay22 Mar 10 '23 at 21:24