How does your Swipeable Component work?

[AlexLup06]

I want to build my own Swipeable component. I want the functionality to display another action when the user overshoots the Swipe. Like apple has it in their Mail app. When you do a little swipe it shows those 3 buttons but when you drag further, at some point the most right button grows to takes up the whole space and the other buttons disappear.

So now I have tried for such a long time and can't get to figure out how to handle the Swipable component inside a Scrollview.
My Swipeable works like this:

// I left out the code for the actual swipe animation so its more readable


export default function Swipe({ simultaneousRef }: { simultaneousRef: React.MutableRefObject<ScrollView>}) {

  const swiper = useRef(null);
  const xDist = useSharedValue([]);
  const yDist = useSharedValue([]);
  const failed = useSharedValue(false);

  const swipeGesture = Gesture.Pan()
    .runOnJS(true)
    .withRef(swiper)
    .onTouchesMove((e, state) => {
      if (failed.value) {
        // gesture either lead to scroll or to swipe 
        return;
      }
      xDist.value.push(e.allTouches[0].x)
      yDist.value.push(e.allTouches[0].y)

      if (xDist.value.length >= 2) {
        const transX = xDist.value[xDist.value.length - 1] - xDist.value[0];
        const transY = yDist.value[yDist.value.length - 1] - yDist.value[0];
        const slope = Math.abs(transY / transX);

        const dragDist = Math.abs(xDist.value[1] - xDist.value[0]);

        if (slope > 4) {
          failed.value = true;
        } else if (slope <= 4) {
          simultaneousRef.current?.setNativeProps({ scrollEnabled: false });
          failed.value = true;
        }
      }
    })
    .onTouchesUp((e, state) => {
      // clean up
      simultaneousRef.current?.setNativeProps({ scrollEnabled: true });
      xDist.value = [];
      yDist.value = [];
      failed.value = false;
    })
    .simultaneousWithExternalGesture(simultaneousRef);

  const animatedStyle = useAnimatedStyle(() => {
    return {
      transform: [{ translateX: transX.value }],
    };
  });

  return (
        <GestureDetector gesture={swipeGesture}>
          <Animated.View style={ animatedStyle } >
            <Text>Swipe to see</Text>
          </Animated.View>
        </GestureDetector>
  );
}

It calculates the Slope of the Gesture. if the slope is larger then some threshold it does nothing and when the slope is smaller than the threshold it disables scrolling by setNativeProps({scrollEnabled: false}) on the ScrollView Ref.

I think I got it pretty far, but now I am stuck at the point where when I swipe really fast the ScrollView wants to start scrolling. Even if the Slope is smaller than the threshold, meaning that it should not scroll.

https://github.com/software-mansion/react-native-gesture-handler/assets/87496469/fe805d84-8b8a-4993-a29d-20a06f8f4112
Each of those little "layout shits" is when the ScrollView scrolls but the SwipeAble tells it to stop. but I already scrolled for some short time period.

My question to you: How do you handle the Swipeable inside a scrollview so that they don't run at the same time and only one is active when for example the slope of the swipe is below or above some threshold . I tried understanding your code inside the repo but there are so many parts to it.

Would love to here from you!

[j-piasecki]

Each of those shifts is caused by the fact that setNativeProps is asynchronous, so by the time the props are actually updated and the scroll is stopped, it already moved a bit.

We do this by setting the activation offset on the gesture itself. This way, the gesture will not activate unless the finger is moved by the required distance on the horizontal axis and you can scroll freely. When you move the finger enough horizontally, the gesture activation cancels the scroll view it's nested in and since it happens synchronously on the native side, there's no flicker visible.

[AlexLup06]

Gotcha! Thank you very much. Don't know how I did not see this Property...