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
@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 {GestureHandlerRootView} from ‘react-native-gesture-handler’
<GestureHandlerRootView style={{flex: 1}}>{YOUR APP}</GestureHandlerRootView>
import {GestureHandlerRootView} from ‘react-native-gesture-handler’, then wrap your swipable component with GestureHandlerRootView.
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.
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.
@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)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
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?