PanGestureHandler must be used as a descendant of GestureHandlerRootView Render Error

Question

I'm using the popular package @gorhom/bottom-sheet for a bottom sheet in React Native documented here. However, I am getting the above error when trying to present the modal.

The above error suggests that I must have a PanGestureHandler as a descendant of the GestureHandlerRootView however, this also crashes the app.

APP.JS:

return (
  <BottomSheetModalProvider>
    <NavigationContainer>
      {user ? <AuthorizedLayout /> : <UnauthorizedLayout />}
    </NavigationContainer>
  </BottomSheetModalProvider>
);

MY MODAL SCREEN

return (
    <>
      {loading ? (
        <ExploreSkeleton />
      ) : (
        <>
          <ExploreHeader
            userData={userData}
            presentCityModal={presentCityModal}
          />
          <FlatList
            data={venues}
            ListHeaderComponent={listHeaderComponent}
            renderItem={renderItem}
            ListFooterComponent={listFooterComponent}
            contentContainerStyle={styles.contentContainerStyle}
            onEndReached={getMoreVenues}
            onEndReachedThreshold={0.5}
          />
          <GestureHandlerRootView>
            <BottomSheetModal snapPoints={snapPoints} ref={bottomSheetModalRef}>
              <View>
                <Text>TESTING MODAL</Text>
              </View>
            </BottomSheetModal>
          </GestureHandlerRootView>
        </>
      )}
    </>
  );

I HAVE TRIED:

<GestureHandlerRootView>
   <PanGestureHandler>
     <BottomSheetModal
       snapPoints={snapPoints}
       ref={bottomSheetModalRef}>
       <View>
         <Text>TESTING MODAL</Text>
       </View>
     </BottomSheetModal>
   </PanGestureHandler>
 </GestureHandlerRootView>

But this gives me;

Argument appears to not be a ReactComponent.

Answer 1

You should add GestureHandlerRootView to APP.JS, not just only wrap PanGestureHandler:

return (
  <BottomSheetModalProvider>
    <NavigationContainer>
      <GestureHandlerRootView> // <== add this
        {user ? <AuthorizedLayout /> : <UnauthorizedLayout />}
      </GestureHandlerRootView> // <== add this
    </NavigationContainer>
  </BottomSheetModalProvider>
);

Answer 2

Found the answer here. You need to have the <GestureHandlerRootView> before the <BottomSheetModalProvider>

Code below;

APP.JS

return (
    <GestureHandlerRootView style={{ flex: 1 }}>
      <BottomSheetModalProvider>
        <NavigationContainer>
          {user ? <AuthorizedLayout /> : <UnauthorizedLayout />}
        </NavigationContainer>
      </BottomSheetModalProvider>
    </GestureHandlerRootView>
  );