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

Fix Swipeable misalignment after resizing on web #3341

Open
wants to merge 7 commits into
base: main
Choose a base branch
from
+28 −27
Open

Fix Swipeable misalignment after resizing on web #3341

Changes from all commits
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
f9ca03d
remove rightOffset and updateRightElementWidth
latekvo Jan 16, 2025
c89c654
update left and right widths on layout change listener
latekvo Jan 16, 2025
746ac97
fix .value deps inclusion
latekvo Jan 16, 2025
f9fbace
use pageX for dynamic resizing, set row width synchronyously
latekvo Jan 17, 2025
fb15a34
remove redundant runOnUI instances
latekvo Jan 17, 2025
f360ce8
use synchronous measure to fix pre-render width bug on slow devices
latekvo Jan 17, 2025
22662bb
add explicit workletization
latekvo Jan 17, 2025
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
55 changes: 28 additions & 27 deletions src/components/ReanimatedSwipeable.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -20,7 +20,10 @@ import type { PanGestureHandlerEventPayload } from '../handlers/GestureHandlerEv
import Animated, {
SharedValue,
interpolate,
measure,
runOnJS,
runOnUI,
useAnimatedRef,
useAnimatedStyle,
useSharedValue,
withSpring,
Expand Down Expand Up @@ -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';

Expand Down Expand Up @@ -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';
Expand All @@ -464,8 +455,7 @@ const Swipeable = forwardRef<SwipeableMethods, SwipeableProps>(
}),
[
leftWidth,
rightOffset,
rowWidth,
rightWidth,
userDrag,
showLeftProgress,
appliedTranslation,
Expand All @@ -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(
Expand All @@ -489,7 +489,8 @@ const Swipeable = forwardRef<SwipeableMethods, SwipeableProps>(
appliedTranslation,
swipeableMethods
)}
<View
<Animated.View
ref={leftLayoutRef}
onLayout={({ nativeEvent }) =>
(leftWidth.value = nativeEvent.layout.x)
}
Expand All @@ -498,6 +499,7 @@ const Swipeable = forwardRef<SwipeableMethods, SwipeableProps>(
),
[
appliedTranslation,
leftLayoutRef,
leftWidth,
renderLeftActions,
showLeftProgress,
Expand All @@ -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,
]
Expand All @@ -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;

Expand Down Expand Up @@ -574,7 +580,6 @@ const Swipeable = forwardRef<SwipeableMethods, SwipeableProps>(
rightWidth,
rowState,
userDrag,
updateRightElementWidth,
]
);

Expand Down Expand Up @@ -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;
Expand Down Expand Up @@ -650,7 +652,6 @@ const Swipeable = forwardRef<SwipeableMethods, SwipeableProps>(
onSwipeableOpenStartDrag,
rowState,
updateAnimatedEvent,
updateRightElementWidth,
userDrag,
]
);
Expand Down
Loading