Skip to content

Commit 9fa1413

Browse files
authored
Fix elements dissapearing due to high values set to threshold props in ReanimatedSwipeable (#3153)
## Description Remove mechanism hiding elements which are already out of screen to fix a bug where this mechanism sometimes fired when the element was still on the screen. Still researching why elements had to be hidden in the first place. First commit adding the feature which is removed in this PR: ([link](radko93@fdef400)) ## Test plan - open `Swipeable Reanimation` example - open the `Reanimated` swipeable - close it but just enough to stop seeing the `red` element - due to `threshold` set to `80`, which is `2` times the width of the element, the swipeable fails to close - swipeable retracts to open - before this fix, the `red` element wouldn't be visible
1 parent f05604c commit 9fa1413

File tree

1 file changed

+3
-40
lines changed

1 file changed

+3
-40
lines changed

src/components/ReanimatedSwipeable.tsx

Lines changed: 3 additions & 40 deletions
Original file line numberDiff line numberDiff line change
@@ -18,7 +18,6 @@ import {
1818
import type { PanGestureHandlerProps } from '../handlers/PanGestureHandler';
1919
import type { PanGestureHandlerEventPayload } from '../handlers/GestureHandlerEventPayload';
2020
import Animated, {
21-
Extrapolation,
2221
SharedValue,
2322
interpolate,
2423
runOnJS,
@@ -232,9 +231,6 @@ const Swipeable = forwardRef<SwipeableMethods, SwipeableProps>(
232231
const rightWidth = useSharedValue<number>(0);
233232
const rightOffset = useSharedValue<number | null>(null);
234233

235-
const leftActionTranslate = useSharedValue<number>(0);
236-
const rightActionTranslate = useSharedValue<number>(0);
237-
238234
const showLeftProgress = useSharedValue<number>(0);
239235
const showRightProgress = useSharedValue<number>(0);
240236

@@ -325,12 +321,7 @@ const Swipeable = forwardRef<SwipeableMethods, SwipeableProps>(
325321
[0, 0, 1]
326322
)
327323
: 0;
328-
leftActionTranslate.value = interpolate(
329-
showLeftProgress.value,
330-
[0, Number.MIN_VALUE],
331-
[-10000, 0],
332-
Extrapolation.CLAMP
333-
);
324+
334325
showRightProgress.value =
335326
rightWidth.value > 0
336327
? interpolate(
@@ -339,12 +330,6 @@ const Swipeable = forwardRef<SwipeableMethods, SwipeableProps>(
339330
[1, 0, 0]
340331
)
341332
: 0;
342-
rightActionTranslate.value = interpolate(
343-
showRightProgress.value,
344-
[0, Number.MIN_VALUE],
345-
[-10000, 0],
346-
Extrapolation.CLAMP
347-
);
348333
};
349334

350335
const dispatchImmediateEvents = useCallback(
@@ -466,19 +451,8 @@ const Swipeable = forwardRef<SwipeableMethods, SwipeableProps>(
466451
},
467452
};
468453

469-
const leftAnimatedStyle = useAnimatedStyle(
470-
() => ({
471-
transform: [
472-
{
473-
translateX: leftActionTranslate.value,
474-
},
475-
],
476-
}),
477-
[leftActionTranslate]
478-
);
479-
480454
const leftElement = renderLeftActions && (
481-
<Animated.View style={[styles.leftActions, leftAnimatedStyle]}>
455+
<Animated.View style={[styles.leftActions]}>
482456
{renderLeftActions(
483457
showLeftProgress,
484458
appliedTranslation,
@@ -492,19 +466,8 @@ const Swipeable = forwardRef<SwipeableMethods, SwipeableProps>(
492466
</Animated.View>
493467
);
494468

495-
const rightAnimatedStyle = useAnimatedStyle(
496-
() => ({
497-
transform: [
498-
{
499-
translateX: rightActionTranslate.value,
500-
},
501-
],
502-
}),
503-
[rightActionTranslate]
504-
);
505-
506469
const rightElement = renderRightActions && (
507-
<Animated.View style={[styles.rightActions, rightAnimatedStyle]}>
470+
<Animated.View style={[styles.rightActions]}>
508471
{renderRightActions(
509472
showRightProgress,
510473
appliedTranslation,

0 commit comments

Comments
 (0)