NativeViewGestureHandler must be used as a descendant of GestureHandlerRootView

[eharmshoagie]

Description

Hi,

I am being plagued with the following error, it seems to come out of nowhere. When it starts happening on one device, every other device and simulator I use gets affected.

ERROR Error: NativeViewGestureHandler must be used as a descendant of GestureHandlerRootView. Otherwise the gestures will not be recognized. See https://docs.swmansion.com/react-native-gesture-handler/docs/installation for more details.

This error is located at:
in NativeViewGestureHandler (created by RNGestureHandlerButton)
in RNGestureHandlerButton (created by InnerBaseButton)
in InnerBaseButton
in Unknown (created by GenericTouchable)
in GenericTouchable
in Unknown (created by CrashPage)
in RCTView (created by View)
in View
in StyledNativeComponent (created by Styled(View))
in Styled(View) (created by CrashPage)
in CrashPage (created by ErrorBoundary)
in ErrorBoundary (created by App)
in RecoilRoot_INTERNAL (created by RecoilRoot)
in RecoilRoot (created by App)
in QueryClientProvider (created by App)
in ThemeProvider (created by App)
in DatadogProvider (created by App)
in App
in RCTView (created by View)
in View (created by AppContainer)
in RCTView (created by View)
in View (created by AppContainer)
in AppContainer
in POC(RootComponent), js engine: hermes

We use the GestureHandlerRootView in one screen that looks like this, but the error appears everywhere else in our app.

I've done the following with unpredictable results.

• delete npm modules
• delete pods, podfile.lock
• xcode clean project
• delete DerivedData folder
• android studio clean project
• reboot computer, all devices

In this instance today, I have the following code

• in my screen
  const safe = safeToLowerCase(email);

• in a helper file string.ts
  export const safeToLowerCase = (str: string) => str?.toLowerCase() || '';

If I remove the safeToLowerCase() in my screen, the error does not happen. It makes no sense - If i leave the code in, when I try my other devices and simulators it starts to happen in the same place, even though it was not happening on that device previously. Moving safeToLowerCase to my screen .tsx has no effect.

This happens with iOS and Android.

I've viewed the 1 issue on this repo that mentions a similar issue
#2488

Ive removed all TouchableOpacity's and ScrollViews that import from react-native-gesture-handler, only the one instance in my screenshot above is using the library.

Also moved the RootView to our App.tsx

I feel like once the error happens, something is getting stored or cached in the codebase, as it infects all my other devices at exactly the same place once it starts happening on one device or simulator.

Any help would be amazing, I'm losing so much time fighting this.

Steps to reproduce

I don't have a reproducible scenario

Snack or a link to a repository

I cannot reproduce the issue it happens randomly

Gesture Handler version

2.18.0

React Native version

0.73.9

Platforms

iOS

JavaScript runtime

Hermes

Workflow

React Native (without Expo)

Architecture

Paper (Old Architecture)

Build type

Debug mode

Device

Real device

Device model

iphone 13, samsung galaxy s9, pixel 3

Acknowledgements

Yes

[github-actions]

Hey! 👋

The issue doesn't seem to contain a minimal reproduction.

Could you provide a snack or a link to a GitHub repository under your username that reproduces the problem?

[m-bert]

Hi @eharmshoagie! Please provide reproducible example. Unfortunately those screenshots do not show much of your code.

Are you sure you've wrapped your app with GestureHandlerRootView? It looks like there's a piece of code that uses Gesture Handler that is not inside GestureHandlerRootView (maybe a modal?).

[eharmshoagie]

hi @m-bert -- unfortunately I don't have any reproducible code to provide. As I mentioned at the time I opened the ticket it was not wrapped around our app, it was being used in one screen. I did try moving it to our App.tsx and wrapping the app there. Still getting same results.

However I think whats happening, whenever our app throws an error, its not showing me the actual error. Instead, the error message we see is from NativeViewGestureHandler. It as if the NativeViewGestureHandler error is overriding any other error messages we should be seeing, or - any error in our app is throwing the NativeViewGestureHandler error.

Could that be possible?

[j-piasecki]

However I think whats happening, whenever our app throws an error, its not showing me the actual error. Instead, the error message we see is from NativeViewGestureHandler. It as if the NativeViewGestureHandler error is overriding any other error messages we should be seeing, or - any error in our app is throwing the NativeViewGestureHandler error.

It looks like this is kind of what's happening. From the screenshots, it looks like you've added GestureHandlerRootView between the error boundary and the navigation container, but the stack trace suggests that the error is thrown inside the error boundary.

It's very likely that you (or another library you're using) are rendering a button or a touchable from Gesture Handler on your CrashPage component. Could you try moving the GestureHandlerRootView higher in the hierarchy (preferably to the very top)?