Remove migration from useAnimatedGestureHandler

wix · Aug 14, 2024 · 7957805 · 7957805
1 parent 8324ef9
commit 7957805
Show file tree

Hide file tree

Showing 3 changed files with 47 additions and 52 deletions.
diff --git a/src/incubator/TouchableOpacity.tsx b/src/incubator/TouchableOpacity.tsx
@@ -1,6 +1,7 @@
 import React, {PropsWithChildren, useCallback, useMemo} from 'react';
 import {LayoutChangeEvent} from 'react-native';
 import Reanimated, {
+  useAnimatedGestureHandler,
   useAnimatedStyle,
   useSharedValue,
   withTiming,
@@ -103,41 +104,35 @@ function TouchableOpacity(props: Props) {
     isActive.value = withTiming(value, {duration: 200});
   };
 
-  const tapGestureHandler = ({nativeEvent: {state}}: any) => {
-    switch (state) {
-      case State.BEGAN:
-        toggleActive(1);
-        break;
-      case State.CANCELLED:
-      case State.END:
+  const tapGestureHandler = useAnimatedGestureHandler({
+    onStart: () => {
+      toggleActive(1);
+    },
+    onEnd: () => {
+      toggleActive(0);
+      runOnJS(onPress)();
+    },
+    onFail: () => {
+      if (!isLongPressed.value) {
         toggleActive(0);
-        runOnJS(onPress)();
-        break;
-      case State.FAILED:
-        if (!isLongPressed.value) {
-          toggleActive(0);
-        }
-        break;
+      }
     }
-  };
-
-  const longPressGestureHandler = ({nativeEvent: {state}}: any) => {
-    switch (state) {
-      case State.ACTIVE:
-        if (!isLongPressed.value) {
-          isLongPressed.value = true;
-          runOnJS(onLongPress)();
-        }
-        break;
-      case State.CANCELLED:
-      case State.END:
-      case State.FAILED:
-        toggleActive(0);
-        isLongPressed.value = false;
-        break;
+  });
+
+  const longPressGestureHandler = useAnimatedGestureHandler({
+    onActive: () => {
+      if (!isLongPressed.value) {
+        isLongPressed.value = true;
+        runOnJS(onLongPress)();
+      }
+    },
+    onFinish: () => {
+      toggleActive(0);
+      isLongPressed.value = false;
     }
-  };
+  });
 
+  // @ts-expect-error should be fixed in version 3.5 (https://github.com/software-mansion/react-native-reanimated/pull/4881)
   const animatedStyle = useAnimatedStyle(() => {
     const activeColor = feedbackColor || backgroundColor;
     const opacity = interpolate(isActive.value, [0, 1], [1, activeOpacity]);
@@ -156,12 +151,12 @@ function TouchableOpacity(props: Props) {
 
   return (
     <TapGestureHandler
-      onHandlerStateChange={tapGestureHandler}
+      onGestureEvent={tapGestureHandler}
       shouldCancelWhenOutside
       enabled={!disabled}
     >
       <Reanimated.View>
-        <Container onHandlerStateChange={longPressGestureHandler} shouldCancelWhenOutside>
+        <Container onGestureEvent={longPressGestureHandler} shouldCancelWhenOutside>
           <Reanimated.View
             {...others}
             ref={forwardedRef}

diff --git a/src/incubator/panView/index.tsx b/src/incubator/panView/index.tsx
@@ -1,11 +1,12 @@
+import {isEmpty} from 'lodash';
 import React from 'react';
 import {StyleProp, View as RNView, ViewStyle} from 'react-native';
 import {useAnimatedStyle} from 'react-native-reanimated';
-import {GestureDetector} from 'react-native-gesture-handler';
+import {PanGestureHandler} from 'react-native-gesture-handler';
 import {asBaseComponent} from '../../commons/new';
 import View, {ViewProps} from '../../components/view';
-import useHiddenLocation from '../hooks/useHiddenLocation';
 import {PanningDirections, PanningDirectionsEnum} from './panningUtil';
+import useHiddenLocation from '../hooks/useHiddenLocation';
 import usePanGesture, {
   PanGestureProps,
   PanViewDirections,
@@ -14,7 +15,6 @@ import usePanGesture, {
   DEFAULT_DIRECTIONS,
   DEFAULT_ANIMATION_CONFIG
 } from './usePanGesture';
-
 export {
   PanningDirections,
   PanningDirectionsEnum,
@@ -50,7 +50,7 @@ const PanView = (props: Props) => {
   } = props;
 
   const {setRef, onLayout, hiddenLocation} = useHiddenLocation<RNView>();
-  const {translation, gesture} = usePanGesture({
+  const {translation, panGestureEvent} = usePanGesture({
     directions,
     dismissible,
     animateToOrigin,
@@ -68,11 +68,11 @@ const PanView = (props: Props) => {
 
   return (
     <View ref={setRef} style={containerStyle} onLayout={onLayout}>
-      <GestureDetector gesture={gesture}>
+      <PanGestureHandler onGestureEvent={isEmpty(directions) ? undefined : panGestureEvent}>
         <View reanimated style={animatedStyle}>
           <View {...others}>{children}</View>
         </View>
-      </GestureDetector>
+      </PanGestureHandler>
     </View>
   );
 };

diff --git a/src/incubator/panView/usePanGesture.ts b/src/incubator/panView/usePanGesture.ts
@@ -1,6 +1,6 @@
 import {useCallback} from 'react';
-import {useSharedValue, withSpring, withTiming, runOnJS} from 'react-native-reanimated';
-import {PanGestureHandlerEventPayload, Gesture} from 'react-native-gesture-handler';
+import {useSharedValue, withSpring, withTiming, runOnJS, useAnimatedGestureHandler} from 'react-native-reanimated';
+import {PanGestureHandlerEventPayload} from 'react-native-gesture-handler';
 import {
   PanningDirections,
   PanningDirectionsEnum,
@@ -69,7 +69,6 @@ const usePanGesture = (props: PanGestureProps) => {
   const waitingForDismiss = useSharedValue<boolean>(false);
   const translationX = useSharedValue<number>(0);
   const translationY = useSharedValue<number>(0);
-  const initialTranslation = useSharedValue<Frame>({x: 0, y: 0});
 
   const getTranslationOptions = () => {
     'worklet';
@@ -113,14 +112,14 @@ const usePanGesture = (props: PanGestureProps) => {
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [animateToOrigin]);
 
-  const panGesture = Gesture.Pan()
-    .onBegin(() => {
-      initialTranslation.value = {x: translationX.value, y: translationY.value};
-    })
-    .onStart((event: PanGestureHandlerEventPayload) => {
-      setTranslation(event, initialTranslation.value);
-    })
-    .onEnd((event: PanGestureHandlerEventPayload) => {
+  const onGestureEvent = useAnimatedGestureHandler({
+    onStart: (_event: PanGestureHandlerEventPayload, context: {initialTranslation: Frame}) => {
+      context.initialTranslation = {x: translationX.value, y: translationY.value};
+    },
+    onActive: (event: PanGestureHandlerEventPayload, context: {initialTranslation: Frame}) => {
+      setTranslation(event, context.initialTranslation);
+    },
+    onEnd: (event: PanGestureHandlerEventPayload) => {
       if (dismissible) {
         const velocity = getDismissVelocity(event, directions, getTranslationOptions(), threshold);
         if (velocity) {
@@ -142,9 +141,10 @@ const usePanGesture = (props: PanGestureProps) => {
       } else {
         returnToOrigin();
       }
-    });
+    }
+  }, [directions, dismissible, setTranslation, returnToOrigin]);
 
-  return {translation: {x: translationX, y: translationY}, gesture: panGesture, reset};
+  return {translation: {x: translationX, y: translationY}, panGestureEvent: onGestureEvent, reset};
 };
 
 export default usePanGesture;