@rootnative/inertia-gestures 0.0.9 → 0.0.10

package/CHANGELOG.md

@@ -6,6 +6,24 @@ This package ships in lockstep with `@rootnative/inertia` — version numbers tr
 
 ## [Unreleased]
 
+## [0.0.10] - 2026-09-06
+
+### Fixed
+
+- **`useDrag` and `useSwipe` no longer rebuild their gesture when an inline callback changes identity.** `onDragStart` / `onDragEnd` (`useDrag`) and `onSwipe` / `onSwipeEnd` (`useSwipe`) were dependencies of the gesture memo, so a callback written inline in the options rebuilt the `Pan` gesture on every render, and `<GestureDetector>` re-attached it. The JS-thread callbacks are now reached through stable wrappers (`useLatestCallback`) that always call the latest function; the worklet callbacks (`onRelease`, `onCommit`) stay direct dependencies because a worklet must capture them as-is. Found by the `1.0.0` readiness audit (2026-09-05), Phase 3.
+
+- **`useSwipe`'s decay `releaseTransition` warning fires once per name, not once per render.** Found by the `1.0.0` readiness audit (2026-09-05), Phase 3.
+
+### Changed
+
+- **The `@rootnative/inertia` peer range has an upper bound: `>=0.0.9 <0.1.0`.** Pre-`1.0.0`, a minor bump of core is where a breaking change lands, so this adapter must not accept it. Enforced by `check:versions`. Found by the `1.0.0` readiness audit (2026-09-05), Phase 3.
+
+- `useDrag`, `usePan`, and `useSwipe` return the `animatedStyle` from core's new `useTranslateStyle`, and `useDrag` applies its constraints through core's exported `applyBounds`. Same behaviour, one implementation. Both come from `@rootnative/inertia`, so this adapter needs the core release that ships them; the lockstep release carries both.
+
+### Added
+
+- Tests for `useDrag`'s `onDragStart` and decay release branch, `usePan`'s `withDecay` config (velocity, deceleration, clamp widening), and gesture identity across inline callback changes.
+
 ## [0.0.9] - 2026-08-22
 
 **Lockstep version bump** alongside `@rootnative/inertia@0.0.9` (`useInterpolatedStyle` types its return against the map it was given, so a `style` array no longer needs a cast). No runtime changes in this adapter; the `@rootnative/inertia` peer range moves to `>=0.0.9`.
@@ -71,7 +89,8 @@ Initial alpha publish alongside `@rootnative/inertia@0.0.0-alpha.0`. Optional ad
 - `useDrag({ onRelease })` — release worklet returns per-axis Inertia transitions (snap-to-tick spring, decay with bounds, etc.). Velocity stays on the UI thread; no JS round-trip.
 - `useSwipe`, `usePan` hooks composable with any `Motion.*` primitive via `<GestureDetector>`.
 
-[unreleased]: https://github.com/rootnative/inertia/compare/core+gestures+gradients+svg@0.0.9...HEAD
+[unreleased]: https://github.com/rootnative/inertia/compare/core+gestures+gradients+svg@0.0.10...HEAD
+[0.0.10]: https://github.com/rootnative/inertia/releases/tag/core+gestures+gradients+svg@0.0.10
 [0.0.9]: https://github.com/rootnative/inertia/releases/tag/core+gestures+gradients+svg@0.0.9
 [0.0.8]: https://github.com/rootnative/inertia/releases/tag/core+gestures+gradients+svg@0.0.8
 [0.0.7]: https://github.com/rootnative/inertia/releases/tag/core+gestures+gradients+svg@0.0.7

package/README.md

@@ -36,12 +36,12 @@ import { useDrag } from '@rootnative/inertia-gestures'
 function DraggableBox() {
   const drag = useDrag({
     axis: 'both',
-    bounds: { left: -120, right: 120, top: -120, bottom: 120 },
+    constraints: { left: -120, right: 120, top: -120, bottom: 120 },
   })
 
   return (
     <GestureDetector gesture={drag.gesture}>
-      <Motion.View style={drag.style} />
+      <Motion.View style={drag.animatedStyle} />
     </GestureDetector>
   )
 }

