From 24cdae2d59745253753382fc593e7081a5431cc2 Mon Sep 17 00:00:00 2001
From: rory <rory@expensify.com>
Date: Mon, 17 Oct 2022 16:02:01 -0700
Subject: [PATCH 1/2] Upgrade modern drawer to use GestureDetector

---
 packages/drawer/src/views/modern/Drawer.tsx | 51 ++++++++++-----------
 1 file changed, 24 insertions(+), 27 deletions(-)

diff --git a/packages/drawer/src/views/modern/Drawer.tsx b/packages/drawer/src/views/modern/Drawer.tsx
index 52eefb5b34..c0f5a68fef 100644
--- a/packages/drawer/src/views/modern/Drawer.tsx
+++ b/packages/drawer/src/views/modern/Drawer.tsx
@@ -9,14 +9,13 @@ import {
   View,
 } from 'react-native';
 import {
-  PanGestureHandler,
-  PanGestureHandlerGestureEvent,
+  Gesture,
+  GestureDetector,
   State as GestureState,
 } from 'react-native-gesture-handler';
 import Animated, {
   interpolate,
   runOnJS,
-  useAnimatedGestureHandler,
   useAnimatedStyle,
   useDerivedValue,
   useSharedValue,
@@ -176,23 +175,24 @@ export default function Drawer({
 
   React.useEffect(() => toggleDrawer(open), [open, toggleDrawer]);
 
-  const onGestureEvent = useAnimatedGestureHandler<
-    PanGestureHandlerGestureEvent,
-    { startX: number }
-  >({
-    onStart: (event, ctx) => {
-      ctx.startX = translationX.value;
+  const startX = useSharedValue(0);
+  let panGesture = Gesture.Pan()
+    .activeOffsetX([-SWIPE_DISTANCE_MINIMUM, SWIPE_DISTANCE_MINIMUM])
+    .hitSlop(hitSlop)
+    .enabled(drawerType !== 'permanent' && swipeEnabled)
+    .onStart((event) => {
+      startX.value = translationX.value;
       gestureState.value = event.state;
       touchStartX.value = event.x;
 
       runOnJS(onGestureStart)();
-    },
-    onActive: (event, ctx) => {
+    })
+    .onUpdate((event) => {
       touchX.value = event.x;
-      translationX.value = ctx.startX + event.translationX;
+      translationX.value = startX.value + event.translationX;
       gestureState.value = event.state;
-    },
-    onEnd: (event) => {
+    })
+    .onEnd((event) => {
       gestureState.value = event.state;
 
       const nextOpen =
@@ -207,11 +207,15 @@ export default function Drawer({
           : open;
 
       toggleDrawer(nextOpen, event.velocityX);
-    },
-    onFinish: () => {
+    })
+    .onFinalize(() => {
       runOnJS(onGestureFinish)();
-    },
-  });
+    });
+  // @ts-expect-error Ref types incompatible yet, needs to get fixed upstream
+  panGesture.config = {
+    ...panGesture.config,
+    ...gestureHandlerProps,
+  };
 
   const translateX = useDerivedValue(() => {
     // Comment stolen from react-native-gesture-handler/DrawerLayout
@@ -317,14 +321,7 @@ export default function Drawer({
 
   return (
     <DrawerProgressContext.Provider value={progress}>
-      <PanGestureHandler
-        activeOffsetX={[-SWIPE_DISTANCE_MINIMUM, SWIPE_DISTANCE_MINIMUM]}
-        failOffsetY={[-SWIPE_DISTANCE_MINIMUM, SWIPE_DISTANCE_MINIMUM]}
-        hitSlop={hitSlop}
-        enabled={drawerType !== 'permanent' && swipeEnabled}
-        onGestureEvent={onGestureEvent}
-        {...gestureHandlerProps}
-      >
+      <GestureDetector gesture={panGesture}>
         {/* Immediate child of gesture handler needs to be an Animated.View */}
         <Animated.View
           style={[
@@ -371,7 +368,7 @@ export default function Drawer({
             {renderDrawerContent()}
           </Animated.View>
         </Animated.View>
-      </PanGestureHandler>
+      </GestureDetector>
     </DrawerProgressContext.Provider>
   );
 }

From 01b35b1be08b8ff986e52c61bb40b6e15470fabe Mon Sep 17 00:00:00 2001
From: rory <rory@expensify.com>
Date: Mon, 17 Oct 2022 16:02:23 -0700
Subject: [PATCH 2/2] Upgrade peer dependency to RNGH >= 2.0.0

---
 packages/drawer/package.json | 2 +-
 packages/stack/package.json  | 2 +-
 yarn.lock                    | 4 ++--
 3 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/packages/drawer/package.json b/packages/drawer/package.json
index 2b63947cca..8e7794133d 100644
--- a/packages/drawer/package.json
+++ b/packages/drawer/package.json
@@ -64,7 +64,7 @@
     "@react-navigation/native": "^6.0.0",
     "react": "*",
     "react-native": "*",
-    "react-native-gesture-handler": ">= 1.0.0",
+    "react-native-gesture-handler": ">= 2.0.0",
     "react-native-reanimated": ">= 1.0.0",
     "react-native-safe-area-context": ">= 3.0.0",
     "react-native-screens": ">= 3.0.0"
diff --git a/packages/stack/package.json b/packages/stack/package.json
index a6291d30e9..c0311d76b7 100644
--- a/packages/stack/package.json
+++ b/packages/stack/package.json
@@ -63,7 +63,7 @@
     "@react-navigation/native": "^6.0.0",
     "react": "*",
     "react-native": "*",
-    "react-native-gesture-handler": ">= 1.0.0",
+    "react-native-gesture-handler": ">= 2.0.0",
     "react-native-safe-area-context": ">= 3.0.0",
     "react-native-screens": ">= 3.0.0"
   },
diff --git a/yarn.lock b/yarn.lock
index 82da1113dd..96e5ecf802 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -6068,7 +6068,7 @@ __metadata:
     "@react-navigation/native": ^6.0.0
     react: "*"
     react-native: "*"
-    react-native-gesture-handler: ">= 1.0.0"
+    react-native-gesture-handler: ">= 2.0.0"
     react-native-reanimated: ">= 1.0.0"
     react-native-safe-area-context: ">= 3.0.0"
     react-native-screens: ">= 3.0.0"
@@ -6295,7 +6295,7 @@ __metadata:
     "@react-navigation/native": ^6.0.0
     react: "*"
     react-native: "*"
-    react-native-gesture-handler: ">= 1.0.0"
+    react-native-gesture-handler: ">= 2.0.0"
     react-native-safe-area-context: ">= 3.0.0"
     react-native-screens: ">= 3.0.0"
   languageName: unknown