Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

fix: onGestureEnd -> endWithSpring uses outdated data via useSharedValue #574

Merged
merged 1 commit into from
May 6, 2024
Merged

fix: onGestureEnd -> endWithSpring uses outdated data via useSharedValue #574

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
24 changes: 13 additions & 11 deletions src/components/ScrollViewGesture.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

For now, I'm explicitly leaving both the function parameter scrollEndVelocityValue and this local const velocity.
We could (should?) eliminate this line, though, and instead rename the function parameter to velocity instead.

// 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 {
Expand All @@ -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;
Expand Down Expand Up @@ -178,9 +181,7 @@ const IScrollViewGesture: React.FC<PropsWithChildren<Props>> = (props) => {
snapEnabled,
translation,
pagingEnabled,
scrollEndVelocity.value,
maxScrollDistancePerSwipe,
scrollEndTranslation.value,
maxScrollDistancePerSwipeIsSet,
],
);
Expand Down Expand Up @@ -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
Expand All @@ -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`,
Expand All @@ -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)
Expand Down