search

software-mansion / react-native-gesture-handler

Declarative API exposing platform native touch and gesture system to React Native.
https://docs.swmansion.com/react-native-gesture-handler/
MIT License
5.85k stars 954 forks source link

[Android] [RN 0.56.0] Invariant Violation: requireNativeComponent: "GestureHandlerRootView" was not found in the UIManager. #238

Closed VSchlattinger closed 5 years ago

VSchlattinger commented 5 years ago

I'm getting the following error when starting my App on Android (in Debug) with RN 0.56.0:

error

Is anyone else seeing this error, or has seen it before?

Some additional information

I'm using react-native-navigation and followed the guide to replace my Views with gestureHandlerRootHOC(…) in Navigation.registerComponent(…).

I'm starting a tab-based App (Navigation.startTabBasedApp(…)), where Profile is the last tab. If I remove Profile, the now last tab will be where the error occurs.

I made Profile render just a single View. If there are nested Views, the Error occurs in the first Component without children.

mars-lan commented 5 years ago

@kmagiera

https://github.com/kmagiera/react-native-gesture-handler/pull/199 seems to be the culprit. Still need a ViewManager to expose RNGestureHandlerRootView to JS side.

mahgolfa commented 5 years ago

same error on iOS hasn't anybody solved this issue yet ?

kmagiera commented 5 years ago

Ah, looks like @mars-lan is right. We should revert the change that removed view manager for GestureHandlerRootView. Should have a fix ready shortly

kmagiera commented 5 years ago

Thanks @VSchlattinger for reporting and @mars-lan for taking your tie and digging up the solution.

I submitted a PR with a fix here #245 – has anyone here have some time to test it?

VSchlattinger commented 5 years ago

@kmagiera Thanks! I will test tomorrow and report back.

mars-lan commented 5 years ago

@kmagiera thanks for the quick turnaround. I can confirmed that the error has been fixed.

VSchlattinger commented 5 years ago

I can also confirm that the problem is fixed with https://github.com/kmagiera/react-native-gesture-handler/pull/245. 🎉

kmagiera commented 5 years ago

Just published 1.0.6 that includes this fix. Thanks everyone for reporting and testing the fix!

MuhammadArsalan472121 commented 2 years ago

just Install This lib: yarn add react-native-safe-area-context it worked for me every time

GuilhermeCunha-Sid commented 2 years ago

npm install --save react-native-gesture-handler or: yarn add react-native-gesture-handler

and: react-native link react-native-gesture-handler

chalie86 commented 2 years ago

am geting the error npm start

moviemobile@1.0.0 start expo start

WARNING: expo-cli has not yet been tested against Node.js v17.6.0. If you encounter any issues, please report them to https://github.com/expo/expo-cli/issues

expo-cli supports following Node.js versions:

Starting project at /home/native/Documents/nativeApp/MovieMobile Developer tools running on http://localhost:19002 Some dependencies are incompatible with the installed expo package version:

› Metro waiting on exp://192.168.8.152:19000 › Scan the QR code above with Expo Go (Android) or the Camera app (iOS)

› Press a │ open Android › Press w │ open web

› Press r │ reload app › Press m │ toggle menu › Press d │ show developer tools › shift+d │ toggle auto opening developer tools on startup (disabled)

› Press ? │ show all commands

Logs for your project will appear below. Press Ctrl+C to exit. › Reloading apps Android Bundling complete 6653ms Android Running app on SM-A115F

[react-native-gesture-handler] Seems like you're using an old API with gesture components, check out new Gestures system! at node_modules/react-native-gesture-handler/src/handlers/createHandler.ts:153:4 in showRngh2NoticeIfNeeded at node_modules/react-native-gesture-handler/src/handlers/createHandler.ts:203:31 in Handler#constructor at node_modules/react-native/Libraries/ReactNative/renderApplication.js:58:4 in renderApplication at node_modules/react-native/Libraries/ReactNative/AppRegistry.js:117:25 in runnables.appKey.run at node_modules/react-native/Libraries/ReactNative/AppRegistry.js:202:4 in runApplication

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

This error is located at: in RNGestureHandlerRootView (created by GestureHandlerRootView) in GestureHandlerRootView (created by StackView) in StackView (created by StackView) in StackView in Unknown (created by Navigator) in Navigator (created by NavigationContainer) in NavigationContainer (created by ExpoRoot) in ExpoRoot in RCTView (created by View) in View (created by AppContainer) in RCTView (created by View) in View (created by AppContainer) in AppContainer at node_modules/react-native/Libraries/Core/ExceptionsManager.js:104:6 in reportException at node_modules/react-native/Libraries/Core/ExceptionsManager.js:172:19 in handleException at node_modules/react-native/Libraries/Core/ReactFiberErrorDialog.js:43:2 in showErrorDialog at node_modules/react-native/Libraries/ReactNative/renderApplication.js:58:4 in renderApplication at node_modules/react-native/Libraries/ReactNative/AppRegistry.js:117:25 in runnables.appKey.run at node_modules/react-native/Libraries/ReactNative/AppRegistry.js:202:4 in runApplication

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

