@onlynative/inertia-gestures 0.0.1-alpha.1

package/src/useDrag.ts

@@ -0,0 +1,159 @@
+import { useMemo } from 'react'
+import { Gesture, type PanGesture } from 'react-native-gesture-handler'
+import {
+  runOnJS,
+  useAnimatedStyle,
+  useSharedValue,
+  type SharedValue,
+} from 'react-native-reanimated'
+import type { DragConstraints, DragOptions } from './types'
+
+export interface UseDragResult {
+  /** Pan gesture to pass to a `<GestureDetector>`. */
+  gesture: PanGesture
+  /**
+   * Animated style fragment (a single `transform` entry) to stack onto the
+   * dragged Motion primitive's `style` prop. Stable across renders.
+   */
+  animatedStyle: ReturnType<typeof useAnimatedStyle>
+  /** Current x translation in pixels. UI-thread shared value. */
+  dragX: SharedValue<number>
+  /** Current y translation in pixels. UI-thread shared value. */
+  dragY: SharedValue<number>
+  /** True while the gesture is active. */
+  isDragging: SharedValue<boolean>
+}
+
+/**
+ * Drag a Motion primitive with `react-native-gesture-handler`'s pan gesture.
+ *
+ * The hook owns a pair of shared values (`dragX`, `dragY`) and a `Pan`
+ * gesture that updates them on the UI thread. The returned `animatedStyle`
+ * is a self-contained `transform: [{ translateX }, { translateY }]` fragment;
+ * stack it onto the dragged component without colliding with Motion's own
+ * `animate` transforms.
+ *
+ * Usage:
+ * ```tsx
+ * const drag = useDrag({ axis: 'x', constraints: { left: -100, right: 100 } })
+ * return (
+ *   <GestureDetector gesture={drag.gesture}>
+ *     <Motion.View style={drag.animatedStyle} />
+ *   </GestureDetector>
+ * )
+ * ```
+ */
+export function useDrag(options: DragOptions = {}): UseDragResult {
+  const {
+    axis = 'both',
+    constraints,
+    elastic = 0,
+    onDragStart,
+    onDragEnd,
+  } = options
+
+  const dragX = useSharedValue(0)
+  const dragY = useSharedValue(0)
+  const startX = useSharedValue(0)
+  const startY = useSharedValue(0)
+  const isDragging = useSharedValue(false)
+
+  // Snapshot scalars into local consts so the Pan handlers (worklets) capture
+  // primitives, not the closing `options` object — a fresh `options` literal
+  // each render would otherwise force a new gesture identity.
+  const lockX = axis !== 'y'
+  const lockY = axis !== 'x'
+  const left = constraints?.left
+  const right = constraints?.right
+  const top = constraints?.top
+  const bottom = constraints?.bottom
+  const elasticCoef = elastic
+
+  const gesture = useMemo(() => {
+    const pan = Gesture.Pan()
+      .onStart(() => {
+        'worklet'
+        startX.value = dragX.value
+        startY.value = dragY.value
+        isDragging.value = true
+        if (onDragStart) runOnJS(onDragStart)()
+      })
+      .onUpdate((e) => {
+        'worklet'
+        if (lockX) {
+          dragX.value = applyBounds(
+            startX.value + e.translationX,
+            left,
+            right,
+            elasticCoef,
+          )
+        }
+        if (lockY) {
+          dragY.value = applyBounds(
+            startY.value + e.translationY,
+            top,
+            bottom,
+            elasticCoef,
+          )
+        }
+      })
+      .onEnd((e) => {
+        'worklet'
+        isDragging.value = false
+        if (onDragEnd) {
+          const x = dragX.value
+          const y = dragY.value
+          const vx = e.velocityX
+          const vy = e.velocityY
+          runOnJS(onDragEnd)({ x, y, velocity: { x: vx, y: vy } })
+        }
+      })
+    return pan
+  }, [
+    lockX,
+    lockY,
+    left,
+    right,
+    top,
+    bottom,
+    elasticCoef,
+    onDragStart,
+    onDragEnd,
+    dragX,
+    dragY,
+    startX,
+    startY,
+    isDragging,
+  ])
+
+  const animatedStyle = useAnimatedStyle(() => ({
+    transform: [{ translateX: dragX.value }, { translateY: dragY.value }],
+  }))
+
+  return { gesture, animatedStyle, dragX, dragY, isDragging }
+}
+
+/**
+ * Clamp `value` to `[min, max]`. When `elastic > 0` the overshoot beyond a
+ * bound is scaled by `elastic` instead of hard-clamped, giving a rubber-band
+ * feel. `min` / `max` may be `undefined` to leave that side unbounded.
+ *
+ * Worklet — runs on the UI thread inside the pan handler.
+ */
+function applyBounds(
+  value: number,
+  min: number | undefined,
+  max: number | undefined,
+  elastic: number,
+): number {
+  'worklet'
+  if (min !== undefined && value < min) {
+    return elastic > 0 ? min + (value - min) * elastic : min
+  }
+  if (max !== undefined && value > max) {
+    return elastic > 0 ? max + (value - max) * elastic : max
+  }
+  return value
+}
+
+export type { DragConstraints, DragOptions }

