react-native-bottom-sheet: App crashes without GestureHandlerRootView

Bug

I’m not sure when this started to happened exactly but my app crashes by throwing following errors :

Error: PanGestureHandler 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 PanGestureHandler (created by BottomSheetDraggableViewComponent)
    in BottomSheetDraggableViewComponent (created by BottomSheet)
    in RCTView (created by View)
    in View (created by AnimatedComponent(View))
    in AnimatedComponent(View)
    in Unknown (created by BottomSheet)
    in RCTView (created by View)
    in View (created by AnimatedComponent(View))
    in AnimatedComponent(View)
    in Unknown (created by BottomSheet)
    in RCTView (created by View)
    in View (created by BottomSheetContainerComponent)
    in BottomSheetContainerComponent (created by BottomSheet)
    in BottomSheetGestureHandlersProvider (created by BottomSheet)
    in BottomSheet (created by BottomSheet)
    in PortalHostComponent (created by PortalProviderComponent)
    in PortalProviderComponent (created by BottomSheetModalProviderWrapper)
    in BottomSheetModalProviderWrapper (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 AwesomeProject(RootComponent), js engine: hermes
 ERROR  Error: PanGestureHandler 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 PanGestureHandler (created by BottomSheetHandleContainerComponent)
    in BottomSheetHandleContainerComponent (created by BottomSheet)
    in RCTView (created by View)
    in View (created by AnimatedComponent(View))
    in AnimatedComponent(View)
    in Unknown (created by BottomSheet)
    in RCTView (created by View)
    in View (created by BottomSheetContainerComponent)
    in BottomSheetContainerComponent (created by BottomSheet)
    in BottomSheetGestureHandlersProvider (created by BottomSheet)
    in BottomSheet (created by BottomSheet)
    in PortalHostComponent (created by PortalProviderComponent)
    in PortalProviderComponent (created by BottomSheetModalProviderWrapper)
    in BottomSheetModalProviderWrapper (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 AwesomeProject(RootComponent), js engine: hermes
 ERROR  Error: PanGestureHandler 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 PanGestureHandler (created by BottomSheetDraggableViewComponent)
    in BottomSheetDraggableViewComponent (created by BottomSheet)
    in RCTView (created by View)
    in View (created by AnimatedComponent(View))
    in AnimatedComponent(View)
    in Unknown (created by BottomSheet)
    in RCTView (created by View)
    in View (created by AnimatedComponent(View))
    in AnimatedComponent(View)
    in Unknown (created by BottomSheet)
    in RCTView (created by View)
    in View (created by BottomSheetContainerComponent)
    in BottomSheetContainerComponent (created by BottomSheet)
    in BottomSheetGestureHandlersProvider (created by BottomSheet)
    in BottomSheet (created by BottomSheet)
    in PortalHostComponent (created by PortalProviderComponent)
    in PortalProviderComponent (created by BottomSheetModalProviderWrapper)
    in BottomSheetModalProviderWrapper (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 AwesomeProject(RootComponent), js engine: hermes

Environment info

I know bottom sheet is only compatible with react reanimated v2 but I’ve been using the latest version of all libraries without any problem when I use bottom sheet modal. I also tried to downgrade react-reanimated to 2.x in case it’s a compatibility issue yet the result is same. Furthermore I tried to install react native from scratch and installed only bottom-sheet, reanimated and gesture handler other than react-native (with recommended versions). Again, it doesn’t work

Library	Version
@gorhom/bottom-sheet	4.4.6
react-native	0.71.8
react-native-reanimated	3.2.0
react-native-gesture-handler	2.10.2

Steps To Reproduce

Install a fresh react native app and bottom-sheet along with dependencies
Use the basic bottom sheet modal code that is provided in documentation
App is getting crashed if bottomsheetmodalprovider is not wrapped with <GestureHandlerRootView style={{ flex: 1 }}>

Describe what you expected to happen:

As in documentation, using only bottomsheetmodalprovider and bottom sheet modal inside of it without using extra wrappers.

Reproducible sample code

Using the following sample code provided in documentation on a freshly installed react native app : https://gorhom.github.io/react-native-bottom-sheet/modal/usage

The final question is, does wrapping the app with <GestureHandlerRootView style={{ flex: 1 }}> has any side effects?

About this issue

Original URL
State: closed
Created a year ago
Reactions: 4
Comments: 20

Most upvoted comments

@MensurRasic Yes, it’s actually mentioned in Installation step of documentation (blue highlighted box), but honestly never needed before : https://gorhom.github.io/react-native-bottom-sheet/

This way it works just fine :

import { BottomSheetModalProvider } from '@gorhom/bottom-sheet'
import { GestureHandlerRootView } from 'react-native-gesture-handler'

const App = () => {
  return (
        <GestureHandlerRootView style={{ flex: 1 }}>
            <BottomSheetModalProvider>
              <AppContent />
            </BottomSheetModalProvider>
        </GestureHandlerRootView>
  )
}

+161

mertafor on Sep 22, 2023

import {GestureHandlerRootView} from ‘react-native-gesture-handler’

djmarcosban on Sep 21, 2023

import {GestureHandlerRootView} from ‘react-native-gesture-handler’, then wrap your swipable component with GestureHandlerRootView.

joviksdev on Aug 3, 2023

Expo Project— I faced the same issue and attempted to solve it by wrapping everything inside app.js with GestureHandlerRootView. Additionally, I imported “react-native-gesture-handler” at the top of app.js. what more can I do? Any help would be appreciated

I tried various solutions, but nothing seemed to work. Eventually, I was able to successfully resolve the issue by downgrading my react-native-gesture-handler to version 2.9.0.

MaryamKhan05 on Aug 16, 2023

Also got this issue after I upgrade reanimated to v3 and react-native-gesture-handler from 2.9 to 2.12, the above solution works.

Arch1tect on Jul 15, 2023

@MaryamKhan05 wrapping the whole app worked for me when upgrading an expo project - but had to make sure that the gesture handler root view was the parent of some other providers (<PortalProvider/> specifically)

iway1 on Sep 7, 2023

i face the same issue 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.

i resolved this issue my importing FlatList from react-native instead of gensture handeler

numannaqvi on Aug 26, 2023

Hey, got exactly the same issue here, the error appeared out of no where. How did you fixed it on your side? You wrapped the whole app with GestureHandlerRootView?

MensurRasic on Jun 27, 2023