React-NativeでGestureHandlerRootViewを使えと言われた

本編

react-native-gesture-handlerを使用する際にエラーが発生したので解決した。

環境

"react-native-gesture-handler": "2.14.1"
"@gorhom/bottom-sheet": "4.5.1"

発生したエラー

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.
 
GestureHandlerRootView. Otherwise the gestures will not be recognized. See https://docs.swmansion.com/react-native-gesture-handler/docs/installation for more details.

以下のようなコードでエラーが出ていた。

return (
  <BottomSheetModalProvider>
    省略
  </BottomSheetModalProvider>
);

下記のように解決した

import { GestureHandlerRootView } from 'react-native-gesture-handler';

return (
    <GestureHandlerRootView style={{ flex: 1 }}>
      <BottomSheetModalProvider>
        省略
      </BottomSheetModalProvider>
    </GestureHandlerRootView>
);

BottomSheetModalProviderをGestureHandlerRootViewでラップしてあげると解決するみたいです。

参照：https://docs.swmansion.com/react-native-gesture-handler/docs/fundamentals/installation/#js