package/src/usePan.ts

@@ -0,0 +1,164 @@
+import { useMemo } from 'react'
+import { Gesture, type PanGesture } from 'react-native-gesture-handler'
+import {
+  useAnimatedStyle,
+  useSharedValue,
+  withDecay,
+  type SharedValue,
+} from 'react-native-reanimated'
+import type { DragConstraints } from './types'
+
+export interface PanOptions {
+  /**
+   * Translation bounds. Each side is optional; out-of-bounds motion during
+   * the active gesture and during the post-release decay is hard-clamped
+   * (Reanimated's `withDecay` `clamp` param). Decay-style overshoot is not
+   * supported here — for rubber-banded bounds, prefer `useDrag` with
+   * `elastic`.
+   */
+  constraints?: DragConstraints
+  /**
+   * Deceleration applied to the post-release momentum. Higher = momentum
+   * dies faster. Reanimated default is `0.998`; lower values feel more
+   * "slippy". Range: roughly `0.99` (slow) to `0.999` (long glide).
+   */
+  deceleration?: number
+  /**
+   * Disable the post-release momentum entirely. Defaults to `false` — pan
+   * coasts after release. Set to `true` for a hard stop on release (drag-like
+   * behavior).
+   */
+  disableMomentum?: boolean
+}
+
+export interface UsePanResult {
+  /** Pan gesture to pass to a `<GestureDetector>`. */
+  gesture: PanGesture
+  /** Stable animated `transform` style. */
+  animatedStyle: ReturnType<typeof useAnimatedStyle>
+  /** Live x translation, persistent across gestures. */
+  panX: SharedValue<number>
+  /** Live y translation, persistent across gestures. */
+  panY: SharedValue<number>
+  /** True while the user is actively panning. Decay phase reads `false`. */
+  isPanning: SharedValue<boolean>
+}
+
+/**
+ * Camera-pan-style drag with momentum on release. Translation persists
+ * across separate pan gestures (the next pan starts from the current
+ * position, not zero), and on release the translation continues to glide
+ * via Reanimated's `withDecay` until friction stops it.
+ *
+ * Use for map / zoom-canvas / large-image navigation. For dragging an
+ * element to a position with no momentum, use `useDrag` instead.
+ */
+export function usePan(options: PanOptions = {}): UsePanResult {
+  const { constraints, deceleration, disableMomentum = false } = options
+
+  const panX = useSharedValue(0)
+  const panY = useSharedValue(0)
+  const startX = useSharedValue(0)
+  const startY = useSharedValue(0)
+  const isPanning = useSharedValue(false)
+
+  const left = constraints?.left
+  const right = constraints?.right
+  const top = constraints?.top
+  const bottom = constraints?.bottom
+  const decel = deceleration
+
+  const gesture = useMemo(() => {
+    const pan = Gesture.Pan()
+      .onStart(() => {
+        'worklet'
+        startX.value = panX.value
+        startY.value = panY.value
+        isPanning.value = true
+      })
+      .onUpdate((e) => {
+        'worklet'
+        panX.value = clamp(startX.value + e.translationX, left, right)
+        panY.value = clamp(startY.value + e.translationY, top, bottom)
+      })
+      .onEnd((e) => {
+        'worklet'
+        isPanning.value = false
+        if (disableMomentum) return
+        const clampX = boundsTuple(left, right)
+        const clampY = boundsTuple(top, bottom)
+        panX.value = withDecay(decayConfig(e.velocityX, decel, clampX))
+        panY.value = withDecay(decayConfig(e.velocityY, decel, clampY))
+      })
+      .onFinalize(() => {
+        'worklet'
+        isPanning.value = false
+      })
+    return pan
+  }, [
+    left,
+    right,
+    top,
+    bottom,
+    decel,
+    disableMomentum,
+    panX,
+    panY,
+    startX,
+    startY,
+    isPanning,
+  ])
+
+  const animatedStyle = useAnimatedStyle(() => ({
+    transform: [{ translateX: panX.value }, { translateY: panY.value }],
+  }))
+
+  return { gesture, animatedStyle, panX, panY, isPanning }
+}
+
+/**
+ * Hard-clamp `value` between `min` and `max`. Either bound may be undefined
+ * to leave that side unbounded. Worklet — UI thread.
+ */
+function clamp(
+  value: number,
+  min: number | undefined,
+  max: number | undefined,
+): number {
+  'worklet'
+  if (min !== undefined && value < min) return min
+  if (max !== undefined && value > max) return max
+  return value
+}
+
+/**
+ * Build the `clamp` tuple Reanimated's `withDecay` expects, or `undefined`
+ * when the axis is unbounded. `withDecay` requires both ends present, so a
+ * one-sided constraint is widened with `±Infinity`.
+ */
+function boundsTuple(
+  min: number | undefined,
+  max: number | undefined,
+): [number, number] | undefined {
+  'worklet'
+  if (min === undefined && max === undefined) return undefined
+  return [min ?? Number.NEGATIVE_INFINITY, max ?? Number.POSITIVE_INFINITY]
+}
+
+function decayConfig(
+  velocity: number,
+  deceleration: number | undefined,
+  clamp: [number, number] | undefined,
+) {
+  'worklet'
+  const cfg: {
+    velocity: number
+    deceleration?: number
+    clamp?: [number, number]
+  } = {
+    velocity,
+  }
+  if (deceleration !== undefined) cfg.deceleration = deceleration
+  if (clamp !== undefined) cfg.clamp = clamp
+  return cfg
+}

