Skip to content

Commit 4b8bcf5

Browse files
authored
Fix swipeable swiping to left when no renderRightActions is set (#3145)
## Description Fixed `Swipeable` being able to be opened to the left when no right element is present. This was caused by incorrectly set `rightOffset`, equal to `0` when no elements were present, even though it should've been set to `rowWidth` ## Test plan - Open any swipeable example in the example app - Remove the `renderRightActions` prop - See how before this fix, `Swipeable` could've still been opened to the left, and now it can't be.
1 parent 3c3d87b commit 4b8bcf5

File tree

1 file changed

+18
-10
lines changed

1 file changed

+18
-10
lines changed

src/components/ReanimatedSwipeable.tsx

Lines changed: 18 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -230,7 +230,7 @@ const Swipeable = forwardRef<SwipeableMethods, SwipeableProps>(
230230
const rowWidth = useSharedValue<number>(0);
231231
const leftWidth = useSharedValue<number>(0);
232232
const rightWidth = useSharedValue<number>(0);
233-
const rightOffset = useSharedValue<number>(0);
233+
const rightOffset = useSharedValue<number | null>(null);
234234

235235
const leftActionTranslate = useSharedValue<number>(0);
236236
const rightActionTranslate = useSharedValue<number>(0);
@@ -266,19 +266,28 @@ const Swipeable = forwardRef<SwipeableMethods, SwipeableProps>(
266266
const overshootLeftProp = overshootLeft;
267267
const overshootRightProp = overshootRight;
268268

269-
const calculateCurrentOffset = useCallback(() => {
269+
const updateRightElementWidth = () => {
270270
'worklet';
271-
if (rowState.value === 1) {
272-
return leftWidth.value;
273-
} else if (rowState.value === -1) {
274-
return -rowWidth.value - rightOffset.value;
271+
if (rightOffset.value === null) {
272+
rightOffset.value = rowWidth.value;
275273
}
276-
return 0;
274+
rightWidth.value = Math.max(0, rowWidth.value - rightOffset.value);
275+
};
276+
277+
const calculateCurrentOffset = useCallback(() => {
278+
'worklet';
279+
updateRightElementWidth();
280+
return rowState.value === 1
281+
? leftWidth.value
282+
: rowState.value === -1
283+
? -rowWidth.value - rightOffset.value!
284+
: 0;
277285
}, [leftWidth, rightOffset, rowState, rowWidth]);
278286

279287
const updateAnimatedEvent = () => {
280288
'worklet';
281-
rightWidth.value = Math.max(0, rowWidth.value - rightOffset.value);
289+
290+
updateRightElementWidth();
282291

283292
const overshootLeft = overshootLeftProp ?? leftWidth.value > 0;
284293
const overshootRight = overshootRightProp ?? rightWidth.value > 0;
@@ -446,7 +455,6 @@ const Swipeable = forwardRef<SwipeableMethods, SwipeableProps>(
446455
},
447456
openRight() {
448457
'worklet';
449-
rightWidth.value = rowWidth.value - rightOffset.value;
450458
animateRow(calculateCurrentOffset(), -rightWidth.value);
451459
},
452460
reset() {
@@ -520,7 +528,7 @@ const Swipeable = forwardRef<SwipeableMethods, SwipeableProps>(
520528
const { velocityX } = event;
521529
userDrag.value = event.translationX;
522530

523-
rightWidth.value = rowWidth.value - rightOffset.value;
531+
updateRightElementWidth();
524532

525533
const leftThreshold = leftThresholdProp ?? leftWidth.value / 2;
526534
const rightThreshold = rightThresholdProp ?? rightWidth.value / 2;

0 commit comments

Comments
 (0)