Skip to content

Commit

Permalink
Fix elements dissapearing due to high values set to threshold props…
Browse files Browse the repository at this point in the history
… 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
  • Loading branch information
latekvo authored Oct 14, 2024
1 parent f05604c commit 9fa1413
Showing 1 changed file with 3 additions and 40 deletions.
43 changes: 3 additions & 40 deletions src/components/ReanimatedSwipeable.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -18,7 +18,6 @@ import {
import type { PanGestureHandlerProps } from '../handlers/PanGestureHandler';
import type { PanGestureHandlerEventPayload } from '../handlers/GestureHandlerEventPayload';
import Animated, {
Extrapolation,
SharedValue,
interpolate,
runOnJS,
Expand Down Expand Up @@ -232,9 +231,6 @@ const Swipeable = forwardRef<SwipeableMethods, SwipeableProps>(
const rightWidth = useSharedValue<number>(0);
const rightOffset = useSharedValue<number | null>(null);

const leftActionTranslate = useSharedValue<number>(0);
const rightActionTranslate = useSharedValue<number>(0);

const showLeftProgress = useSharedValue<number>(0);
const showRightProgress = useSharedValue<number>(0);

Expand Down Expand Up @@ -325,12 +321,7 @@ const Swipeable = forwardRef<SwipeableMethods, SwipeableProps>(
[0, 0, 1]
)
: 0;
leftActionTranslate.value = interpolate(
showLeftProgress.value,
[0, Number.MIN_VALUE],
[-10000, 0],
Extrapolation.CLAMP
);

showRightProgress.value =
rightWidth.value > 0
? interpolate(
Expand All @@ -339,12 +330,6 @@ const Swipeable = forwardRef<SwipeableMethods, SwipeableProps>(
[1, 0, 0]
)
: 0;
rightActionTranslate.value = interpolate(
showRightProgress.value,
[0, Number.MIN_VALUE],
[-10000, 0],
Extrapolation.CLAMP
);
};

const dispatchImmediateEvents = useCallback(
Expand Down Expand Up @@ -466,19 +451,8 @@ const Swipeable = forwardRef<SwipeableMethods, SwipeableProps>(
},
};

const leftAnimatedStyle = useAnimatedStyle(
() => ({
transform: [
{
translateX: leftActionTranslate.value,
},
],
}),
[leftActionTranslate]
);

const leftElement = renderLeftActions && (
<Animated.View style={[styles.leftActions, leftAnimatedStyle]}>
<Animated.View style={[styles.leftActions]}>
{renderLeftActions(
showLeftProgress,
appliedTranslation,
Expand All @@ -492,19 +466,8 @@ const Swipeable = forwardRef<SwipeableMethods, SwipeableProps>(
</Animated.View>
);

const rightAnimatedStyle = useAnimatedStyle(
() => ({
transform: [
{
translateX: rightActionTranslate.value,
},
],
}),
[rightActionTranslate]
);

const rightElement = renderRightActions && (
<Animated.View style={[styles.rightActions, rightAnimatedStyle]}>
<Animated.View style={[styles.rightActions]}>
{renderRightActions(
showRightProgress,
appliedTranslation,
Expand Down

0 comments on commit 9fa1413

Please sign in to comment.