This error is located at: in NavigationContainer (created by ExpoRoot) in ExpoRoot in RCTView (created by View) in View (created by AppContainer) in RCTView (created by View) in View (created by AppContainer) in AppContainer at node_modules/react-native/Libraries/Core/ExceptionsManager.js:104:6 in reportException at node_modules/react-native/Libraries/Core/ExceptionsManager.js:172:19 in handleException at node_modules/react-native/Libraries/Core/ReactFiberErrorDialog.js:43:2 in showErrorDialog at node_modules/react-native/Libraries/ReactNative/renderApplication.js:58:4 in renderApplication at node_modules/react-native/Libraries/ReactNative/AppRegistry.js:117:25 in runnab

i delete node_module and did the installation npm install --save react-native-gesture-handler

Naga31 commented 2 years ago

am geting the error npm start

moviemobile@1.0.0 start expo start

WARNING: expo-cli has not yet been tested against Node.js v17.6.0. If you encounter any issues, please report them to https://github.com/expo/expo-cli/issues

expo-cli supports following Node.js versions:

  • =12.13.0 <13.0.0 (Maintenance LTS)

  • =14.0.0 <15.0.0 (Active LTS)

  • =15.0.0 <17.0.0 (Current Release)

Starting project at /home/native/Documents/nativeApp/MovieMobile Developer tools running on http://localhost:19002 Some dependencies are incompatible with the installed expo package version:

  • react-native-gesture-handler - expected version: ~2.1.0 - actual version installed: 2.3.0
  • react-native-safe-area-context - expected version: 3.3.2 - actual version installed: 4.1.2 Your project may not work correctly until you install the correct versions of the packages. To install the correct versions of these packages, please run: expo doctor --fix-dependencies, or install individual packages by running expo install [package-name ...] Starting Metro Bundler ▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄ █ ▄▄▄▄▄ █▄▀▀▄▄ ██ █ ▄▄▄▄▄ █ █ █ █ ███▄█ ▄▄█ █ █ █ █ █▄▄▄█ ██▄▀▄▀▀██▀█ █▄▄▄█ █ █▄▄▄▄▄▄▄█ █ ▀▄▀ ▀ █▄▄▄▄▄▄▄█ █ ▄▀ ▀▄█▀ ▄▄▀▀█▀ █▄█▀█▀▀▄█ ██ ▄ ▄ ▄▄ ▀ ▀▄▄▄▀▀███▄▀▀ █ █ █ █▄▄ ▀▄█▄▄▀▄▀█ ▄▀▀█▀ ██ █ ▄██ ▄▄ ▄██ ▄▄█ ▄▀ ██▄▀ █ █▄█▄██▄▄█ █▀▀ █ ▄▄▄ ▄▀▄█ █ ▄▄▄▄▄ ██▄▄▄ ▄█ █▄█ ██▀ █ █ █ █ █ ▄ ▀▀██▄ ▄ ▄ █▀▀█ █ █▄▄▄█ █▀▀ █▄ ▄█▀▀▄█ █ █▄▄▄▄▄▄▄█▄▄█▄██▄▄▄▄█▄▄███▄█

› Metro waiting on exp://192.168.8.152:19000 › Scan the QR code above with Expo Go (Android) or the Camera app (iOS)

› Press a │ open Android › Press w │ open web

› Press r │ reload app › Press m │ toggle menu › Press d │ show developer tools › shift+d │ toggle auto opening developer tools on startup (disabled)

› Press ? │ show all commands

Logs for your project will appear below. Press Ctrl+C to exit. › Reloading apps Android Bundling complete 6653ms Android Running app on SM-A115F

[react-native-gesture-handler] Seems like you're using an old API with gesture components, check out new Gestures system! at node_modules/react-native-gesture-handler/src/handlers/createHandler.ts:153:4 in showRngh2NoticeIfNeeded at node_modules/react-native-gesture-handler/src/handlers/createHandler.ts:203:31 in Handler#constructor at node_modules/react-native/Libraries/ReactNative/renderApplication.js:58:4 in renderApplication at node_modules/react-native/Libraries/ReactNative/AppRegistry.js:117:25 in runnables.appKey.run at node_modules/react-native/Libraries/ReactNative/AppRegistry.js:202:4 in runApplication

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

