Fix Swipeable misalignment after resizing on web

src/components/ReanimatedSwipeable.tsx

@@ -20,7 +20,10 @@ import type { PanGestureHandlerEventPayload } from '../handlers/GestureHandlerEv
 import Animated, {
   SharedValue,
   interpolate,
+  measure,
   runOnJS,
+  runOnUI,
+  useAnimatedRef,
   useAnimatedStyle,
   useSharedValue,
   withSpring,
@@ -256,20 +259,9 @@ const Swipeable = forwardRef<SwipeableMethods, SwipeableProps>(
     const leftWidth = useSharedValue<number>(0);
     const rightWidth = 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 updateRightElementWidth = useCallback(() => {
-      'worklet';
-      if (rightOffset.value === null) {
-        rightOffset.value = rowWidth.value;
-      }
-      rightWidth.value = Math.max(0, rowWidth.value - rightOffset.value);
-    }, [rightOffset, rightWidth, rowWidth]);
-
     const updateAnimatedEvent = useCallback(() => {
       'worklet';
 
@@ -451,8 +443,7 @@ const Swipeable = forwardRef<SwipeableMethods, SwipeableProps>(
         },
         openRight() {
           'worklet';
-          // rightOffset and rowWidth are already much sooner than rightWidth
-          animateRow((rightOffset.value ?? 0) - rowWidth.value);
+          animateRow(-rightWidth.value);
         },
         reset() {
           'worklet';
@@ -464,8 +455,7 @@ const Swipeable = forwardRef<SwipeableMethods, SwipeableProps>(
       }),
       [
         leftWidth,
-        rightOffset,
-        rowWidth,
+        rightWidth,
         userDrag,
         showLeftProgress,
         appliedTranslation,
@@ -474,11 +464,21 @@ const Swipeable = forwardRef<SwipeableMethods, SwipeableProps>(
       ]
     );
 
+    const leftLayoutRef = useAnimatedRef();
+    const rightLayoutRef = useAnimatedRef();
+
     const onRowLayout = useCallback(
       ({ nativeEvent }: LayoutChangeEvent) => {
         rowWidth.value = nativeEvent.layout.width;
+        runOnUI(() => {
+          'worklet';
+          const leftLayout = measure(leftLayoutRef);
+          const rightLayout = measure(rightLayoutRef);
+          leftWidth.value = leftLayout?.pageX ?? 0;
+          rightWidth.value = rowWidth.value - (rightLayout?.pageX ?? 0);
+        });
       },
-      [rowWidth]
+      [leftLayoutRef, rightLayoutRef, leftWidth, rightWidth, rowWidth]
     );
 
     const leftElement = useCallback(
@@ -489,7 +489,8 @@ const Swipeable = forwardRef<SwipeableMethods, SwipeableProps>(
             appliedTranslation,
             swipeableMethods
           )}
-          <View
+          <Animated.View
+            ref={leftLayoutRef}
             onLayout={({ nativeEvent }) =>
               (leftWidth.value = nativeEvent.layout.x)
             }
@@ -498,6 +499,7 @@ const Swipeable = forwardRef<SwipeableMethods, SwipeableProps>(
       ),
       [
         appliedTranslation,
+        leftLayoutRef,
         leftWidth,
         renderLeftActions,
         showLeftProgress,
@@ -513,17 +515,23 @@ const Swipeable = forwardRef<SwipeableMethods, SwipeableProps>(
             appliedTranslation,
             swipeableMethods
           )}
-          <View
+          <Animated.View
+            ref={rightLayoutRef}
             onLayout={({ nativeEvent }) => {
-              rightOffset.value = nativeEvent.layout.x;
+              rightWidth.value = Math.max(
+                rowWidth.value - nativeEvent.layout.x,
+                0
+              );
             }}
           />
         </Animated.View>
       ),
       [
         appliedTranslation,
         renderRightActions,
-        rightOffset,
+        rightLayoutRef,
+        rightWidth,
+        rowWidth,
         showRightProgress,
         swipeableMethods,
       ]
@@ -535,8 +543,6 @@ const Swipeable = forwardRef<SwipeableMethods, SwipeableProps>(
         const { velocityX } = event;
         userDrag.value = event.translationX;
 
-        updateRightElementWidth();
-
         const leftThresholdProp = leftThreshold ?? leftWidth.value / 2;
         const rightThresholdProp = rightThreshold ?? rightWidth.value / 2;
 
@@ -574,7 +580,6 @@ const Swipeable = forwardRef<SwipeableMethods, SwipeableProps>(
         rightWidth,
         rowState,
         userDrag,
-        updateRightElementWidth,
       ]
     );
 
@@ -603,9 +608,6 @@ const Swipeable = forwardRef<SwipeableMethods, SwipeableProps>(
           .enabled(enabled !== false)
           .enableTrackpadTwoFingerGesture(enableTrackpadTwoFingerGesture)
           .activeOffsetX([-dragOffsetFromRightEdge, dragOffsetFromLeftEdge])
-          .onStart(() => {
-            updateRightElementWidth();
-          })
           .onUpdate(
             (event: GestureUpdateEvent<PanGestureHandlerEventPayload>) => {
               userDrag.value = event.translationX;
@@ -650,7 +652,6 @@ const Swipeable = forwardRef<SwipeableMethods, SwipeableProps>(
         onSwipeableOpenStartDrag,
         rowState,
         updateAnimatedEvent,
-        updateRightElementWidth,
         userDrag,
       ]
     );