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