This error is located at: in RNGestureHandlerRootView (created by GestureHandlerRootView) in GestureHandlerRootView (created by StackView) in StackView (created by StackView) in StackView in Unknown (created by Navigator) in Navigator (created by NavigationContainer) in NavigationContainer (created by ExpoRoot) in ExpoRoot in RCTView (created by View) in View (created by AppContainer) in RCTView (created by View) in View (created by AppContainer) in AppContainer at node_modules/react-native/Libraries/Core/ExceptionsManager.js:104:6 in reportException at node_modules/react-native/Libraries/Core/ExceptionsManager.js:172:19 in handleException at node_modules/react-native/Libraries/Core/ReactFiberErrorDialog.js:43:2 in showErrorDialog at node_modules/react-native/Libraries/ReactNative/renderApplication.js:58:4 in renderApplication at node_modules/react-native/Libraries/ReactNative/AppRegistry.js:117:25 in runnables.appKey.run at node_modules/react-native/Libraries/ReactNative/AppRegistry.js:202:4 in runApplication

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

This error is located at: in NavigationContainer (created by ExpoRoot) in ExpoRoot in RCTView (created by View) in View (created by AppContainer) in RCTView (created by View) in View (created by AppContainer) in AppContainer at node_modules/react-native/Libraries/Core/ExceptionsManager.js:104:6 in reportException at node_modules/react-native/Libraries/Core/ExceptionsManager.js:172:19 in handleException at node_modules/react-native/Libraries/Core/ReactFiberErrorDialog.js:43:2 in showErrorDialog at node_modules/react-native/Libraries/ReactNative/renderApplication.js:58:4 in renderApplication at node_modules/react-native/Libraries/ReactNative/AppRegistry.js:117:25 in runnab

i delete node_module and did the installation npm install --save react-native-gesture-handler

Facing the same issue

nareg-na commented 2 years ago

delete the node modules, run expo install and then expo install react-native-gesture-handler

williamheelis commented 2 years ago

npm install --save react-native-gesture-handler

I did this and it fixed it, I don't use expo though so for me it was just npm i

android-imdad commented 2 years ago

After a week of trying various solutions, I had to add the following in the android/build.gradle and then do an "npx react-native run-android" to fix this issue (typing it here so it might help someone else)

buildscript { ext { ... kotlinVersion = "1.5.20" } }

Rutvik17 commented 1 year ago 
Invariant Violation: requireNativeComponent: "RNGestureHandlerRootView" was not found in the UIManager.

This error is located at:
    in RNGestureHandlerRootView (created by GestureHandlerRootView)
    in GestureHandlerRootView
    in StyledNativeComponent (created by Styled(GestureHandlerRootView))
    in Styled(GestureHandlerRootView) (created by Slider)
    in Slider (created by ShiftClock)
    in RCTView (created by View)
    in View (created by ShiftClock)
    in ShiftClock (created by SceneView)
    in StaticContainer
    in EnsureSingleNavigator (created by SceneView)
    in SceneView (created by SceneView)
    in RCTView (created by View)
    in View (created by DebugContainer)
    in DebugContainer (created by MaybeNestedStack)
    in MaybeNestedStack (created by SceneView)
    in RNSScreen (created by AnimatedComponent)
    in AnimatedComponent
    in AnimatedComponentWrapper (created by Screen)
    in MaybeFreeze (created by Screen)
    in Screen (created by SceneView)
    in SceneView (created by NativeStackViewInner)
    in RNSScreenStack (created by ScreenStack)
    in ScreenStack (created by NativeStackViewInner)
    in NativeStackViewInner (created by NativeStackView)
    in RCTView (created by View)
    in View (created by SafeAreaInsetsContext)
    in SafeAreaProviderCompat (created by NativeStackView)
    in NativeStackView (created by NativeStackNavigator)
    in Unknown (created by NativeStackNavigator)
    in NativeStackNavigator (created by ShiftClockNavigator)
    in ShiftClockNavigator (created by SceneView)
    in StaticContainer
    in EnsureSingleNavigator (created by SceneView)
    in SceneView (created by BottomTabView)
    in RCTView (created by View)
    in View (created by Screen)
    in RCTView (created by View)
    in View (created by Background)
    in Background (created by Screen)
    in Screen (created by BottomTabView)
    in RNSScreen (created by AnimatedComponent)
    in AnimatedComponent
    in AnimatedComponentWrapper (created by Screen)
    in MaybeFreeze (created by Screen)
    in Screen (created by MaybeScreen)
    in MaybeScreen (created by BottomTabView)
    in RNSScreenContainer (created by ScreenContainer)
    in ScreenContainer (created by MaybeScreenContainer)
    in MaybeScreenContainer (created by BottomTabView)
    in RNCSafeAreaProvider (created by SafeAreaProvider)
    in SafeAreaProvider (created by SafeAreaInsetsContext)
    in SafeAreaProviderCompat (created by BottomTabView)
    in BottomTabView (created by BottomTabNavigator)
    in Unknown (created by BottomTabNavigator)
    in BottomTabNavigator (created by BottomTabNavigator)
    in BottomTabNavigator (created by Main)
    in EnsureSingleNavigator
    in BaseNavigationContainer
    in ThemeProvider
    in NavigationContainerInner (created by Main)
    in Unknown
    in Unknown (created by CachePersistProvider)
    in CachePersistProvider (created by Main)
    in Main (created by ExpoRoot)
    in ExpoRoot
    in RCTView (created by View)
    in View (created by AppContainer)
    in RCTView (created by View)
    in View (created by AppContainer)
    in AppContainer
    in main(RootComponent)
