swipeable.js

const {
  Value,
  event,
  block,
  set,
  cond,
  eq,
  Clock,
  call,
  clockRunning,
} = Animated;

const Swipeable = ({ style, x, y, snapPoints, onSnap }) => {
  const {
    clock,
    spring,
    translationX,
    translationY,
    velocityX,
    snapPointX,
    state,
  } = useMemoOne(
    () => ({
      clock: new Clock(),
      spring: new Value(0),
      translationX: new Value(0),
      translationY: new Value(0),
      velocityX: new Value(0),
      snapPointX: new Value(0),
      state: new Value(State.UNDETERMINED),
    }),
    [],
  );

  const onGestureEvent = event([
    {
      nativeEvent: {
        velocityX,
        translationX,
        translationY,
        state,
      },
    },
  ]);

  useCode(
    () =>
      block([
        cond(eq(state, State.END), [
          set(snapPointX, snapPoint(translationX, velocityX, points)),
          set(spring, runSpring(clock, 0, 1)),
          cond(
            eq(clockRunning(clock), 0),
            call([snapPointX], ([x]) => onSnap(x)),
          ),
        ]),
        set(
          x,
          cond(
            eq(state, State.ACTIVE),
            translationX,
            binaryInterpolation(spring, translationX, snapPointX),
          ),
        ),
        set(
          y,
          cond(
            eq(state, State.ACTIVE),
            translationY,
            binaryInterpolation(spring, translationY, 0),
          ),
        ),
      ]),
    [],
  );

  const points = snapPoints.map(point => point.x);

  return (
    <PanGestureHandler
      onHandlerStateChange={onGestureEvent}
      {...{ onGestureEvent }}
    >
      <Animated.View {...{ style }} />
    </PanGestureHandler>
  );
};