Recipe: swipe to spin

import { MoneyStack } from "@apricot/assets";
import { Group, Scene, Spin } from "@apricot/react";
import { GestureDetector } from "react-native-gesture-handler";
import { useSwipeRotation } from "./useSwipeRotation";

export function SpinningMoney() {
  const { gesture, rotation } = useSwipeRotation();
  return (
    <GestureDetector gesture={gesture}>
      <Scene style={{ flex: 1 }}>
        <Spin speed={0.6}>
          <Group rotation={rotation}>
            <MoneyStack bills={40} />
          </Group>
        </Spin>
      </Scene>
    </GestureDetector>
  );
}

// Apricot recipe: swipe-to-spin
// Copy this file into your app. A horizontal swipe rotates whatever you wrap
// in <Group rotation={rotation}>; on release it keeps turning and slows down
// (Reanimated withDecay). Everything runs on the UI thread.
import { Gesture } from "react-native-gesture-handler";
import { cancelAnimation, useDerivedValue, useSharedValue, withDecay } from "react-native-reanimated";

export interface SwipeRotationOptions {
  /** Radians per point of finger movement. */
  sensitivity?: number;
  /** withDecay deceleration: closer to 1 coasts longer. */
  deceleration?: number;
}

export function useSwipeRotation({ sensitivity = 0.012, deceleration = 0.997 }: SwipeRotationOptions = {}) {
  const angle = useSharedValue(0);
  const rotation = useDerivedValue<readonly [number, number, number]>(() => [0, angle.value, 0]);
  const gesture = Gesture.Pan()
    .onBegin(() => {
      cancelAnimation(angle);
    })
    .onChange((event) => {
      angle.value += event.changeX * sensitivity;
    })
    .onEnd((event) => {
      angle.value = withDecay({ velocity: event.velocityX * sensitivity, deceleration });
    });
  return { gesture, rotation, angle };
}