Swipeable iOS action on overshoot swipe

[jacobrosenskold]

Is there any support for the most outer button action to activate on overshoot swipe?

[osdnk]

Hi @Jarrx,
Thank you for using this library.
Currently it's not supported and we do not plan to do it as it's very specific use case. If you wish, let you check react-native-reanimated and try to do it with cond and call nodes, which might help to solve your issue.
If you still face some problems, please comment this and I will try to help you 😄

[switz]

Not sure why this is a 'very specific' use-case as it seems general enough to be used in a multitude of scenarios. But nonetheless, thank you for the work on this library, it really is very nice. Cheers.

[vicary]

This could be done by listening on the drag interpolation value, synchronized (or imperative) actions in render methods are kind of against the React mindset though.

[zabojad]

I need it too. Is it still not supported?

[tncbbthositg]

"Very specific" is a curious choice of words. It's not like, "this is an uncommon use case;" rather, "this is a specific . . . albeit common . . . use case." Specifically, the use case is when you want your swipeable to trigger a default action when your user pulls hard enough. :)

[bjoern-sellnau]

anyone have a solution for this or any library which solves this problem ?

[arnekolja]

Any updates on this? Or has anybody been able to solve it with a decent workaround? It's such a common thing, almost every single iOS app that's offering swipe-to-delete or swipe-to-archive does have it …

[patrikholcak]

I don’t understand why this has not been implemented, seems like such a low hanging fruit and basic functionality for swipable rows.

Here’s a patch you can apply using patch-package in which I tried to implement it.

Patch

diff --git a/node_modules/react-native-gesture-handler/lib/typescript/components/ReanimatedSwipeable.d.ts b/node_modules/react-native-gesture-handler/lib/typescript/components/ReanimatedSwipeable.d.ts
index 7a1769f..6c5800f 100644
--- a/node_modules/react-native-gesture-handler/lib/typescript/components/ReanimatedSwipeable.d.ts
+++ b/node_modules/react-native-gesture-handler/lib/typescript/components/ReanimatedSwipeable.d.ts
@@ -113,6 +113,24 @@ export interface SwipeableProps extends Pick<PanGestureHandlerProps, SwipeableEx
      * apply `flex: 1`
      */
     childrenContainerStyle?: StyleProp<ViewStyle>;
