Swipeable and drawer, new api (#3803)

## Description

This PR changes reanimated swipeable and reanimated drawer components
implementations to use new hooks API.

## Test plan

Check whether 'new swipable' and 'reanimated drawer layout' work in the
example app

Author: akwasniewski

packages/react-native-gesture-handler/src/components/ReanimatedDrawerLayout.tsx

@@ -36,16 +36,18 @@ import Animated, {
   withSpring,
 } from 'react-native-reanimated';
 
-import { GestureObjects as Gesture } from '../handlers/gestures/gestureObjects';
-import { GestureDetector } from '../handlers/gestures/GestureDetector';
 import {
   UserSelect,
   ActiveCursor,
   MouseButton,
   HitSlop,
-  GestureStateChangeEvent,
 } from '../handlers/gestureHandlerCommon';
-import { PanGestureHandlerEventPayload } from '../handlers/GestureHandlerEventPayload';
+import {
+  PanGestureStateChangeEvent,
+  usePan,
+  useTap,
+} from '../v3/hooks/gestures';
+import { GestureDetector } from '../v3/detectors';
 
 const DRAG_TOSS = 0.05;
 
@@ -432,9 +434,9 @@ const DrawerLayout = forwardRef<DrawerLayoutMethods, DrawerLayoutProps>(
     );
 
     const handleRelease = useCallback(
-      (event: GestureStateChangeEvent<PanGestureHandlerEventPayload>) => {
+      (event: PanGestureStateChangeEvent) => {
         'worklet';
-        let { translationX: dragX, velocityX, x: touchX } = event;
+        let { translationX: dragX, velocityX, x: touchX } = event.handlerData;
 
         if (drawerPosition !== DrawerPosition.LEFT) {
           // See description in _updateAnimatedEvent about why events are flipped
@@ -497,20 +499,18 @@ const DrawerLayout = forwardRef<DrawerLayoutMethods, DrawerLayoutProps>(
       [animateDrawer]
     );
 
-    const overlayDismissGesture = useMemo(
-      () =>
-        Gesture.Tap()
-          .maxDistance(25)
-          .onEnd(() => {
-            if (
-              isDrawerOpen.value &&
-              drawerLockMode !== DrawerLockMode.LOCKED_OPEN
-            ) {
-              closeDrawer();
-            }
-          }),
-      [closeDrawer, isDrawerOpen, drawerLockMode]
-    );
+    const overlayDismissGesture = useTap({
+      maxDistance: 25,
+      onEnd: () => {
+        'worklet';
+        if (
+          isDrawerOpen.value &&
+          drawerLockMode !== DrawerLockMode.LOCKED_OPEN
+        ) {
+          closeDrawer();
+        }
+      },
+    });
 
     const overlayAnimatedStyle = useAnimatedStyle(() => ({
       opacity: openValue.value,
@@ -522,86 +522,63 @@ const DrawerLayout = forwardRef<DrawerLayoutMethods, DrawerLayoutProps>(
       [drawerWidth, isFromLeft]
     );
 
-    const panGesture = useMemo(() => {
-      return Gesture.Pan()
-        .activeCursor(activeCursor)
-        .mouseButton(mouseButton)
-        .hitSlop(drawerOpened ? fillHitSlop : edgeHitSlop)
-        .minDistance(drawerOpened ? 100 : 0)
-        .activeOffsetX(gestureOrientation * minSwipeDistance)
-        .failOffsetY([-15, 15])
-        .simultaneousWithExternalGesture(overlayDismissGesture)
-        .enableTrackpadTwoFingerGesture(enableTrackpadTwoFingerGesture)
-        .enabled(
-          drawerState !== DrawerState.SETTLING &&
-            (drawerOpened
-              ? drawerLockMode !== DrawerLockMode.LOCKED_OPEN
-              : drawerLockMode !== DrawerLockMode.LOCKED_CLOSED)
-        )
-        .onStart(() => {
-          emitStateChanged(DrawerState.DRAGGING, false);
-          runOnJS(setDrawerState)(DrawerState.DRAGGING);
-          if (keyboardDismissMode === DrawerKeyboardDismissMode.ON_DRAG) {
-            runOnJS(dismissKeyboard)();
-          }
-          if (hideStatusBar) {
-            runOnJS(setStatusBarHidden)(true, statusBarAnimation);
-          }
-        })
-        .onUpdate((event) => {
-          const startedOutsideTranslation = isFromLeft
-            ? interpolate(
-                event.x,
-                [0, drawerWidth, drawerWidth + 1],
-                [0, drawerWidth, drawerWidth]
-              )
-            : interpolate(
-                event.x - containerWidth,
-                [-drawerWidth - 1, -drawerWidth, 0],
-                [drawerWidth, drawerWidth, 0]
-              );
-
-          const startedInsideTranslation =
-            sideCorrection *
-            (event.translationX +
-              (drawerOpened ? drawerWidth * -gestureOrientation : 0));
-
-          const adjustedTranslation = Math.max(
-            drawerOpened ? startedOutsideTranslation : 0,
-            startedInsideTranslation
-          );
-
-          openValue.value = interpolate(
-            adjustedTranslation,
-            [-drawerWidth, 0, drawerWidth],
-            [1, 0, 1],
-            Extrapolation.CLAMP
-          );
-        })
-        .onEnd(handleRelease);
-    }, [
-      drawerLockMode,
-      openValue,
-      drawerWidth,
-      emitStateChanged,
-      gestureOrientation,
-      handleRelease,
-      edgeHitSlop,
-      fillHitSlop,
-      minSwipeDistance,
-      hideStatusBar,
-      keyboardDismissMode,
-      overlayDismissGesture,
-      drawerOpened,
-      isFromLeft,
-      containerWidth,
-      sideCorrection,
-      drawerState,
-      activeCursor,
-      enableTrackpadTwoFingerGesture,
-      mouseButton,
-      statusBarAnimation,
-    ]);
+    const panGesture = usePan({
+      activeCursor: activeCursor,
+      mouseButton: mouseButton,
+      hitSlop: drawerOpened ? fillHitSlop : edgeHitSlop,
+      activeOffsetX: gestureOrientation * minSwipeDistance,
+      failOffsetY: [-15, 15],
+      simultaneousWith: overlayDismissGesture,
+      enableTrackpadTwoFingerGesture: enableTrackpadTwoFingerGesture,
+      enabled:
+        drawerState !== DrawerState.SETTLING &&
+        (drawerOpened
+          ? drawerLockMode !== DrawerLockMode.LOCKED_OPEN
+          : drawerLockMode !== DrawerLockMode.LOCKED_CLOSED),
+      onStart: () => {
+        'worklet';
+        emitStateChanged(DrawerState.DRAGGING, false);
+        runOnJS(setDrawerState)(DrawerState.DRAGGING);
+        if (keyboardDismissMode === DrawerKeyboardDismissMode.ON_DRAG) {
+          runOnJS(dismissKeyboard)();
+        }
+        if (hideStatusBar) {
+          runOnJS(setStatusBarHidden)(true, statusBarAnimation);
+        }
+      },
+      onUpdate: (event) => {
+        'worklet';
+        const startedOutsideTranslation = isFromLeft
+          ? interpolate(
+              event.handlerData.x,
+              [0, drawerWidth, drawerWidth + 1],
+              [0, drawerWidth, drawerWidth]
+            )
+          : interpolate(
+              event.handlerData.x - containerWidth,
+              [-drawerWidth - 1, -drawerWidth, 0],
+              [drawerWidth, drawerWidth, 0]
+            );
+
+        const startedInsideTranslation =
+          sideCorrection *
+          (event.handlerData.translationX +
+            (drawerOpened ? drawerWidth * -gestureOrientation : 0));
+
+        const adjustedTranslation = Math.max(
+          drawerOpened ? startedOutsideTranslation : 0,
+          startedInsideTranslation
+        );
+
+        openValue.value = interpolate(
+          adjustedTranslation,
+          [-drawerWidth, 0, drawerWidth],
+          [1, 0, 1],
+          Extrapolation.CLAMP
+        );
+      },
+      onEnd: handleRelease,
+    });
 
     // When using RTL, row and row-reverse flex directions are flipped.
     const reverseContentDirection = I18nManager.isRTL