package/src/useSwipe.ts

@@ -0,0 +1,195 @@
+import { useMemo } from 'react'
+import { Gesture, type PanGesture } from 'react-native-gesture-handler'
+import {
+  runOnJS,
+  useAnimatedStyle,
+  useSharedValue,
+  withSpring,
+  type SharedValue,
+} from 'react-native-reanimated'
+
+export type SwipeDirection = 'left' | 'right' | 'up' | 'down'
+
+export interface SwipeOptions {
+  /**
+   * Allowed swipe directions. Defaults to all four. The gesture only commits
+   * for directions in this list — a horizontal swipe with `directions:
+   * ['up', 'down']` will not fire `onSwipe`.
+   */
+  directions?: SwipeDirection[]
+  /**
+   * Pixel distance threshold past which a release commits the swipe. Defaults
+   * to `80`.
+   */
+  distanceThreshold?: number
+  /**
+   * Velocity threshold (px/sec) past which a release commits the swipe even
+   * before the distance threshold is reached — flick-style gestures. Defaults
+   * to `800`.
+   */
+  velocityThreshold?: number
+  /**
+   * Fired on the JS thread when the gesture commits in an allowed direction.
+   */
+  onSwipe?: (
+    direction: SwipeDirection,
+    info: { distance: number; velocity: number },
+  ) => void
+}
+
+export interface UseSwipeResult {
+  /** Pan gesture to pass to a `<GestureDetector>`. */
+  gesture: PanGesture
+  /**
+   * Animated style fragment exposing live translation while the gesture is
+   * active. Snaps back to `{ 0, 0 }` after release (whether or not the swipe
+   * committed) via a default spring.
+   */
+  animatedStyle: ReturnType<typeof useAnimatedStyle>
+  /** Live x translation. */
+  swipeX: SharedValue<number>
+  /** Live y translation. */
+  swipeY: SharedValue<number>
+  /** True while the user is actively swiping. */
+  isActive: SharedValue<boolean>
+}
+
+const DEFAULT_DIRECTIONS: SwipeDirection[] = ['left', 'right', 'up', 'down']
+
+/**
+ * Directional commit-or-snap-back gesture. Tracks live translation while the
+ * user drags and fires `onSwipe(direction)` on release if either the distance
+ * or velocity threshold is exceeded in an allowed direction. The position
+ * shared values always animate back to zero — the consumer is responsible
+ * for whatever side effect the commit drives (delete a row, dismiss a sheet,
+ * etc.).
+ *
+ * Usage:
+ * ```tsx
+ * const swipe = useSwipe({
+ *   directions: ['left'],
+ *   onSwipe: (dir) => deleteRow(),
+ * })
+ * return (
+ *   <GestureDetector gesture={swipe.gesture}>
+ *     <Motion.View style={swipe.animatedStyle}>...</Motion.View>
+ *   </GestureDetector>
+ * )
+ * ```
+ */
+export function useSwipe(options: SwipeOptions = {}): UseSwipeResult {
+  const {
+    directions = DEFAULT_DIRECTIONS,
+    distanceThreshold = 80,
+    velocityThreshold = 800,
+    onSwipe,
+  } = options
+
+  const swipeX = useSharedValue(0)
+  const swipeY = useSharedValue(0)
+  const isActive = useSharedValue(false)
+
+  const allowLeft = directions.includes('left')
+  const allowRight = directions.includes('right')
+  const allowUp = directions.includes('up')
+  const allowDown = directions.includes('down')
+
+  const gesture = useMemo(() => {
+    const pan = Gesture.Pan()
+      .onStart(() => {
+        'worklet'
+        isActive.value = true
+      })
+      .onUpdate((e) => {
+        'worklet'
+        swipeX.value = e.translationX
+        swipeY.value = e.translationY
+      })
+      .onEnd((e) => {
+        'worklet'
+        isActive.value = false
+        const direction = pickDirection(
+          e.translationX,
+          e.translationY,
+          e.velocityX,
+          e.velocityY,
+          distanceThreshold,
+          velocityThreshold,
+          allowLeft,
+          allowRight,
+          allowUp,
+          allowDown,
+        )
+        if (direction !== null && onSwipe) {
+          const isHoriz = direction === 'left' || direction === 'right'
+          const distance = isHoriz
+            ? Math.abs(e.translationX)
+            : Math.abs(e.translationY)
+          const velocity = isHoriz
+            ? Math.abs(e.velocityX)
+            : Math.abs(e.velocityY)
+          runOnJS(onSwipe)(direction, { distance, velocity })
+        }
+        swipeX.value = withSpring(0)
+        swipeY.value = withSpring(0)
+      })
+      .onFinalize(() => {
+        'worklet'
+        isActive.value = false
+      })
+    return pan
+  }, [
+    distanceThreshold,
+    velocityThreshold,
+    allowLeft,
+    allowRight,
+    allowUp,
+    allowDown,
+    onSwipe,
+    swipeX,
+    swipeY,
+    isActive,
+  ])
+
+  const animatedStyle = useAnimatedStyle(() => ({
+    transform: [{ translateX: swipeX.value }, { translateY: swipeY.value }],
+  }))
+
+  return { gesture, animatedStyle, swipeX, swipeY, isActive }
+}
+
+/**
+ * Decide which (allowed) direction a release commits to, based on the larger
+ * axis of motion. Returns `null` if neither distance nor velocity threshold
+ * is met along the dominant axis or if that direction is disallowed.
+ *
+ * Worklet — runs on the UI thread inside the pan handler.
+ */
+function pickDirection(
+  tx: number,
+  ty: number,
+  vx: number,
+  vy: number,
+  distanceThreshold: number,
+  velocityThreshold: number,
+  allowLeft: boolean,
+  allowRight: boolean,
+  allowUp: boolean,
+  allowDown: boolean,
+): SwipeDirection | null {
+  'worklet'
+  const absX = Math.abs(tx)
+  const absY = Math.abs(ty)
+  if (absX >= absY) {
+    const meets = absX >= distanceThreshold || Math.abs(vx) >= velocityThreshold
+    if (!meets) return null
+    if (tx < 0 && allowLeft) return 'left'
+    if (tx > 0 && allowRight) return 'right'
+    return null
+  }
+  const meets = absY >= distanceThreshold || Math.abs(vy) >= velocityThreshold
+  if (!meets) return null
+  if (ty < 0 && allowUp) return 'up'
+  if (ty > 0 && allowDown) return 'down'
+  return null
+}