package/dist/index.js

@@ -5,6 +5,15 @@ var reactNativeGestureHandler = require('react-native-gesture-handler');
 var reactNativeReanimated = require('react-native-reanimated');
 var inertia = require('@rootnative/inertia');
 
+// src/useDrag.ts
+function useLatestCallback(fn) {
+  const ref = react.useRef(fn);
+  ref.current = fn;
+  return react.useCallback((...args) => {
+    ref.current?.(...args);
+  }, []);
+}
+
 // src/useDrag.ts
 function useDrag(options = {}) {
   const {
@@ -27,17 +36,21 @@ function useDrag(options = {}) {
   const top = constraints?.top;
   const bottom = constraints?.bottom;
   const elasticCoef = elastic;
+  const hasDragStart = onDragStart !== void 0;
+  const hasDragEnd = onDragEnd !== void 0;
+  const fireDragStart = useLatestCallback(onDragStart);
+  const fireDragEnd = useLatestCallback(onDragEnd);
   const gesture = react.useMemo(() => {
     const pan = reactNativeGestureHandler.Gesture.Pan().onStart(() => {
       "worklet";
       startX.value = dragX.value;
       startY.value = dragY.value;
       isDragging.value = true;
-      if (onDragStart) reactNativeReanimated.runOnJS(onDragStart)();
+      if (hasDragStart) reactNativeReanimated.runOnJS(fireDragStart)();
     }).onUpdate((e) => {
       "worklet";
       if (lockX) {
-        dragX.value = applyBounds(
+        dragX.value = inertia.applyBounds(
           startX.value + e.translationX,
           left,
           right,
@@ -45,7 +58,7 @@ function useDrag(options = {}) {
         );
       }
       if (lockY) {
-        dragY.value = applyBounds(
+        dragY.value = inertia.applyBounds(
           startY.value + e.translationY,
           top,
           bottom,
@@ -78,8 +91,8 @@ function useDrag(options = {}) {
           }
         }
       }
-      if (onDragEnd) {
-        reactNativeReanimated.runOnJS(onDragEnd)({ x, y, velocity: { x: vx, y: vy } });
+      if (hasDragEnd) {
+        reactNativeReanimated.runOnJS(fireDragEnd)({ x, y, velocity: { x: vx, y: vy } });
       }
     });
     return pan;
@@ -91,8 +104,10 @@ function useDrag(options = {}) {
     top,
     bottom,
     elasticCoef,
-    onDragStart,
-    onDragEnd,
+    hasDragStart,
+    hasDragEnd,
+    fireDragStart,
+    fireDragEnd,
     onRelease,
     dragX,
     dragY,
@@ -100,21 +115,10 @@ function useDrag(options = {}) {
     startY,
     isDragging
   ]);
-  const animatedStyle = reactNativeReanimated.useAnimatedStyle(() => ({
-    transform: [{ translateX: dragX.value }, { translateY: dragY.value }]
-  }));
+  const animatedStyle = inertia.useTranslateStyle(dragX, dragY);
   return { gesture, animatedStyle, dragX, dragY, isDragging };
 }
-function applyBounds(value, min, max, elastic) {
-  "worklet";
-  if (min !== void 0 && value < min) {
-    return elastic > 0 ? min + (value - min) * elastic : min;
-  }
-  if (max !== void 0 && value > max) {
-    return elastic > 0 ? max + (value - max) * elastic : max;
-  }
-  return value;
-}
+var warnedDecayNames = /* @__PURE__ */ new Set();
 var DEFAULT_DIRECTIONS = ["left", "right", "up", "down"];
 var DEFAULT_SNAP_BACK = { type: "spring" };
 function useSwipe(options = {}) {
@@ -138,7 +142,9 @@ function useSwipe(options = {}) {
   const snapBack = react.useMemo(() => {
     const cfg = inertia.resolveNamedTransition(releaseTransition, registry) ?? DEFAULT_SNAP_BACK;
     if (cfg.type === "decay") {
-      if (__DEV__) {
+      const key = typeof releaseTransition === "string" ? releaseTransition : "<inline>";
+      if (__DEV__ && !warnedDecayNames.has(key)) {
+        warnedDecayNames.add(key);
         console.warn(
           "[inertia] useSwipe `releaseTransition` resolved to a decay transition, which has no target and cannot snap back to zero \u2014 falling back to the default spring."
         );
@@ -147,6 +153,10 @@ function useSwipe(options = {}) {
     }
     return cfg;
   }, [releaseTransition, registry]);
+  const hasSwipe = onSwipe !== void 0;
+  const hasSwipeEnd = onSwipeEnd !== void 0;
+  const fireSwipe = useLatestCallback(onSwipe);
+  const fireSwipeEnd = useLatestCallback(onSwipeEnd);
   const gesture = react.useMemo(() => {
     const pan = reactNativeGestureHandler.Gesture.Pan().onStart(() => {
       "worklet";
@@ -170,11 +180,11 @@ function useSwipe(options = {}) {
         allowUp,
         allowDown
       );
-      if (direction !== null && onSwipe) {
+      if (direction !== null && hasSwipe) {
         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);
-        reactNativeReanimated.runOnJS(onSwipe)(direction, { distance, velocity });
+        reactNativeReanimated.runOnJS(fireSwipe)(direction, { distance, velocity });
       }
       let exit = void 0;
       if (direction !== null && onCommit) {
@@ -185,11 +195,10 @@ function useSwipe(options = {}) {
         });
       }
       let settle;
-      if (direction !== null && onSwipeEnd) {
+      if (direction !== null && hasSwipeEnd) {
         const dir = direction;
-        const end = onSwipeEnd;
         settle = (finished) => {
-          reactNativeReanimated.runOnJS(end)(dir, { finished: finished === true });
+          reactNativeReanimated.runOnJS(fireSwipeEnd)(dir, { finished: finished === true });
         };
       }
       const isHorizontalCommit = direction === "left" || direction === "right";
@@ -236,16 +245,16 @@ function useSwipe(options = {}) {
     allowUp,
     allowDown,
     snapBack,
-    onSwipe,
+    hasSwipe,
+    hasSwipeEnd,
+    fireSwipe,
+    fireSwipeEnd,
     onCommit,
-    onSwipeEnd,
     swipeX,
     swipeY,
     isActive
   ]);
-  const animatedStyle = reactNativeReanimated.useAnimatedStyle(() => ({
-    transform: [{ translateX: swipeX.value }, { translateY: swipeY.value }]
-  }));
+  const animatedStyle = inertia.useTranslateStyle(swipeX, swipeY);
   const reset = react.useCallback(() => {
     swipeX.value = 0;
     swipeY.value = 0;
@@ -323,9 +332,7 @@ function usePan(options = {}) {
     startY,
     isPanning
   ]);
-  const animatedStyle = reactNativeReanimated.useAnimatedStyle(() => ({
-    transform: [{ translateX: panX.value }, { translateY: panY.value }]
-  }));
+  const animatedStyle = inertia.useTranslateStyle(panX, panY);
   return { gesture, animatedStyle, panX, panY, isPanning };
 }
 function clamp(value, min, max) {

package/dist/index.mjs

@@ -1,7 +1,16 @@
-import { useMemo, useCallback } from 'react';
+import { useMemo, useCallback, useRef } from 'react';
 import { Gesture } from 'react-native-gesture-handler';
-import { useSharedValue, runOnJS, useAnimatedStyle, withDecay } from 'react-native-reanimated';
-import { buildReleaseAnimation, useNamedTransitions, resolveNamedTransition } from '@rootnative/inertia';
+import { useSharedValue, runOnJS, withDecay } from 'react-native-reanimated';
+import { applyBounds, buildReleaseAnimation, useTranslateStyle, useNamedTransitions, resolveNamedTransition } from '@rootnative/inertia';
+
+// src/useDrag.ts
+function useLatestCallback(fn) {
+  const ref = useRef(fn);
+  ref.current = fn;
+  return useCallback((...args) => {
+    ref.current?.(...args);
+  }, []);
+}
 
 // src/useDrag.ts
 function useDrag(options = {}) {
@@ -25,13 +34,17 @@ function useDrag(options = {}) {
   const top = constraints?.top;
   const bottom = constraints?.bottom;
   const elasticCoef = elastic;
+  const hasDragStart = onDragStart !== void 0;
+  const hasDragEnd = onDragEnd !== void 0;
+  const fireDragStart = useLatestCallback(onDragStart);
+  const fireDragEnd = useLatestCallback(onDragEnd);
   const gesture = useMemo(() => {
     const pan = Gesture.Pan().onStart(() => {
       "worklet";
       startX.value = dragX.value;
       startY.value = dragY.value;
       isDragging.value = true;
-      if (onDragStart) runOnJS(onDragStart)();
+      if (hasDragStart) runOnJS(fireDragStart)();
     }).onUpdate((e) => {
       "worklet";
       if (lockX) {
@@ -76,8 +89,8 @@ function useDrag(options = {}) {
           }
         }
       }
-      if (onDragEnd) {
-        runOnJS(onDragEnd)({ x, y, velocity: { x: vx, y: vy } });
+      if (hasDragEnd) {
+        runOnJS(fireDragEnd)({ x, y, velocity: { x: vx, y: vy } });
       }
     });
     return pan;
@@ -89,8 +102,10 @@ function useDrag(options = {}) {
     top,
     bottom,
     elasticCoef,
-    onDragStart,
-    onDragEnd,
+    hasDragStart,
+    hasDragEnd,
+    fireDragStart,
+    fireDragEnd,
     onRelease,
     dragX,
     dragY,
@@ -98,21 +113,10 @@ function useDrag(options = {}) {
     startY,
     isDragging
   ]);
-  const animatedStyle = useAnimatedStyle(() => ({
-    transform: [{ translateX: dragX.value }, { translateY: dragY.value }]
-  }));
+  const animatedStyle = useTranslateStyle(dragX, dragY);
   return { gesture, animatedStyle, dragX, dragY, isDragging };
 }
-function applyBounds(value, min, max, elastic) {
-  "worklet";
-  if (min !== void 0 && value < min) {
-    return elastic > 0 ? min + (value - min) * elastic : min;
-  }
-  if (max !== void 0 && value > max) {
-    return elastic > 0 ? max + (value - max) * elastic : max;
-  }
-  return value;
-}
+var warnedDecayNames = /* @__PURE__ */ new Set();
 var DEFAULT_DIRECTIONS = ["left", "right", "up", "down"];
 var DEFAULT_SNAP_BACK = { type: "spring" };
 function useSwipe(options = {}) {
@@ -136,7 +140,9 @@ function useSwipe(options = {}) {
   const snapBack = useMemo(() => {
     const cfg = resolveNamedTransition(releaseTransition, registry) ?? DEFAULT_SNAP_BACK;
     if (cfg.type === "decay") {
-      if (__DEV__) {
+      const key = typeof releaseTransition === "string" ? releaseTransition : "<inline>";
+      if (__DEV__ && !warnedDecayNames.has(key)) {
+        warnedDecayNames.add(key);
         console.warn(
           "[inertia] useSwipe `releaseTransition` resolved to a decay transition, which has no target and cannot snap back to zero \u2014 falling back to the default spring."
         );
@@ -145,6 +151,10 @@ function useSwipe(options = {}) {
     }
     return cfg;
   }, [releaseTransition, registry]);
+  const hasSwipe = onSwipe !== void 0;
+  const hasSwipeEnd = onSwipeEnd !== void 0;
+  const fireSwipe = useLatestCallback(onSwipe);
+  const fireSwipeEnd = useLatestCallback(onSwipeEnd);
   const gesture = useMemo(() => {
     const pan = Gesture.Pan().onStart(() => {
       "worklet";
@@ -168,11 +178,11 @@ function useSwipe(options = {}) {
         allowUp,
         allowDown
       );
-      if (direction !== null && onSwipe) {
+      if (direction !== null && hasSwipe) {
         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 });
+        runOnJS(fireSwipe)(direction, { distance, velocity });
       }
       let exit = void 0;
       if (direction !== null && onCommit) {
@@ -183,11 +193,10 @@ function useSwipe(options = {}) {
         });
       }
       let settle;
-      if (direction !== null && onSwipeEnd) {
+      if (direction !== null && hasSwipeEnd) {
         const dir = direction;
-        const end = onSwipeEnd;
         settle = (finished) => {
-          runOnJS(end)(dir, { finished: finished === true });
+          runOnJS(fireSwipeEnd)(dir, { finished: finished === true });
         };
       }
       const isHorizontalCommit = direction === "left" || direction === "right";
@@ -234,16 +243,16 @@ function useSwipe(options = {}) {
     allowUp,
     allowDown,
     snapBack,
-    onSwipe,
+    hasSwipe,
+    hasSwipeEnd,
+    fireSwipe,
+    fireSwipeEnd,
     onCommit,
-    onSwipeEnd,
     swipeX,
     swipeY,
     isActive
   ]);
-  const animatedStyle = useAnimatedStyle(() => ({
-    transform: [{ translateX: swipeX.value }, { translateY: swipeY.value }]
-  }));
+  const animatedStyle = useTranslateStyle(swipeX, swipeY);
   const reset = useCallback(() => {
     swipeX.value = 0;
     swipeY.value = 0;
@@ -321,9 +330,7 @@ function usePan(options = {}) {
     startY,
     isPanning
   ]);
-  const animatedStyle = useAnimatedStyle(() => ({
-    transform: [{ translateX: panX.value }, { translateY: panY.value }]
-  }));
+  const animatedStyle = useTranslateStyle(panX, panY);
   return { gesture, animatedStyle, panX, panY, isPanning };
 }
 function clamp(value, min, max) {

package/llms.txt

@@ -258,10 +258,6 @@ The full ladder:
 
 Both `useTouchDrag` and the gesture-handler `useDrag` accept the same `onRelease` shape and route through `buildReleaseAnimation`, so swapping between them only touches the wiring, not the release animation config.
 
-## Try it
-
-
-
 ## Why a separate package?
 
 The core library's `gesture` prop covers `pressed` / `focused` / `focusVisible` / `hovered` — boolean state-overlay gestures with no continuous translation. Drag, swipe, and pan are **value-driven**: the gesture publishes a continuous position that the consumer composes into the view's style. They don't fit the boolean-state model, and they need `react-native-gesture-handler` (which we don't want as a required peer of core).

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rootnative/inertia-gestures",
-  "version": "0.0.9",
+  "version": "0.0.10",
   "description": "Gesture-handler-driven drag / pan / swipe adapters for @rootnative/inertia.",
   "license": "MIT",
   "author": "RootNative",
@@ -50,7 +50,7 @@
     "!**/*.test.*"
   ],
   "peerDependencies": {
-    "@rootnative/inertia": ">=0.0.9",
+    "@rootnative/inertia": ">=0.0.10 <0.1.0",
     "react": ">=19.0.0",
     "react-native": ">=0.81.0",
     "react-native-gesture-handler": ">=2.0.0",
@@ -69,7 +69,7 @@
     "react-test-renderer": "19.1.0",
     "tsup": "^8.3.5",
     "typescript": "^5.7.3",
-    "@rootnative/inertia": "0.0.9"
+    "@rootnative/inertia": "0.0.10"
   },
   "publishConfig": {
     "access": "public"

package/src/useDrag.ts

@@ -2,11 +2,16 @@ import { useMemo } from 'react'
 import { Gesture, type PanGesture } from 'react-native-gesture-handler'
 import {
   runOnJS,
-  useAnimatedStyle,
   useSharedValue,
   type SharedValue,
 } from 'react-native-reanimated'
-import { buildReleaseAnimation } from '@rootnative/inertia'
+import type { useAnimatedStyle } from 'react-native-reanimated'
+import {
+  applyBounds,
+  buildReleaseAnimation,
+  useTranslateStyle,
+} from '@rootnative/inertia'
+import { useLatestCallback } from './useLatestCallback'
 import type { DragConstraints, DragOptions } from './types'
 
 export interface UseDragResult {
@@ -77,6 +82,15 @@ export function useDrag(options: DragOptions = {}): UseDragResult {
   const bottom = constraints?.bottom
   const elasticCoef = elastic
 
+  // JS-thread callbacks are read through stable wrappers so an inline arrow
+  // in `options` does not rebuild the gesture every render. `onRelease` is a
+  // worklet and stays a direct dependency — it must be captured by the
+  // gesture worklet as-is, since there is no ref on the UI thread.
+  const hasDragStart = onDragStart !== undefined
+  const hasDragEnd = onDragEnd !== undefined
+  const fireDragStart = useLatestCallback(onDragStart)
+  const fireDragEnd = useLatestCallback(onDragEnd)
+
   const gesture = useMemo(() => {
     const pan = Gesture.Pan()
       .onStart(() => {
@@ -84,7 +98,7 @@ export function useDrag(options: DragOptions = {}): UseDragResult {
         startX.value = dragX.value
         startY.value = dragY.value
         isDragging.value = true
-        if (onDragStart) runOnJS(onDragStart)()
+        if (hasDragStart) runOnJS(fireDragStart)()
       })
       .onUpdate((e) => {
         'worklet'
@@ -134,8 +148,8 @@ export function useDrag(options: DragOptions = {}): UseDragResult {
             }
           }
         }
-        if (onDragEnd) {
-          runOnJS(onDragEnd)({ x, y, velocity: { x: vx, y: vy } })
+        if (hasDragEnd) {
+          runOnJS(fireDragEnd)({ x, y, velocity: { x: vx, y: vy } })
         }
       })
     return pan
@@ -147,8 +161,10 @@ export function useDrag(options: DragOptions = {}): UseDragResult {
     top,
     bottom,
     elasticCoef,
-    onDragStart,
-    onDragEnd,
+    hasDragStart,
+    hasDragEnd,
+    fireDragStart,
+    fireDragEnd,
     onRelease,
     dragX,
     dragY,
@@ -157,34 +173,9 @@ export function useDrag(options: DragOptions = {}): UseDragResult {
     isDragging,
   ])
 
-  const animatedStyle = useAnimatedStyle(() => ({
-    transform: [{ translateX: dragX.value }, { translateY: dragY.value }],
-  }))
+  const animatedStyle = useTranslateStyle(dragX, dragY)
 
   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/useLatestCallback.ts

@@ -0,0 +1,18 @@
+import { useCallback, useRef } from 'react'
+
+/**
+ * Return a function with a stable identity that always calls the latest
+ * `fn`. The gesture hooks hand the returned function to `runOnJS` inside a
+ * memoised gesture, so an inline callback in the options does not rebuild the
+ * gesture on every render. Calling the result when `fn` is `undefined` is a
+ * no-op.
+ */
+export function useLatestCallback<A extends unknown[]>(
+  fn: ((...args: A) => void) | undefined,
+): (...args: A) => void {
+  const ref = useRef(fn)
+  ref.current = fn
+  return useCallback((...args: A) => {
+    ref.current?.(...args)
+  }, [])
+}

package/src/usePan.ts

@@ -1,11 +1,12 @@
 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 { useAnimatedStyle } from 'react-native-reanimated'
+import { useTranslateStyle } from '@rootnative/inertia'
 import type { DragConstraints } from './types'
 
 export interface PanOptions {
@@ -114,9 +115,7 @@ export function usePan(options: PanOptions = {}): UsePanResult {
     isPanning,
   ])
 
-  const animatedStyle = useAnimatedStyle(() => ({
-    transform: [{ translateX: panX.value }, { translateY: panY.value }],
-  }))
+  const animatedStyle = useTranslateStyle(panX, panY)
 
   return { gesture, animatedStyle, panX, panY, isPanning }
 }

package/src/useSwipe.ts

@@ -2,21 +2,27 @@ import { useCallback, useMemo } from 'react'
 import { Gesture, type PanGesture } from 'react-native-gesture-handler'
 import {
   runOnJS,
-  useAnimatedStyle,
   useSharedValue,
   type SharedValue,
 } from 'react-native-reanimated'
+import type { useAnimatedStyle } from 'react-native-reanimated'
 import {
   buildReleaseAnimation,
   resolveNamedTransition,
   useNamedTransitions,
+  useTranslateStyle,
   type TransitionConfig,
   type TransitionName,
 } from '@rootnative/inertia'
+import { useLatestCallback } from './useLatestCallback'
 import type { ReleaseInfo, ReleaseResult, SnapBackTransition } from './types'
 
 declare const __DEV__: boolean
 
+// Dev warning for a decay `releaseTransition`, keyed per name so it fires once
+// per misconfiguration instead of once per render.
+const warnedDecayNames = new Set<string>()
+
 export type SwipeDirection = 'left' | 'right' | 'up' | 'down'
 
 export interface SwipeOptions {
@@ -201,7 +207,10 @@ export function useSwipe(options: SwipeOptions = {}): UseSwipeResult {
     const cfg =
       resolveNamedTransition(releaseTransition, registry) ?? DEFAULT_SNAP_BACK
     if (cfg.type === 'decay') {
-      if (__DEV__) {
+      const key =
+        typeof releaseTransition === 'string' ? releaseTransition : '<inline>'
+      if (__DEV__ && !warnedDecayNames.has(key)) {
+        warnedDecayNames.add(key)
         console.warn(
           '[inertia] useSwipe `releaseTransition` resolved to a decay ' +
             'transition, which has no target and cannot snap back to zero — ' +
@@ -213,6 +222,14 @@ export function useSwipe(options: SwipeOptions = {}): UseSwipeResult {
     return cfg
   }, [releaseTransition, registry])
 
+  // JS-thread callbacks are read through stable wrappers so an inline arrow
+  // in `options` does not rebuild the gesture every render. `onCommit` is a
+  // worklet and stays a direct dependency.
+  const hasSwipe = onSwipe !== undefined
+  const hasSwipeEnd = onSwipeEnd !== undefined
+  const fireSwipe = useLatestCallback(onSwipe)
+  const fireSwipeEnd = useLatestCallback(onSwipeEnd)
+
   const gesture = useMemo(() => {
     const pan = Gesture.Pan()
       .onStart(() => {
@@ -239,7 +256,7 @@ export function useSwipe(options: SwipeOptions = {}): UseSwipeResult {
           allowUp,
           allowDown,
         )
-        if (direction !== null && onSwipe) {
+        if (direction !== null && hasSwipe) {
           const isHoriz = direction === 'left' || direction === 'right'
           const distance = isHoriz
             ? Math.abs(e.translationX)
@@ -247,7 +264,7 @@ export function useSwipe(options: SwipeOptions = {}): UseSwipeResult {
           const velocity = isHoriz
             ? Math.abs(e.velocityX)
             : Math.abs(e.velocityY)
-          runOnJS(onSwipe)(direction, { distance, velocity })
+          runOnJS(fireSwipe)(direction, { distance, velocity })
         }
 
         // A commit may return per-axis exit transitions to run instead of
@@ -264,11 +281,10 @@ export function useSwipe(options: SwipeOptions = {}): UseSwipeResult {
         // `onSwipeEnd` rides the settle callback of the swipe axis — the one
         // animation whose end means "the card has arrived".
         let settle: ((finished?: boolean) => void) | undefined
-        if (direction !== null && onSwipeEnd) {
+        if (direction !== null && hasSwipeEnd) {
           const dir = direction
-          const end = onSwipeEnd
           settle = (finished?: boolean) => {
-            runOnJS(end)(dir, { finished: finished === true })
+            runOnJS(fireSwipeEnd)(dir, { finished: finished === true })
           }
         }
         const isHorizontalCommit = direction === 'left' || direction === 'right'
@@ -320,17 +336,17 @@ export function useSwipe(options: SwipeOptions = {}): UseSwipeResult {
     allowUp,
     allowDown,
     snapBack,
-    onSwipe,
+    hasSwipe,
+    hasSwipeEnd,
+    fireSwipe,
+    fireSwipeEnd,
     onCommit,
-    onSwipeEnd,
     swipeX,
     swipeY,
     isActive,
   ])
 
-  const animatedStyle = useAnimatedStyle(() => ({
-    transform: [{ translateX: swipeX.value }, { translateY: swipeY.value }],
-  }))
+  const animatedStyle = useTranslateStyle(swipeX, swipeY)
 
   const reset = useCallback(() => {
     swipeX.value = 0