react-native-gesture-handler 2.20.1 → 2.21.0

package/src/components/ReanimatedSwipeable.tsx

@@ -7,7 +7,7 @@ import React, {
   forwardRef,
   useCallback,
   useImperativeHandle,
-  useRef,
+  useMemo,
 } from 'react';
 import { GestureObjects as Gesture } from '../handlers/gestures/gestureObjects';
 import { GestureDetector } from '../handlers/gestures/GestureDetector';
@@ -18,7 +18,6 @@ import {
 import type { PanGestureHandlerProps } from '../handlers/PanGestureHandler';
 import type { PanGestureHandlerEventPayload } from '../handlers/GestureHandlerEventPayload';
 import Animated, {
-  Extrapolation,
   SharedValue,
   interpolate,
   runOnJS,
@@ -42,6 +41,11 @@ type SwipeableExcludes = Exclude<
   'onGestureEvent' | 'onHandlerStateChange'
 >;
 
+enum SwipeDirection {
+  LEFT = 'left',
+  RIGHT = 'right',
+}
+
 export interface SwipeableProps
   extends Pick<PanGestureHandlerProps, SwipeableExcludes> {
   /**
@@ -111,65 +115,74 @@ export interface SwipeableProps
    * Called when action panel gets open (either right or left).
    */
   onSwipeableOpen?: (
-    direction: 'left' | 'right',
-    swipeable: SwipeableMethods
+    direction: SwipeDirection.LEFT | SwipeDirection.RIGHT
   ) => void;
 
   /**
    * Called when action panel is closed.
    */
   onSwipeableClose?: (
-    direction: 'left' | 'right',
-    swipeable: SwipeableMethods
+    direction: SwipeDirection.LEFT | SwipeDirection.RIGHT
   ) => void;
 
   /**
    * Called when action panel starts animating on open (either right or left).
    */
-  onSwipeableWillOpen?: (direction: 'left' | 'right') => void;
+  onSwipeableWillOpen?: (
+    direction: SwipeDirection.LEFT | SwipeDirection.RIGHT
+  ) => void;
 
   /**
    * Called when action panel starts animating on close.
    */
-  onSwipeableWillClose?: (direction: 'left' | 'right') => void;
+  onSwipeableWillClose?: (
+    direction: SwipeDirection.LEFT | SwipeDirection.RIGHT
+  ) => void;
 
   /**
    * Called when action panel starts being shown on dragging to open.
    */
-  onSwipeableOpenStartDrag?: (direction: 'left' | 'right') => void;
+  onSwipeableOpenStartDrag?: (
+    direction: SwipeDirection.LEFT | SwipeDirection.RIGHT
+  ) => void;
 
   /**
    * Called when action panel starts being shown on dragging to close.
    */
-  onSwipeableCloseStartDrag?: (direction: 'left' | 'right') => void;
+  onSwipeableCloseStartDrag?: (
+    direction: SwipeDirection.LEFT | SwipeDirection.RIGHT
+  ) => void;
 
   /**
+   * `progress`: Equals `0` when `swipeable` is closed, `1` when `swipeable` is opened.
+   *  - When the element overshoots it's opened position the value tends towards `Infinity`.
+   *  - Goes back to `1` when `swipeable` is released.
    *
-   * This map describes the values to use as inputRange for extra interpolation:
-   * AnimatedValue: [startValue, endValue]
-   *
-   * progressAnimatedValue: [0, 1] dragAnimatedValue: [0, +]
+   * `translation`: a horizontal offset of the `swipeable` relative to its closed position.\
+   * `swipeableMethods`: provides an object exposing methods for controlling the `swipeable`.
    *
    * To support `rtl` flexbox layouts use `flexDirection` styling.
    * */
   renderLeftActions?: (
-    progressAnimatedValue: SharedValue<number>,
-    dragAnimatedValue: SharedValue<number>,
-    swipeable: SwipeableMethods
+    progress: SharedValue<number>,
+    translation: SharedValue<number>,
+    swipeableMethods: SwipeableMethods
   ) => React.ReactNode;
+
   /**
+   * `progress`: Equals `0` when `swipeable` is closed, `1` when `swipeable` is opened.
+   *  - When the element overshoots it's opened position the value tends towards `Infinity`.
+   *  - Goes back to `1` when `swipeable` is released.
    *
-   * This map describes the values to use as inputRange for extra interpolation:
-   * AnimatedValue: [startValue, endValue]
-   *
-   * progressAnimatedValue: [0, 1] dragAnimatedValue: [0, -]
+   * `translation`: a horizontal offset of the `swipeable` relative to its closed position.\
+   * `swipeableMethods`: provides an object exposing methods for controlling the `swipeable`.
    *
    * To support `rtl` flexbox layouts use `flexDirection` styling.
    * */
   renderRightActions?: (
-    progressAnimatedValue: SharedValue<number>,
-    dragAnimatedValue: SharedValue<number>,
-    swipeable: SwipeableMethods
+    progress: SharedValue<number>,
+    translation: SharedValue<number>,
+    swipeableMethods: SwipeableMethods
   ) => React.ReactNode;
 
   animationOptions?: Record<string, unknown>;
@@ -199,86 +212,69 @@ const Swipeable = forwardRef<SwipeableMethods, SwipeableProps>(
     props: SwipeableProps,
     ref: ForwardedRef<SwipeableMethods>
   ) {
+    const defaultProps = {
+      friction: 1,
+      overshootFriction: 1,
+      dragOffset: 10,
+      enableTrackpadTwoFingerGesture: false,
+    };
+
     const {
       leftThreshold,
       rightThreshold,
-      onSwipeableOpenStartDrag,
-      onSwipeableCloseStartDrag,
-      enableTrackpadTwoFingerGesture,
       enabled,
       containerStyle,
       childrenContainerStyle,
       animationOptions,
       overshootLeft,
       overshootRight,
+      testID,
+      children,
+      enableTrackpadTwoFingerGesture = defaultProps.enableTrackpadTwoFingerGesture,
+      dragOffsetFromLeftEdge = defaultProps.dragOffset,
+      dragOffsetFromRightEdge = defaultProps.dragOffset,
+      friction = defaultProps.friction,
+      overshootFriction = defaultProps.overshootFriction,
+      onSwipeableOpenStartDrag,
+      onSwipeableCloseStartDrag,
       onSwipeableWillOpen,
       onSwipeableWillClose,
       onSwipeableOpen,
       onSwipeableClose,
-      testID,
+      renderLeftActions,
+      renderRightActions,
       ...remainingProps
     } = props;
 
     const rowState = useSharedValue<number>(0);
 
     const userDrag = useSharedValue<number>(0);
+
     const appliedTranslation = useSharedValue<number>(0);
 
     const rowWidth = useSharedValue<number>(0);
     const leftWidth = useSharedValue<number>(0);
     const rightWidth = useSharedValue<number>(0);
-    const rightOffset = useSharedValue<number>(0);
 
-    const leftActionTranslate = useSharedValue<number>(0);
-    const rightActionTranslate = useSharedValue<number>(0);
+    // used for synchronizing layout measurements between JS and UI
+    const rightOffset = useSharedValue<number | null>(null);
 
     const showLeftProgress = useSharedValue<number>(0);
     const showRightProgress = useSharedValue<number>(0);
 
-    const swipeableMethods = useRef<SwipeableMethods>({
-      close: () => {
-        'worklet';
-      },
-      openLeft: () => {
-        'worklet';
-      },
-      openRight: () => {
-        'worklet';
-      },
-      reset: () => {
-        'worklet';
-      },
-    });
-
-    const defaultProps = {
-      friction: 1,
-      overshootFriction: 1,
-    };
-
-    const {
-      friction = defaultProps.friction,
-      overshootFriction = defaultProps.overshootFriction,
-    } = props;
-
-    const overshootLeftProp = overshootLeft;
-    const overshootRightProp = overshootRight;
-
-    const calculateCurrentOffset = useCallback(() => {
+    const updateRightElementWidth = useCallback(() => {
       'worklet';
-      if (rowState.value === 1) {
-        return leftWidth.value;
-      } else if (rowState.value === -1) {
-        return -rowWidth.value - rightOffset.value;
+      if (rightOffset.value === null) {
+        rightOffset.value = rowWidth.value;
       }
-      return 0;
-    }, [leftWidth, rightOffset, rowState, rowWidth]);
+      rightWidth.value = Math.max(0, rowWidth.value - rightOffset.value);
+    }, [rightOffset, rightWidth, rowWidth]);
 
-    const updateAnimatedEvent = () => {
+    const updateAnimatedEvent = useCallback(() => {
       'worklet';
-      rightWidth.value = Math.max(0, rowWidth.value - rightOffset.value);
 
-      const overshootLeft = overshootLeftProp ?? leftWidth.value > 0;
-      const overshootRight = overshootRightProp ?? rightWidth.value > 0;
+      const shouldOvershootLeft = overshootLeft ?? leftWidth.value > 0;
+      const shouldOvershootRight = overshootRight ?? rightWidth.value > 0;
 
       const startOffset =
         rowState.value === 1
@@ -298,10 +294,11 @@ const Swipeable = forwardRef<SwipeableMethods, SwipeableProps>(
           leftWidth.value + 1,
         ],
         [
-          -rightWidth.value - (overshootRight ? 1 / overshootFriction : 0),
+          -rightWidth.value -
+            (shouldOvershootRight ? 1 / overshootFriction : 0),
           -rightWidth.value,
           leftWidth.value,
-          leftWidth.value + (overshootLeft ? 1 / overshootFriction : 0),
+          leftWidth.value + (shouldOvershootLeft ? 1 / overshootFriction : 0),
         ]
       );
 
@@ -313,12 +310,7 @@ const Swipeable = forwardRef<SwipeableMethods, SwipeableProps>(
               [0, 0, 1]
             )
           : 0;
-      leftActionTranslate.value = interpolate(
-        showLeftProgress.value,
-        [0, Number.MIN_VALUE],
-        [-10000, 0],
-        Extrapolation.CLAMP
-      );
+
       showRightProgress.value =
         rightWidth.value > 0
           ? interpolate(
@@ -327,23 +319,31 @@ const Swipeable = forwardRef<SwipeableMethods, SwipeableProps>(
               [1, 0, 0]
             )
           : 0;
-      rightActionTranslate.value = interpolate(
-        showRightProgress.value,
-        [0, Number.MIN_VALUE],
-        [-10000, 0],
-        Extrapolation.CLAMP
-      );
-    };
+    }, [
+      appliedTranslation,
+      friction,
+      leftWidth,
+      overshootFriction,
+      rightWidth,
+      rowState,
+      showLeftProgress,
+      showRightProgress,
+      userDrag,
+      overshootLeft,
+      overshootRight,
+    ]);
 
     const dispatchImmediateEvents = useCallback(
       (fromValue: number, toValue: number) => {
+        'worklet';
         if (toValue > 0 && onSwipeableWillOpen) {
-          onSwipeableWillOpen('left');
+          runOnJS(onSwipeableWillOpen)(SwipeDirection.RIGHT);
         } else if (toValue < 0 && onSwipeableWillOpen) {
-          onSwipeableWillOpen('right');
+          runOnJS(onSwipeableWillOpen)(SwipeDirection.LEFT);
         } else if (onSwipeableWillClose) {
-          const closingDirection = fromValue > 0 ? 'left' : 'right';
-          onSwipeableWillClose(closingDirection);
+          runOnJS(onSwipeableWillClose)(
+            fromValue > 0 ? SwipeDirection.LEFT : SwipeDirection.RIGHT
+          );
         }
       },
       [onSwipeableWillClose, onSwipeableWillOpen]
@@ -351,255 +351,311 @@ const Swipeable = forwardRef<SwipeableMethods, SwipeableProps>(
 
     const dispatchEndEvents = useCallback(
       (fromValue: number, toValue: number) => {
+        'worklet';
         if (toValue > 0 && onSwipeableOpen) {
-          onSwipeableOpen('left', swipeableMethods.current);
+          runOnJS(onSwipeableOpen)(SwipeDirection.RIGHT);
         } else if (toValue < 0 && onSwipeableOpen) {
-          onSwipeableOpen('right', swipeableMethods.current);
+          runOnJS(onSwipeableOpen)(SwipeDirection.LEFT);
         } else if (onSwipeableClose) {
-          const closingDirection = fromValue > 0 ? 'left' : 'right';
-          onSwipeableClose(closingDirection, swipeableMethods.current);
+          runOnJS(onSwipeableClose)(
+            fromValue > 0 ? SwipeDirection.LEFT : SwipeDirection.RIGHT
+          );
         }
       },
       [onSwipeableClose, onSwipeableOpen]
     );
 
-    const animationOptionsProp = animationOptions;
-
-    const animateRow = useCallback(
-      (fromValue: number, toValue: number, velocityX?: number) => {
-        'worklet';
-        rowState.value = Math.sign(toValue);
-
-        const translationSpringConfig = {
-          duration: 1000,
-          dampingRatio: 0.9,
-          stiffness: 500,
-          velocity: velocityX,
-          overshootClamping: true,
-          ...animationOptionsProp,
-        };
-
-        const progressSpringConfig = {
-          ...translationSpringConfig,
-          velocity: 0,
-        };
-
-        appliedTranslation.value = withSpring(
-          toValue,
-          translationSpringConfig,
-          (isFinished) => {
-            if (isFinished) {
-              runOnJS(dispatchEndEvents)(fromValue, toValue);
+    const animateRow: (toValue: number, velocityX?: number) => void =
+      useCallback(
+        (toValue: number, velocityX?: number) => {
+          'worklet';
+
+          const translationSpringConfig = {
+            duration: 1000,
+            dampingRatio: 0.9,
+            stiffness: 500,
+            velocity: velocityX,
+            overshootClamping: true,
+            ...animationOptions,
+          };
+
+          const isClosing = toValue === 0;
+          const moveToRight = isClosing ? rowState.value < 0 : toValue > 0;
+
+          const usedWidth = isClosing
+            ? moveToRight
+              ? rightWidth.value
+              : leftWidth.value
+            : moveToRight
+            ? leftWidth.value
+            : rightWidth.value;
+
+          const progressSpringConfig = {
+            ...translationSpringConfig,
+            restDisplacementThreshold: 0.01,
+            restSpeedThreshold: 0.01,
+            velocity:
+              velocityX &&
+              interpolate(velocityX, [-usedWidth, usedWidth], [-1, 1]),
+          };
+
+          const frozenRowState = rowState.value;
+
+          appliedTranslation.value = withSpring(
+            toValue,
+            translationSpringConfig,
+            (isFinished) => {
+              if (isFinished) {
+                dispatchEndEvents(frozenRowState, toValue);
+              }
             }
-          }
-        );
+          );
 
-        const progressTarget = toValue === 0 ? 0 : 1;
+          const progressTarget = toValue === 0 ? 0 : 1;
 
-        showLeftProgress.value =
-          leftWidth.value > 0
-            ? withSpring(progressTarget, progressSpringConfig)
-            : 0;
-        showRightProgress.value =
-          rightWidth.value > 0
-            ? withSpring(progressTarget, progressSpringConfig)
-            : 0;
+          showLeftProgress.value =
+            leftWidth.value > 0
+              ? withSpring(progressTarget, progressSpringConfig)
+              : 0;
+          showRightProgress.value =
+            rightWidth.value > 0
+              ? withSpring(progressTarget, progressSpringConfig)
+              : 0;
 
-        runOnJS(dispatchImmediateEvents)(fromValue, toValue);
-      },
-      [
-        rowState,
-        animationOptionsProp,
-        appliedTranslation,
-        showLeftProgress,
-        leftWidth.value,
-        showRightProgress,
-        rightWidth.value,
-        dispatchImmediateEvents,
-        dispatchEndEvents,
-      ]
-    );
+          dispatchImmediateEvents(frozenRowState, toValue);
 
-    const onRowLayout = ({ nativeEvent }: LayoutChangeEvent) => {
-      rowWidth.value = nativeEvent.layout.width;
-    };
-
-    const {
-      children,
-      renderLeftActions,
-      renderRightActions,
-      dragOffsetFromLeftEdge = 10,
-      dragOffsetFromRightEdge = 10,
-    } = props;
-
-    swipeableMethods.current = {
-      close() {
-        'worklet';
-        animateRow(calculateCurrentOffset(), 0);
-      },
-      openLeft() {
-        'worklet';
-        animateRow(calculateCurrentOffset(), leftWidth.value);
-      },
-      openRight() {
-        'worklet';
-        rightWidth.value = rowWidth.value - rightOffset.value;
-        animateRow(calculateCurrentOffset(), -rightWidth.value);
-      },
-      reset() {
-        'worklet';
-        userDrag.value = 0;
-        showLeftProgress.value = 0;
-        appliedTranslation.value = 0;
-        rowState.value = 0;
-      },
-    };
+          rowState.value = Math.sign(toValue);
+        },
+        [
+          rowState,
+          animationOptions,
+          appliedTranslation,
+          showLeftProgress,
+          leftWidth,
+          showRightProgress,
+          rightWidth,
+          dispatchImmediateEvents,
+          dispatchEndEvents,
+        ]
+      );
 
-    const leftAnimatedStyle = useAnimatedStyle(
+    const swipeableMethods = useMemo<SwipeableMethods>(
       () => ({
-        transform: [
-          {
-            translateX: leftActionTranslate.value,
-          },
-        ],
+        close() {
+          'worklet';
+          animateRow(0);
+        },
+        openLeft() {
+          'worklet';
+          animateRow(leftWidth.value);
+        },
+        openRight() {
+          'worklet';
+          // rightOffset and rowWidth are already much sooner than rightWidth
+          animateRow((rightOffset.value ?? 0) - rowWidth.value);
+        },
+        reset() {
+          'worklet';
+          userDrag.value = 0;
+          showLeftProgress.value = 0;
+          appliedTranslation.value = 0;
+          rowState.value = 0;
+        },
       }),
-      [leftActionTranslate]
+      [
+        leftWidth,
+        rightOffset,
+        rowWidth,
+        userDrag,
+        showLeftProgress,
+        appliedTranslation,
+        rowState,
+        animateRow,
+      ]
     );
 
-    const leftElement = renderLeftActions && (
-      <Animated.View style={[styles.leftActions, leftAnimatedStyle]}>
-        {renderLeftActions(
-          showLeftProgress,
-          appliedTranslation,
-          swipeableMethods.current
-        )}
-        <View
-          onLayout={({ nativeEvent }) =>
-            (leftWidth.value = nativeEvent.layout.x)
-          }
-        />
-      </Animated.View>
+    const onRowLayout = useCallback(
+      ({ nativeEvent }: LayoutChangeEvent) => {
+        rowWidth.value = nativeEvent.layout.width;
+      },
+      [rowWidth]
     );
 
-    const rightAnimatedStyle = useAnimatedStyle(
-      () => ({
-        transform: [
-          {
-            translateX: rightActionTranslate.value,
-          },
-        ],
-      }),
-      [rightActionTranslate]
+    const leftElement = useCallback(
+      () => (
+        <Animated.View style={[styles.leftActions]}>
+          {renderLeftActions?.(
+            showLeftProgress,
+            appliedTranslation,
+            swipeableMethods
+          )}
+          <View
+            onLayout={({ nativeEvent }) =>
+              (leftWidth.value = nativeEvent.layout.x)
+            }
+          />
+        </Animated.View>
+      ),
+      [
+        appliedTranslation,
+        leftWidth,
+        renderLeftActions,
+        showLeftProgress,
+        swipeableMethods,
+      ]
     );
 
-    const rightElement = renderRightActions && (
-      <Animated.View style={[styles.rightActions, rightAnimatedStyle]}>
-        {renderRightActions(
-          showRightProgress,
-          appliedTranslation,
-          swipeableMethods.current
-        )}
-        <View
-          onLayout={({ nativeEvent }) =>
-            (rightOffset.value = nativeEvent.layout.x)
-          }
-        />
-      </Animated.View>
+    const rightElement = useCallback(
+      () => (
+        <Animated.View style={[styles.rightActions]}>
+          {renderRightActions?.(
+            showRightProgress,
+            appliedTranslation,
+            swipeableMethods
+          )}
+          <View
+            onLayout={({ nativeEvent }) => {
+              rightOffset.value = nativeEvent.layout.x;
+            }}
+          />
+        </Animated.View>
+      ),
+      [
+        appliedTranslation,
+        renderRightActions,
+        rightOffset,
+        showRightProgress,
+        swipeableMethods,
+      ]
     );
 
-    const leftThresholdProp = leftThreshold;
-    const rightThresholdProp = rightThreshold;
-
-    const handleRelease = (
-      event: GestureStateChangeEvent<PanGestureHandlerEventPayload>
-    ) => {
-      'worklet';
-      const { velocityX } = event;
-      userDrag.value = event.translationX;
+    const handleRelease = useCallback(
+      (event: GestureStateChangeEvent<PanGestureHandlerEventPayload>) => {
+        'worklet';
+        const { velocityX } = event;
+        userDrag.value = event.translationX;
 
-      rightWidth.value = rowWidth.value - rightOffset.value;
+        updateRightElementWidth();
 
-      const leftThreshold = leftThresholdProp ?? leftWidth.value / 2;
-      const rightThreshold = rightThresholdProp ?? rightWidth.value / 2;
+        const leftThresholdProp = leftThreshold ?? leftWidth.value / 2;
+        const rightThresholdProp = rightThreshold ?? rightWidth.value / 2;
 
-      const startOffsetX = calculateCurrentOffset() + userDrag.value / friction;
-      const translationX = (userDrag.value + DRAG_TOSS * velocityX) / friction;
+        const translationX =
+          (userDrag.value + DRAG_TOSS * velocityX) / friction;
 
-      let toValue = 0;
+        let toValue = 0;
 
-      if (rowState.value === 0) {
-        if (translationX > leftThreshold) {
-          toValue = leftWidth.value;
-        } else if (translationX < -rightThreshold) {
-          toValue = -rightWidth.value;
-        }
-      } else if (rowState.value === 1) {
-        // Swiped to left
-        if (translationX > -leftThreshold) {
-          toValue = leftWidth.value;
-        }
-      } else {
-        // Swiped to right
-        if (translationX < rightThreshold) {
-          toValue = -rightWidth.value;
+        if (rowState.value === 0) {
+          if (translationX > leftThresholdProp) {
+            toValue = leftWidth.value;
+          } else if (translationX < -rightThresholdProp) {
+            toValue = -rightWidth.value;
+          }
+        } else if (rowState.value === 1) {
+          // Swiped to left
+          if (translationX > -leftThresholdProp) {
+            toValue = leftWidth.value;
+          }
+        } else {
+          // Swiped to right
+          if (translationX < rightThresholdProp) {
+            toValue = -rightWidth.value;
+          }
         }
-      }
 
-      animateRow(startOffsetX, toValue, velocityX / friction);
-    };
+        animateRow(toValue, velocityX / friction);
+      },
+      [
+        animateRow,
+        friction,
+        leftThreshold,
+        leftWidth,
+        rightThreshold,
+        rightWidth,
+        rowState,
+        userDrag,
+        updateRightElementWidth,
+      ]
+    );
 
-    const close = () => {
+    const close = useCallback(() => {
       'worklet';
-      animateRow(calculateCurrentOffset(), 0);
-    };
-
-    const tapGesture = Gesture.Tap().onStart(() => {
-      if (rowState.value !== 0) {
-        close();
-      }
-    });
-
-    const panGesture = Gesture.Pan()
-      .onUpdate((event: GestureUpdateEvent<PanGestureHandlerEventPayload>) => {
-        userDrag.value = event.translationX;
-
-        const direction =
-          rowState.value === -1
-            ? 'right'
-            : rowState.value === 1
-            ? 'left'
-            : event.translationX > 0
-            ? 'left'
-            : 'right';
-
-        if (rowState.value === 0 && onSwipeableOpenStartDrag) {
-          runOnJS(onSwipeableOpenStartDrag)(direction);
-        } else if (rowState.value !== 0 && onSwipeableCloseStartDrag) {
-          runOnJS(onSwipeableCloseStartDrag)(direction);
-        }
-        updateAnimatedEvent();
-      })
-      .onEnd(
-        (event: GestureStateChangeEvent<PanGestureHandlerEventPayload>) => {
-          handleRelease(event);
-        }
-      );
-
-    if (enableTrackpadTwoFingerGesture) {
-      panGesture.enableTrackpadTwoFingerGesture(enableTrackpadTwoFingerGesture);
-    }
-
-    panGesture.activeOffsetX([
-      -dragOffsetFromRightEdge,
-      dragOffsetFromLeftEdge,
-    ]);
-    tapGesture.shouldCancelWhenOutside(true);
+      animateRow(0);
+    }, [animateRow]);
+
+    const dragStarted = useSharedValue<boolean>(false);
+
+    const tapGesture = useMemo(
+      () =>
+        Gesture.Tap()
+          .shouldCancelWhenOutside(true)
+          .onStart(() => {
+            if (rowState.value !== 0) {
+              close();
+            }
+          }),
+      [close, rowState]
+    );
 
-    useImperativeHandle(ref, () => swipeableMethods.current, [
-      swipeableMethods,
-    ]);
+    const panGesture = useMemo(
+      () =>
+        Gesture.Pan()
+          .enabled(enabled !== false)
+          .enableTrackpadTwoFingerGesture(enableTrackpadTwoFingerGesture)
+          .activeOffsetX([-dragOffsetFromRightEdge, dragOffsetFromLeftEdge])
+          .onStart(() => {
+            updateRightElementWidth();
+          })
+          .onUpdate(
+            (event: GestureUpdateEvent<PanGestureHandlerEventPayload>) => {
+              userDrag.value = event.translationX;
+
+              const direction =
+                rowState.value === -1
+                  ? SwipeDirection.RIGHT
+                  : rowState.value === 1
+                  ? SwipeDirection.LEFT
+                  : event.translationX > 0
+                  ? SwipeDirection.RIGHT
+                  : SwipeDirection.LEFT;
+
+              if (!dragStarted.value) {
+                dragStarted.value = true;
+                if (rowState.value === 0 && onSwipeableOpenStartDrag) {
+                  runOnJS(onSwipeableOpenStartDrag)(direction);
+                } else if (onSwipeableCloseStartDrag) {
+                  runOnJS(onSwipeableCloseStartDrag)(direction);
+                }
+              }
+
+              updateAnimatedEvent();
+            }
+          )
+          .onEnd(
+            (event: GestureStateChangeEvent<PanGestureHandlerEventPayload>) => {
+              handleRelease(event);
+            }
+          )
+          .onFinalize(() => {
+            dragStarted.value = false;
+          }),
+      [
+        dragOffsetFromLeftEdge,
+        dragOffsetFromRightEdge,
+        dragStarted,
+        enableTrackpadTwoFingerGesture,
+        enabled,
+        handleRelease,
+        onSwipeableCloseStartDrag,
+        onSwipeableOpenStartDrag,
+        rowState,
+        updateAnimatedEvent,
+        updateRightElementWidth,
+        userDrag,
+      ]
+    );
 
-    panGesture.enabled(enabled !== false);
+    useImperativeHandle(ref, () => swipeableMethods, [swipeableMethods]);
 
     const animatedStyle = useAnimatedStyle(
       () => ({
@@ -615,8 +671,8 @@ const Swipeable = forwardRef<SwipeableMethods, SwipeableProps>(
           {...remainingProps}
           onLayout={onRowLayout}
           style={[styles.container, containerStyle]}>
-          {leftElement}
-          {rightElement}
+          {leftElement()}
+          {rightElement()}
           <GestureDetector gesture={tapGesture} touchAction="pan-y">
             <Animated.View style={[animatedStyle, childrenContainerStyle]}>
               {children}