feat: rewrite gesture apis with gesture handler 2 (#1126)

* chore: updated dependencies * feat: rewrite the gesture api with gh2
gorhom · Oct 3, 2022 · 6a4d296 · 6a4d296
1 parent 54abf0c
commit 6a4d296
Show file tree

Hide file tree

Showing 21 changed files with 2,777 additions and 3,053 deletions.
diff --git a/example/bare/ios/Podfile.lock b/example/bare/ios/Podfile.lock
@@ -382,9 +382,9 @@ PODS:
     - React-perflogger (= 0.69.4)
   - RNCMaskedView (0.1.11):
     - React
-  - RNGestureHandler (2.5.0):
+  - RNGestureHandler (2.6.2):
     - React-Core
-  - RNReanimated (2.9.1):
+  - RNReanimated (2.10.0):
     - DoubleConversion
     - FBLazyVector
     - FBReactNativeSpec
@@ -644,8 +644,8 @@ SPEC CHECKSUMS:
   React-runtimeexecutor: 61ee22a8cdf8b6bb2a7fb7b4ba2cc763e5285196
   ReactCommon: 8f67bd7e0a6afade0f20718f859dc8c2275f2e83
   RNCMaskedView: 0e1bc4bfa8365eba5fbbb71e07fbdc0555249489
-  RNGestureHandler: bad495418bcbd3ab47017a38d93d290ebd406f50
-  RNReanimated: 2cf7451318bb9cc430abeec8d67693f9cf4e039c
+  RNGestureHandler: 4defbd70b2faf3d6761b82fa7880285241762cb0
+  RNReanimated: 7faa787e8d4493fbc95fab2ad331fa7625828cfa
   RNScreens: 4a1af06327774490d97342c00aee0c2bafb497b7
   SocketRocket: fccef3f9c5cedea1353a9ef6ada904fde10d6608
   Yoga: ff994563b2fd98c982ca58e8cd9db2cdaf4dda74

diff --git a/example/bare/package.json b/example/bare/package.json
@@ -24,10 +24,10 @@
     "nanoid": "^3.3.3",
     "react": "18.0.0",
     "react-native": "0.69.4",
-    "react-native-gesture-handler": "^2.5.0",
+    "react-native-gesture-handler": "^2.6.2",
     "react-native-maps": "^0.30.1",
     "react-native-pager-view": "^5.4.9",
-    "react-native-reanimated": "^2.9.1",
+    "react-native-reanimated": "^2.10.0",
     "react-native-redash": "^16.0.11",
     "react-native-safe-area-context": "4.2.4",
     "react-native-screens": "^3.15.0",

diff --git a/lint-staged.config.js b/lint-staged.config.js
@@ -1,4 +1,4 @@
 module.exports = {
   '**/*.js': ['eslint'],
-  '**/*.{ts,tsx}': [() => 'tsc --skipLibCheck --noEmit', 'eslint'],
+  '**/*.{ts,tsx}': [() => 'tsc --skipLibCheck --noEmit', 'eslint --fix'],
 };
diff --git a/package.json b/package.json
@@ -52,25 +52,25 @@
     "@types/react-native": "^0.67.7",
     "auto-changelog": "^2.4.0",
     "copyfiles": "^2.4.1",
-    "eslint": "^7.32.0",
-    "eslint-config-prettier": "^8.3.0",
-    "eslint-plugin-prettier": "^3.4.0",
+    "eslint": "^8.21.0",
+    "eslint-config-prettier": "^8.5.0",
+    "eslint-plugin-prettier": "^4.2.1",
     "husky": "^4.3.8",
-    "lint-staged": "^11.1.2",
-    "prettier": "^2.3.2",
+    "lint-staged": "^13.0.3",
+    "prettier": "^2.7.1",
     "react": "~16.9.0",
     "react-native": "^0.62.2",
-    "react-native-builder-bob": "^0.18.1",
-    "react-native-gesture-handler": "^1.10.3",
-    "react-native-reanimated": "^2.8.0",
+    "react-native-builder-bob": "^0.18.3",
+    "react-native-gesture-handler": "^2.5.0",
+    "react-native-reanimated": "^2.9.1",
     "release-it": "^15.4.2",
     "typescript": "^4.2.4"
   },
   "peerDependencies": {
     "react": "*",
     "react-native": "*",
-    "react-native-gesture-handler": ">=1.10.1",
-    "react-native-reanimated": ">=2.2.0"
+    "react-native-gesture-handler": ">=2.5.0",
+    "react-native-reanimated": ">=2.9.0"
   },
   "react-native-builder-bob": {
     "source": "src",

diff --git a/src/components/bottomSheet/BottomSheet.tsx b/src/components/bottomSheet/BottomSheet.tsx
@@ -1642,14 +1642,16 @@ const BottomSheetComponent = forwardRef<BottomSheet, BottomSheetProps>(
                   // topInset,
                   // bottomInset,
                   animatedSheetState,
-                  animatedScrollableState,
-                  animatedScrollableOverrideState,
+                  // animatedScrollableState,
+                  // animatedScrollableOverrideState,
                   // isScrollableRefreshable,
                   // animatedScrollableContentOffsetY,
                   // keyboardState,
-                  // animatedIndex,
-                  // animatedCurrentIndex,
-                  // animatedPosition,
+                  animatedIndex,
+                  animatedCurrentIndex,
+                  animatedPosition,
+                  animatedHandleGestureState,
+                  animatedContentGestureState,
                   // animatedContainerHeight,
                   // animatedSheetHeight,
                   // animatedHandleHeight,

diff --git a/src/components/bottomSheet/types.d.ts b/src/components/bottomSheet/types.d.ts
@@ -6,7 +6,7 @@ import type {
   WithSpringConfig,
   WithTimingConfig,
 } from 'react-native-reanimated';
-import type { PanGestureHandlerProps } from 'react-native-gesture-handler';
+import type { PanGesture } from 'react-native-gesture-handler';
 import type { BottomSheetHandleProps } from '../bottomSheetHandle';
 import type { BottomSheetBackdropProps } from '../bottomSheetBackdrop';
 import type { BottomSheetBackgroundProps } from '../bottomSheetBackground';
@@ -21,17 +21,7 @@ import type { GestureEventsHandlersHookType } from '../../types';
 
 export interface BottomSheetProps
   extends BottomSheetAnimationConfigs,
-    Partial<
-      Pick<
-        PanGestureHandlerProps,
-        | 'activeOffsetY'
-        | 'activeOffsetX'
-        | 'failOffsetY'
-        | 'failOffsetX'
-        | 'waitFor'
-        | 'simultaneousHandlers'
-      >
-    > {
+    Partial<BottomSheetGestureProps> {
   //#region configuration
   /**
    * Initial snap point index, provide `-1` to initiate bottom sheet in closed state.
@@ -313,3 +303,16 @@ export type AnimateToPositionType = (
   velocity?: number,
   configs?: WithTimingConfig | WithSpringConfig
 ) => void;
+
+export type BottomSheetGestureProps = {
+  activeOffsetX: Parameters<PanGesture['activeOffsetX']>[0];
+  activeOffsetY: Parameters<PanGesture['activeOffsetY']>[0];
+
+  failOffsetY: Parameters<PanGesture['failOffsetY']>[0];
+  failOffsetX: Parameters<PanGesture['failOffsetX']>[0];
+
+  simultaneousHandlers: Parameters<
+    PanGesture['simultaneousWithExternalGesture']
+  >[0];
+  waitFor: Parameters<PanGesture['requireExternalGestureToFail']>[0];
+};
diff --git a/src/components/bottomSheetDraggableView/BottomSheetDraggableView.tsx b/src/components/bottomSheetDraggableView/BottomSheetDraggableView.tsx
@@ -1,15 +1,14 @@
-import React, { useMemo, useRef, memo } from 'react';
+import React, { useMemo, memo } from 'react';
 import Animated from 'react-native-reanimated';
-import { PanGestureHandler } from 'react-native-gesture-handler';
+import { GestureDetector, Gesture } from 'react-native-gesture-handler';
 import {
   useBottomSheetGestureHandlers,
   useBottomSheetInternal,
 } from '../../hooks';
-import { GESTURE_SOURCE } from '../../constants';
 import type { BottomSheetDraggableViewProps } from './types';
+import { BottomSheetDraggableContext } from '../../contexts/gesture';
 
 const BottomSheetDraggableViewComponent = ({
-  gestureType = GESTURE_SOURCE.CONTENT,
   nativeGestureRef,
   refreshControlGestureRef,
   style,
@@ -26,19 +25,10 @@ const BottomSheetDraggableViewComponent = ({
     failOffsetX,
     failOffsetY,
   } = useBottomSheetInternal();
-  const { contentPanGestureHandler, scrollablePanGestureHandler } =
-    useBottomSheetGestureHandlers();
+  const { contentPanGestureHandler } = useBottomSheetGestureHandlers();
   //#endregion
 
   //#region variables
-  const panGestureRef = useRef<PanGestureHandler>(null);
-  const gestureHandler = useMemo(
-    () =>
-      gestureType === GESTURE_SOURCE.CONTENT
-        ? contentPanGestureHandler
-        : scrollablePanGestureHandler,
-    [gestureType, contentPanGestureHandler, scrollablePanGestureHandler]
-  );
   const simultaneousHandlers = useMemo(() => {
     const refs = [];
 
@@ -64,25 +54,66 @@ const BottomSheetDraggableViewComponent = ({
     nativeGestureRef,
     refreshControlGestureRef,
   ]);
+  const draggableGesture = useMemo(() => {
+    let gesture = Gesture.Pan()
+      .enabled(enableContentPanningGesture)
+      .shouldCancelWhenOutside(false)
+      .runOnJS(false)
+      .onStart(contentPanGestureHandler.handleOnStart)
+      .onChange(contentPanGestureHandler.handleOnChange)
+      .onEnd(contentPanGestureHandler.handleOnEnd)
+      .onFinalize(contentPanGestureHandler.handleOnFinalize);
+
+    if (waitFor) {
+      gesture = gesture.requireExternalGestureToFail(waitFor);
+    }
+
+    if (simultaneousHandlers) {
+      gesture = gesture.simultaneousWithExternalGesture(
+        simultaneousHandlers as any
+      );
+    }
+
+    if (activeOffsetX) {
+      gesture = gesture.activeOffsetX(activeOffsetX);
+    }
+
+    if (activeOffsetY) {
+      gesture = gesture.activeOffsetY(activeOffsetY);
+    }
+
+    if (failOffsetX) {
+      gesture = gesture.failOffsetX(failOffsetX);
+    }
+
+    if (failOffsetY) {
+      gesture = gesture.failOffsetY(failOffsetY);
+    }
+
+    return gesture;
+  }, [
+    activeOffsetX,
+    activeOffsetY,
+    enableContentPanningGesture,
+    failOffsetX,
+    failOffsetY,
+    simultaneousHandlers,
+    waitFor,
+    contentPanGestureHandler.handleOnChange,
+    contentPanGestureHandler.handleOnEnd,
+    contentPanGestureHandler.handleOnFinalize,
+    contentPanGestureHandler.handleOnStart,
+  ]);
   //#endregion
 
   return (
-    <PanGestureHandler
-      ref={panGestureRef}
-      enabled={enableContentPanningGesture}
-      simultaneousHandlers={simultaneousHandlers}
-      shouldCancelWhenOutside={false}
-      waitFor={waitFor}
-      onGestureEvent={gestureHandler}
-      activeOffsetX={activeOffsetX}
-      activeOffsetY={activeOffsetY}
-      failOffsetX={failOffsetX}
-      failOffsetY={failOffsetY}
-    >
-      <Animated.View style={style} {...rest}>
-        {children}
-      </Animated.View>
-    </PanGestureHandler>
+    <GestureDetector gesture={draggableGesture}>
+      <BottomSheetDraggableContext.Provider value={draggableGesture}>
+        <Animated.View style={style} {...rest}>
+          {children}
+        </Animated.View>
+      </BottomSheetDraggableContext.Provider>
+    </GestureDetector>
   );
 };
 

diff --git a/src/components/bottomSheetDraggableView/types.d.ts b/src/components/bottomSheetDraggableView/types.d.ts
@@ -1,17 +1,9 @@
-import type { ReactNode, Ref } from 'react';
+import type { ReactNode } from 'react';
 import type { ViewProps as RNViewProps } from 'react-native';
-import type { NativeViewGestureHandler } from 'react-native-gesture-handler';
-import type { GESTURE_SOURCE } from '../../constants';
+import type { GestureRef } from 'react-native-gesture-handler/lib/typescript/handlers/gestures/gesture';
 
 export type BottomSheetDraggableViewProps = RNViewProps & {
-  /**
-   * Defines the gesture type of the draggable view.
-   *
-   * @default GESTURE_SOURCE.CONTENT
-   * @type GESTURE_SOURCE
-   */
-  gestureType?: GESTURE_SOURCE;
-  nativeGestureRef?: Ref<NativeViewGestureHandler> | null;
-  refreshControlGestureRef?: Ref<NativeViewGestureHandler> | null;
+  nativeGestureRef?: Exclude<GestureRef, number>;
+  refreshControlGestureRef?: Exclude<GestureRef, number>;
   children: ReactNode[] | ReactNode;
 };
diff --git a/src/components/bottomSheetGestureHandlersProvider/BottomSheetGestureHandlersProvider.tsx b/src/components/bottomSheetGestureHandlersProvider/BottomSheetGestureHandlersProvider.tsx
@@ -23,7 +23,7 @@ const BottomSheetGestureHandlersProvider = ({
   //#region hooks
   const { animatedContentGestureState, animatedHandleGestureState } =
     useBottomSheetInternal();
-  const { handleOnStart, handleOnActive, handleOnEnd } =
+  const { handleOnStart, handleOnChange, handleOnEnd, handleOnFinalize } =
     useGestureEventsHandlers();
   //#endregion
 
@@ -33,26 +33,19 @@ const BottomSheetGestureHandlersProvider = ({
     animatedContentGestureState,
     animatedGestureSource,
     handleOnStart,
-    handleOnActive,
-    handleOnEnd
-  );
-
-  const scrollablePanGestureHandler = useGestureHandler(
-    GESTURE_SOURCE.SCROLLABLE,
-    animatedContentGestureState,
-    animatedGestureSource,
-    handleOnStart,
-    handleOnActive,
-    handleOnEnd
+    handleOnChange,
+    handleOnEnd,
+    handleOnFinalize
   );
 
   const handlePanGestureHandler = useGestureHandler(
     GESTURE_SOURCE.HANDLE,
     animatedHandleGestureState,
     animatedGestureSource,
     handleOnStart,
-    handleOnActive,
-    handleOnEnd
+    handleOnChange,
+    handleOnEnd,
+    handleOnFinalize
   );
   //#endregion
 
@@ -61,15 +54,9 @@ const BottomSheetGestureHandlersProvider = ({
     () => ({
       contentPanGestureHandler,
       handlePanGestureHandler,
-      scrollablePanGestureHandler,
       animatedGestureSource,
     }),
-    [
-      contentPanGestureHandler,
-      handlePanGestureHandler,
-      scrollablePanGestureHandler,
-      animatedGestureSource,
-    ]
+    [contentPanGestureHandler, handlePanGestureHandler, animatedGestureSource]
   );
   //#endregion
   return (