fix swipeable detecting incorrect right element width, when right ele…

…ment is not present
software-mansion · Oct 9, 2024 · 2f511a3 · 2f511a3
1 parent 125555e
commit 2f511a3
Showing 1 changed file with 14 additions and 5 deletions.
diff --git a/src/components/ReanimatedSwipeable.tsx b/src/components/ReanimatedSwipeable.tsx
@@ -231,7 +231,7 @@ const Swipeable = forwardRef<SwipeableMethods, SwipeableProps>(
     const rowWidth = useSharedValue<number>(0);
     const leftWidth = useSharedValue<number>(0);
     const rightWidth = useSharedValue<number>(0);
-    const rightOffset = useSharedValue<number>(0);
+    const rightOffset = useSharedValue<number | null>(null);
 
     const leftActionTranslate = useSharedValue<number>(0);
     const rightActionTranslate = useSharedValue<number>(0);
@@ -267,19 +267,29 @@ const Swipeable = forwardRef<SwipeableMethods, SwipeableProps>(
     const overshootLeftProp = overshootLeft;
     const overshootRightProp = overshootRight;
 
+    const updateRightElementWidth = () => {
+      'worklet';
+      if (rightOffset.value === null) {
+        rightOffset.value = rowWidth.value;
+      }
+      rightWidth.value = Math.max(0, rowWidth.value - rightOffset.value);
+    };
+
     const calculateCurrentOffset = useCallback(() => {
       'worklet';
+      updateRightElementWidth();
       if (rowState.value === 1) {
         return leftWidth.value;
       } else if (rowState.value === -1) {
-        return -rowWidth.value - rightOffset.value;
+        return -rowWidth.value - rightOffset.value!;
       }
       return 0;
     }, [leftWidth, rightOffset, rowState, rowWidth]);
 
     const updateAnimatedEvent = () => {
       'worklet';
-      rightWidth.value = Math.max(0, rowWidth.value - rightOffset.value);
+
+      updateRightElementWidth();
 
       const overshootLeft = overshootLeftProp ?? leftWidth.value > 0;
       const overshootRight = overshootRightProp ?? rightWidth.value > 0;
@@ -447,7 +457,6 @@ const Swipeable = forwardRef<SwipeableMethods, SwipeableProps>(
       },
       openRight() {
         'worklet';
-        rightWidth.value = rowWidth.value - rightOffset.value;
         animateRow(calculateCurrentOffset(), -rightWidth.value);
       },
       reset() {
@@ -521,7 +530,7 @@ const Swipeable = forwardRef<SwipeableMethods, SwipeableProps>(
       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;