diff --git a/src/components/ScrollViewGesture.tsx b/src/components/ScrollViewGesture.tsx index 41e39b4b..80a3fe0c 100644 --- a/src/components/ScrollViewGesture.tsx +++ b/src/components/ScrollViewGesture.tsx @@ -116,15 +116,18 @@ const IScrollViewGesture: React.FC> = (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> = (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> = (props) => { snapEnabled, translation, pagingEnabled, - scrollEndVelocity.value, maxScrollDistancePerSwipe, - scrollEndTranslation.value, maxScrollDistancePerSwipeIsSet, ], ); @@ -335,9 +336,10 @@ const IScrollViewGesture: React.FC> = (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> = (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> = (props) => { translation.value = withSpring(withProcessTranslation(nextPage), onScrollEnd); } else { - endWithSpring(onScrollEnd); + endWithSpring(panTranslation, scrollEndVelocityValue, onScrollEnd); } if (!loop)