+    /**
+     * Distance from the left edge at which released panel will animate to the
+     * closed state and perform an overshoot action
+     */
+    leftOvershootThreshold?: number;
+    /**
+     * Called when the drag distance is larger than `leftOvershootThreshold`.
+     */
+    onLeftOvershoot?: () => void;
+    /**
+     * Distance from the right edge at which released panel will animate to the
+     * closed state and perform an overshoot action
+     */
+    rightOvershootThreshold?: number;
+    /**
+     * Called when the drag distance is larger than `rightOvershootThreshold`.
+     */
+    onRightOvershoot?: () => void;
 }
 export interface SwipeableMethods {
     close: () => void;
diff --git a/node_modules/react-native-gesture-handler/src/components/ReanimatedSwipeable.tsx b/node_modules/react-native-gesture-handler/src/components/ReanimatedSwipeable.tsx
index 40e760c..6b5d8c8 100644
--- a/node_modules/react-native-gesture-handler/src/components/ReanimatedSwipeable.tsx
+++ b/node_modules/react-native-gesture-handler/src/components/ReanimatedSwipeable.tsx
@@ -185,6 +185,11 @@ export interface SwipeableProps
    * apply `flex: 1`
    */
   childrenContainerStyle?: StyleProp<ViewStyle>;
+
+  leftOvershootThreshold?: number;
+  onLeftOvershoot?: () => void;
+  rightOvershootThreshold?: number;
+  onRightOvershoot?: () => void;
 }
 
 export interface SwipeableMethods {
@@ -216,6 +221,10 @@ const Swipeable = forwardRef<SwipeableMethods, SwipeableProps>(
       onSwipeableOpen,
       onSwipeableClose,
       testID,
+      leftOvershootThreshold = 0,
+      rightOvershootThreshold = 0,
+      onLeftOvershoot,
+      onRightOvershoot,
       ...remainingProps
     } = props;
 
@@ -336,7 +345,12 @@ const Swipeable = forwardRef<SwipeableMethods, SwipeableProps>(
     };
 
     const dispatchImmediateEvents = useCallback(
-      (fromValue: number, toValue: number) => {
+      (fromValue: number, toValue: number, originalTranslate: number = 0, isOvershoot?: boolean) => {
+        if (isOvershoot) {
+          if (originalTranslate < 0) onLeftOvershoot?.()
+          else onRightOvershoot?.()
+        }
+
         if (toValue > 0 && onSwipeableWillOpen) {
           onSwipeableWillOpen('left');
         } else if (toValue < 0 && onSwipeableWillOpen) {
@@ -351,6 +365,8 @@ const Swipeable = forwardRef<SwipeableMethods, SwipeableProps>(
 
     const dispatchEndEvents = useCallback(
       (fromValue: number, toValue: number) => {
+
+
         if (toValue > 0 && onSwipeableOpen) {
           onSwipeableOpen('left', swipeableMethods.current);
         } else if (toValue < 0 && onSwipeableOpen) {
@@ -366,7 +382,7 @@ const Swipeable = forwardRef<SwipeableMethods, SwipeableProps>(
     const animationOptionsProp = animationOptions;
 
     const animateRow = useCallback(
-      (fromValue: number, toValue: number, velocityX?: number) => {
+      (fromValue: number, toValue: number, velocityX?: number, originalTranslate?: number, isOvershoot?: boolean) => {
         'worklet';
         rowState.value = Math.sign(toValue);
 
@@ -405,7 +421,7 @@ const Swipeable = forwardRef<SwipeableMethods, SwipeableProps>(
             ? withSpring(progressTarget, progressSpringConfig)
             : 0;
 
-        runOnJS(dispatchImmediateEvents)(fromValue, toValue);
+        runOnJS(dispatchImmediateEvents)(fromValue, toValue, originalTranslate, isOvershoot);
       },
       [
         rowState,
@@ -522,7 +538,8 @@ const Swipeable = forwardRef<SwipeableMethods, SwipeableProps>(
       const leftThreshold = leftThresholdProp ?? leftWidth.value / 2;
       const rightThreshold = rightThresholdProp ?? rightWidth.value / 2;
 
-      const startOffsetX = calculateCurrentOffset() + userDrag.value / friction;
+      const currentOffset = calculateCurrentOffset()
+      const startOffsetX = currentOffset + userDrag.value / friction;
       const translationX = (userDrag.value + DRAG_TOSS * velocityX) / friction;
 
       let toValue = 0;
@@ -545,7 +562,11 @@ const Swipeable = forwardRef<SwipeableMethods, SwipeableProps>(
         }
       }
 
-      animateRow(startOffsetX, toValue, velocityX / friction);
+      const isOvershootLeft = overshootLeft != false && leftElement && translationX > leftOvershootThreshold
+      const isOvershootRight = overshootRight != false && rightElement && translationX < -rightOvershootThreshold
+      if (isOvershootLeft || isOvershootRight) toValue = 0;
+
+      animateRow(startOffsetX, toValue, velocityX / friction, translationX, isOvershootLeft || isOvershootRight);
     };
 
     const close = () => {

Usage

import Swipeable from "react-native-gesture-handler/ReanimatedSwipeable";

export function SwipeableRow() {
  return (
    <Swipeable
      friction={2}
      overshootFriction={15}
      containerStyle={styles.swipeable}

      renderLeftActions={LeftAction}
      leftThreshold={20}
      leftOvershootThreshold={60}
      onLeftOvershoot={() => {
        console.log("onLeftOvershoot");
      }}
      
      renderRightActions={RightAction}
      rightThreshold={20}
      rightOvershootThreshold={60}
      onRightOvershoot={() => {
        console.log("onRightOvershoot");
      }}
    >
      <Text>Swipe me!</Text>
    </Swipeable>
  );
}

function LeftAction(prog: SharedValue<number>, drag: SharedValue<number>) {
  const styleAnimation = useAnimatedStyle(() => ({ transform: [{ translateX: drag.value - 50 }] }));

  return (
    <Reanimated.View style={styleAnimation}>
      <Text style={styles.rightAction}>Left</Text>
    </Reanimated.View>
  );
}

function RightAction(prog: SharedValue<number>, drag: SharedValue<number>) {
  const styleAnimation = useAnimatedStyle(() => ({ transform: [{ translateX: drag.value + 50 }] }));

  return (
    <Reanimated.View style={styleAnimation}>
      <Text style={styles.rightAction}>Right</Text>
    </Reanimated.View>
  );
}

const styles = StyleSheet.create({
  rightAction: { width: 50, height: 50, backgroundColor: "wheat" },
  separator: {
    width: "100%",
    borderTopWidth: 1,
  },
  swipeable: {
    height: 50,
    backgroundColor: "papayawhip",
    alignItems: "center",
  },
});

example.mp4