at node_modules/@sentry/utils/dist/instrument.js:111:20 in <anonymous>
at node_modules/react-native/Libraries/Core/ExceptionsManager.js:95:4 in reportException
at node_modules/react-native/Libraries/Core/ExceptionsManager.js:141:19 in handleException
at node_modules/react-native/Libraries/Core/ReactFiberErrorDialog.js:52:4 in showErrorDialog
at src/Main.tsx:38:17 in loadFonts

Possible Unhandled Promise Rejection (id: 0):
Invariant Violation: requireNativeComponent: "RNGestureHandlerRootView" was not found in the UIManager.

Can anyone help ?

abhidatta0 commented 1 year ago

This issue i had when using react-navigation in a project .Installing gesture-handle library solved this. import 'react-native-gesture-handler'

AnatuGreen commented 1 year ago

@abhidatta0 It did not solve it for me. my app works fine when I use Expo Go but I keep getting the error when I run the developer build of the app: Invariant Violation: requireNativeComponent: "RNGestureHandlerRootView" was not found in the UIManager.

eatanga-git commented 1 year ago

@AnatuGreen same issue, noticed it in the dev build

gabrielmcg44 commented 1 year ago

@AnatuGreen same here. Also I am using expo-router, so i do not have an app.tsx file to put import 'react-native-gesture-handler' as some solutions suggests.

gabrielmcg44 commented 1 year ago

Solved it here!

My problem was that the build was broken.

When I tried expo run:android i received an error on the "expo-modules-core" step. Which required me to install it and create a path to the sdk as discussed here: https://stackoverflow.com/questions/32634352/react-native-android-build-failed-sdk-location-not-found

The part involving react-native-gesture-handler was some steps further so thats why it was failing on android build. So I recommend to run expo run:android with success before creating the build with:

eas build --profile development --platform android

this command will give you a link to download the APK on the device after "Open this link on your Android devices (or scan the QR code) to install the app:"

than you download, install it and run the app with:

npx expo start --dev-client

press "a" to open it on android and choose the build option if you are prompted to choose between it and expo go.

Voila it worked for me, hope it helps someone

chinmay542 commented 1 year ago

If you are a non-expo user, delete the node_modules and do the npm install again. For react-native version < 0.60, after the npm install, run the command react-native link.

eatanga-git commented 1 year ago

Solved it here!

My problem was that the build was broken.

When I tried expo run:android i received an error on the "expo-modules-core" step. Which required me to install it and create a path to the sdk as discussed here: https://stackoverflow.com/questions/32634352/react-native-android-build-failed-sdk-location-not-found

The part involving react-native-gesture-handler was some steps further so thats why it was failing on android build. So I recommend to run expo run:android with success before creating the build with:

eas build --profile development --platform android

this command will give you a link to download the APK on the device after "Open this link on your Android devices (or scan the QR code) to install the app:"

than you download, install it and run the app with:

npx expo start --dev-client

press "a" to open it on android and choose the build option if you are prompted to choose between it and expo go.

Voila it worked for me, hope it helps someone

Dou you think this will work if I'm justing using the regular Expo Dev Build (expo start --dev-client)? this is an app that I want to publish and submit to google play and the apple app store.

EDIT: I tried this, and it did not work.

eatanga-git commented 1 year ago

Any solution to this?

shahid37 commented 9 months ago

After a week of trying various solutions, I had to add the following in the android/build.gradle and then do an "npx react-native run-android" to fix this issue (typing it here so it might help someone else)

buildscript { ext { ... kotlinVersion = "1.5.20" } }

Thanks bro.