fix: onGestureEnd -> endWithSpring uses outdated data via useSharedValue

dohooo · Mar 23, 2024 · 86da6ac · 86da6ac
1 parent d787848
commit 86da6ac
Showing 1 changed file with 13 additions and 11 deletions.
diff --git a/src/components/ScrollViewGesture.tsx b/src/components/ScrollViewGesture.tsx
@@ -116,15 +116,18 @@ const IScrollViewGesture: React.FC<PropsWithChildren<Props>> = (props) => {
   );
 
   const endWithSpring = React.useCallback(
-    (onFinished?: () => void) => {
+    (scrollEndTranslationValue: number,
+      scrollEndVelocityValue: number,
+      onFinished?: () => void,
+    ) => {
       "worklet";
       const origin = translation.value;
-      const velocity = scrollEndVelocity.value;
+      const velocity = scrollEndVelocityValue;
       // Default to scroll in the direction of the slide (with deceleration)
       let finalTranslation: number = withDecay({ velocity, deceleration: 0.999 });
 
       // If the distance of the swipe exceeds the max scroll distance, keep the view at the current position
-      if (maxScrollDistancePerSwipeIsSet && Math.abs(scrollEndTranslation.value) > maxScrollDistancePerSwipe) {
+      if (maxScrollDistancePerSwipeIsSet && Math.abs(scrollEndTranslationValue) > maxScrollDistancePerSwipe) {
         finalTranslation = origin;
       }
       else {
@@ -137,9 +140,9 @@ const IScrollViewGesture: React.FC<PropsWithChildren<Props>> = (props) => {
         * */
         if (pagingEnabled) {
           // distance with direction
-          const offset = -(scrollEndTranslation.value >= 0 ? 1 : -1); // 1 or -1
+          const offset = -(scrollEndTranslationValue >= 0 ? 1 : -1); // 1 or -1
           const computed = offset < 0 ? Math.ceil : Math.floor;
-          const page = computed(-translation.value / size);
+          const page = computed(-origin / size);
 
           if (loop) {
             const finalPage = page + offset;
@@ -178,9 +181,7 @@ const IScrollViewGesture: React.FC<PropsWithChildren<Props>> = (props) => {
       snapEnabled,
       translation,
       pagingEnabled,
-      scrollEndVelocity.value,
       maxScrollDistancePerSwipe,
-      scrollEndTranslation.value,
       maxScrollDistancePerSwipeIsSet,
     ],
   );
@@ -335,9 +336,10 @@ const IScrollViewGesture: React.FC<PropsWithChildren<Props>> = (props) => {
     "worklet";
 
     const { velocityX, velocityY, translationX, translationY } = e;
-    scrollEndVelocity.value = isHorizontal.value
+    const scrollEndVelocityValue = isHorizontal.value
       ? velocityX
       : velocityY;
+    scrollEndVelocity.value = scrollEndVelocityValue; // may update async: see https://docs.swmansion.com/react-native-reanimated/docs/core/useSharedValue#remarks
 
     let panTranslation = isHorizontal.value
       ? translationX
@@ -349,9 +351,9 @@ const IScrollViewGesture: React.FC<PropsWithChildren<Props>> = (props) => {
     else if (fixedDirection === "positive")
       panTranslation = +Math.abs(panTranslation);
 
-    scrollEndTranslation.value = panTranslation;
+    scrollEndTranslation.value = panTranslation; // may update async: see https://docs.swmansion.com/react-native-reanimated/docs/core/useSharedValue#remarks
 
-    const totalTranslation = scrollEndVelocity.value + scrollEndTranslation.value;
+    const totalTranslation = scrollEndVelocityValue + panTranslation;
 
     /**
      * If the maximum scroll distance is set and the translation `exceeds the maximum scroll distance`,
@@ -374,7 +376,7 @@ const IScrollViewGesture: React.FC<PropsWithChildren<Props>> = (props) => {
       translation.value = withSpring(withProcessTranslation(nextPage), onScrollEnd);
     }
     else {
-      endWithSpring(onScrollEnd);
+      endWithSpring(panTranslation, scrollEndVelocityValue, onScrollEnd);
     }
 
     if (!loop)