[Bug]: [v5]GestureDetector must be used as a descendant of GestureHandlerRootView

[franamu]

Version

v5

Reanimated Version

v3

Gesture Handler Version

v2

Platforms

iOS, Android

What happened?

Error: GestureDetector 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.

Plataform: IOS, Android

On Web works fine

Reproduction steps

• When trigger the event to show de component BottomSheet crash the app.

Reproduction sample

https://snack.expo.dev/@franamu/bottom-sheet---issue-reproduction-template

Relevant log output

GestureDetector 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.

On web works fine:

[rajangargsmartdata]

I got it too. any solution?

Update:- I missed one step to wrap app with these

<GestureHandlerRootView>
       <BottomSheetModalProvider>
{app}
       </BottomSheetModalProvider>
</GestureHandlerRootView>

Now working fine

[fabricioferiozzi96]

I have the same problem

[conor909]

@fabricioferiozzi96 Your <BottomSheetProvider> is not a child of <GestureHandlerRootView style={{ flex: 1 }}>

[gorhom]

i have updated the docs to include GestureHandlerRootView with every example

https://gorhom.dev/react-native-bottom-sheet/usage

[franamu]

@gorhom @rajangargsmartdata thank you! works fine in all plataforms, but the behavior is different nonetheless.

Without GestureHandlerRootView
(I need this behavior)

Grabacion.de.pantalla.2024-10-21.a.la.s.12.07.51.p.m.mov

With GestureHandlerRootView:

Grabacion.de.pantalla.2024-10-21.a.la.s.12.04.25.p.m.mov

If I change the color, it's the same because the GestureHandlerRootView container doesn't leave until bottomSheetRef.current?.close(); event finishes.

[bcliffor]

@gorhom thanks for all the work on the library!

I just stumbled across this error and I believe it was because in the modal usage example the order of the BottomSheetModalProvider and GestureHandlerRootView is swapped. Works fine once I corrected that. I wanted to point that out incase the documentation does indeed need to be updated to remove confusion.

https://gorhom.dev/react-native-bottom-sheet/modal/usage