[ReanimatedSwipeable] Multiple bug fixes and improvements (#3149)

## Description

This PR applies multiple bug fixes and improvements to the
`ReanimatedSwipeable`

### Changes:

- Fix reversed swipe direction being supplied to `open` and `willOpen`
callbacks.
- Fix `startDrag` callbacks receiving invalid `direction` when opening
swipeable.
- Fix unpredictable swipe direction being supplied to `close` and
`willClose` callbacks.
- Fix `onSwipeableWillClose` and `onSwipeableClose` callbacks sometimes
being called on open.
- Fix `progress` value skipping last `10%` of it's range and having a
delay relative to the `translation`.
  closes #3147

## Test plan

Will create an example showcasing outputs of all the affected callbacks,
work in progress.

Author: latekvo

src/components/ReanimatedSwipeable.tsx

@@ -41,6 +41,11 @@ type SwipeableExcludes = Exclude<
   'onGestureEvent' | 'onHandlerStateChange'
 >;
 
+enum SwipeDirection {
+  LEFT = 'left',
+  RIGHT = 'right',
+}
+
 export interface SwipeableProps
   extends Pick<PanGestureHandlerProps, SwipeableExcludes> {
   /**
@@ -110,37 +115,45 @@ export interface SwipeableProps
    * Called when action panel gets open (either right or left).
    */
   onSwipeableOpen?: (
-    direction: 'left' | 'right',
+    direction: SwipeDirection.LEFT | SwipeDirection.RIGHT,
     swipeable: SwipeableMethods
   ) => void;
 
   /**
    * Called when action panel is closed.
    */
   onSwipeableClose?: (
-    direction: 'left' | 'right',
+    direction: SwipeDirection.LEFT | SwipeDirection.RIGHT,
     swipeable: SwipeableMethods
   ) => 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.
@@ -270,16 +283,6 @@ const Swipeable = forwardRef<SwipeableMethods, SwipeableProps>(
       rightWidth.value = Math.max(0, rowWidth.value - rightOffset.value);
     };
 
-    const calculateCurrentOffset = useCallback(() => {
-      'worklet';
-      updateRightElementWidth();
-      return rowState.value === 1
-        ? leftWidth.value
-        : rowState.value === -1
-        ? -rowWidth.value - rightOffset.value!
-        : 0;
-    }, [leftWidth, rightOffset, rowState, rowWidth]);
-
     const updateAnimatedEvent = () => {
       'worklet';
 
@@ -334,27 +337,30 @@ const Swipeable = forwardRef<SwipeableMethods, SwipeableProps>(
 
     const dispatchImmediateEvents = useCallback(
       (fromValue: number, toValue: number) => {
-        if (toValue > 0 && onSwipeableWillOpen) {
-          onSwipeableWillOpen('left');
-        } else if (toValue < 0 && onSwipeableWillOpen) {
-          onSwipeableWillOpen('right');
-        } else if (onSwipeableWillClose) {
-          const closingDirection = fromValue > 0 ? 'left' : 'right';
-          onSwipeableWillClose(closingDirection);
+        if (toValue > 0) {
+          onSwipeableWillOpen?.(SwipeDirection.RIGHT);
+        } else if (toValue < 0) {
+          onSwipeableWillOpen?.(SwipeDirection.LEFT);
+        } else {
+          onSwipeableWillClose?.(
+            fromValue > 0 ? SwipeDirection.LEFT : SwipeDirection.RIGHT
+          );
         }
       },
       [onSwipeableWillClose, onSwipeableWillOpen]
     );
 
     const dispatchEndEvents = useCallback(
       (fromValue: number, toValue: number) => {
-        if (toValue > 0 && onSwipeableOpen) {
-          onSwipeableOpen('left', swipeableMethods.current);
-        } else if (toValue < 0 && onSwipeableOpen) {
-          onSwipeableOpen('right', swipeableMethods.current);
-        } else if (onSwipeableClose) {
-          const closingDirection = fromValue > 0 ? 'left' : 'right';
-          onSwipeableClose(closingDirection, swipeableMethods.current);
+        if (toValue > 0) {
+          onSwipeableOpen?.(SwipeDirection.RIGHT, swipeableMethods.current);
+        } else if (toValue < 0) {
+          onSwipeableOpen?.(SwipeDirection.LEFT, swipeableMethods.current);
+        } else {
+          onSwipeableClose?.(
+            fromValue > 0 ? SwipeDirection.LEFT : SwipeDirection.RIGHT,
+            swipeableMethods.current
+          );
         }
       },
       [onSwipeableClose, onSwipeableOpen]
@@ -363,9 +369,8 @@ const Swipeable = forwardRef<SwipeableMethods, SwipeableProps>(
     const animationOptionsProp = animationOptions;
 
     const animateRow = useCallback(
-      (fromValue: number, toValue: number, velocityX?: number) => {
+      (toValue: number, velocityX?: number) => {
         'worklet';
-        rowState.value = Math.sign(toValue);
 
         const translationSpringConfig = {
           duration: 1000,
@@ -376,17 +381,34 @@ const Swipeable = forwardRef<SwipeableMethods, SwipeableProps>(
           ...animationOptionsProp,
         };
 
+        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,
-          velocity: 0,
+          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) {
-              runOnJS(dispatchEndEvents)(fromValue, toValue);
+              runOnJS(dispatchEndEvents)(frozenRowState, toValue);
             }
           }
         );
@@ -402,7 +424,9 @@ const Swipeable = forwardRef<SwipeableMethods, SwipeableProps>(
             ? withSpring(progressTarget, progressSpringConfig)
             : 0;
 
-        runOnJS(dispatchImmediateEvents)(fromValue, toValue);
+        runOnJS(dispatchImmediateEvents)(frozenRowState, toValue);
+
+        rowState.value = Math.sign(toValue);
       },
       [
         rowState,
@@ -432,15 +456,15 @@ const Swipeable = forwardRef<SwipeableMethods, SwipeableProps>(
     swipeableMethods.current = {
       close() {
         'worklet';
-        animateRow(calculateCurrentOffset(), 0);
+        animateRow(0);
       },
       openLeft() {
         'worklet';
-        animateRow(calculateCurrentOffset(), leftWidth.value);
+        animateRow(leftWidth.value);
       },
       openRight() {
         'worklet';
-        animateRow(calculateCurrentOffset(), -rightWidth.value);
+        animateRow(-rightWidth.value);
       },
       reset() {
         'worklet';
@@ -496,7 +520,6 @@ const Swipeable = forwardRef<SwipeableMethods, SwipeableProps>(
       const leftThreshold = leftThresholdProp ?? leftWidth.value / 2;
       const rightThreshold = rightThresholdProp ?? rightWidth.value / 2;
 
-      const startOffsetX = calculateCurrentOffset() + userDrag.value / friction;
       const translationX = (userDrag.value + DRAG_TOSS * velocityX) / friction;
 
       let toValue = 0;
@@ -519,12 +542,12 @@ const Swipeable = forwardRef<SwipeableMethods, SwipeableProps>(
         }
       }
 
-      animateRow(startOffsetX, toValue, velocityX / friction);
+      animateRow(toValue, velocityX / friction);
     };
 
     const close = () => {
       'worklet';
-      animateRow(calculateCurrentOffset(), 0);
+      animateRow(0);
     };
 
     const tapGesture = Gesture.Tap().onStart(() => {
@@ -541,12 +564,12 @@ const Swipeable = forwardRef<SwipeableMethods, SwipeableProps>(
 
         const direction =
           rowState.value === -1
-            ? 'right'
+            ? SwipeDirection.RIGHT
             : rowState.value === 1
-            ? 'left'
+            ? SwipeDirection.LEFT
             : event.translationX > 0
-            ? 'left'
-            : 'right';
+            ? SwipeDirection.RIGHT
+            : SwipeDirection.LEFT;
 
         if (!dragStarted.value) {
           dragStarted.value = true;