@rootnative/inertia-gestures 0.0.19 → 0.0.20

package/CHANGELOG.md

@@ -6,6 +6,13 @@ This package ships in lockstep with `@rootnative/inertia` — version numbers tr
 
 ## [Unreleased]
 
+## [0.0.20] - 2026-10-23
+
+### Changed
+
+- **The supported band is Expo SDK 58.** The peer ranges are `react >=19.3.0 <20.0.0`, `react-native >=0.88.0 <0.89.0`, `react-native-reanimated >=4.7.0 <4.8.0` and `react-native-gesture-handler >=3.3.0 <4.0.0`. SDK 57 stays on `0.0.19`. See the `@rootnative/inertia` entry for the reason.
+- **`useDrag`, `useSwipe` and `usePan` build their gesture with the Gesture Handler 3 hook API.** Each hook calls `usePanGesture` on a memoized config instead of the `Gesture.Pan()` builder, which Gesture Handler 3 marks as deprecated. The returned `gesture` is the `PanGesture` of that hook; pass it to `<GestureDetector>` as before. The lifecycle callbacks moved to the new names (`onActivate`, `onUpdate`, `onDeactivate`, `onFinalize`) with no change in when they fire. **Breaking for one case:** the legacy composition helpers (`Gesture.Simultaneous`, `Gesture.Race`, `Gesture.Exclusive`) do not accept a hook gesture. Compose with the Gesture Handler 3 composition hooks instead.
+
 ## [0.0.19] - 2026-10-17
 
 **Lockstep version bump** alongside `@rootnative/inertia@0.0.19` (`focusVisible` follows the browser `:focus-visible` on web, and a control that mounts disabled starts at its `useGestureLayer` `disabled` layer). No runtime changes in this adapter; the `@rootnative/inertia` peer range moves to `>=0.0.19 <0.1.0`.
@@ -133,7 +140,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.19...HEAD
+[unreleased]: https://github.com/rootnative/inertia/compare/core+gestures+gradients+svg@0.0.20...HEAD
+[0.0.20]: https://github.com/rootnative/inertia/releases/tag/core+gestures+gradients+svg@0.0.20
 [0.0.19]: https://github.com/rootnative/inertia/releases/tag/core+gestures+gradients+svg@0.0.19
 [0.0.18]: https://github.com/rootnative/inertia/releases/tag/core+gestures+gradients+svg@0.0.18
 [0.0.17]: https://github.com/rootnative/inertia/releases/tag/core+gestures+gradients+svg@0.0.17

package/README.md

@@ -18,7 +18,7 @@ pnpm add @rootnative/inertia-gestures react-native-gesture-handler
 
 Then follow the [`react-native-gesture-handler` install guide](https://docs.swmansion.com/react-native-gesture-handler/docs/installation) — it needs `<GestureHandlerRootView>` near the root of your app.
 
-**Peer dependencies:** `@rootnative/inertia` (workspace or installed), `react >=19.2.3`, `react-native >=0.83.0 <0.87.0`, `react-native-reanimated >=4.5.0 <4.6.0`, `react-native-gesture-handler >=2.30.0 <3.0.0`.
+**Peer dependencies:** `@rootnative/inertia` (workspace or installed), `react >=19.3.0`, `react-native >=0.88.0 <0.89.0`, `react-native-reanimated >=4.7.0 <4.8.0`, `react-native-gesture-handler >=3.3.0 <4.0.0`.
 
 ## What ships
 

package/dist/index.js

@@ -40,81 +40,86 @@ function useDrag(options = {}) {
   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 (hasDragStart) reactNativeReanimated.runOnJS(fireDragStart)();
-    }).onUpdate((e) => {
-      "worklet";
-      if (lockX) {
-        dragX.value = inertia.applyBounds(
-          startX.value + e.translationX,
-          left,
-          right,
-          elasticCoef
-        );
-      }
-      if (lockY) {
-        dragY.value = inertia.applyBounds(
-          startY.value + e.translationY,
-          top,
-          bottom,
-          elasticCoef
-        );
-      }
-    }).onEnd((e) => {
-      "worklet";
-      isDragging.value = false;
-      const x = dragX.value;
-      const y = dragY.value;
-      const vx = e.velocityX;
-      const vy = e.velocityY;
-      if (onRelease) {
-        const result = onRelease({ x, y, velocity: { x: vx, y: vy } });
-        if (result) {
-          if (result.x && lockX) {
-            const toX = "to" in result.x ? result.x.to : x;
-            dragX.value = inertia.buildReleaseAnimation(
-              result.x,
-              toX
-            );
-          }
-          if (result.y && lockY) {
-            const toY = "to" in result.y ? result.y.to : y;
-            dragY.value = inertia.buildReleaseAnimation(
-              result.y,
-              toY
-            );
+  const config = react.useMemo(
+    () => ({
+      onActivate: () => {
+        "worklet";
+        startX.value = dragX.value;
+        startY.value = dragY.value;
+        isDragging.value = true;
+        if (hasDragStart) reactNativeReanimated.runOnJS(fireDragStart)();
+      },
+      onUpdate: (e) => {
+        "worklet";
+        if (lockX) {
+          dragX.value = inertia.applyBounds(
+            startX.value + e.translationX,
+            left,
+            right,
+            elasticCoef
+          );
+        }
+        if (lockY) {
+          dragY.value = inertia.applyBounds(
+            startY.value + e.translationY,
+            top,
+            bottom,
+            elasticCoef
+          );
+        }
+      },
+      onDeactivate: (e) => {
+        "worklet";
+        isDragging.value = false;
+        const x = dragX.value;
+        const y = dragY.value;
+        const vx = e.velocityX;
+        const vy = e.velocityY;
+        if (onRelease) {
+          const result = onRelease({ x, y, velocity: { x: vx, y: vy } });
+          if (result) {
+            if (result.x && lockX) {
+              const toX = "to" in result.x ? result.x.to : x;
+              dragX.value = inertia.buildReleaseAnimation(
+                result.x,
+                toX
+              );
+            }
+            if (result.y && lockY) {
+              const toY = "to" in result.y ? result.y.to : y;
+              dragY.value = inertia.buildReleaseAnimation(
+                result.y,
+                toY
+              );
+            }
           }
         }
+        if (hasDragEnd) {
+          reactNativeReanimated.runOnJS(fireDragEnd)({ x, y, velocity: { x: vx, y: vy } });
+        }
       }
-      if (hasDragEnd) {
-        reactNativeReanimated.runOnJS(fireDragEnd)({ x, y, velocity: { x: vx, y: vy } });
-      }
-    });
-    return pan;
-  }, [
-    lockX,
-    lockY,
-    left,
-    right,
-    top,
-    bottom,
-    elasticCoef,
-    hasDragStart,
-    hasDragEnd,
-    fireDragStart,
-    fireDragEnd,
-    onRelease,
-    dragX,
-    dragY,
-    startX,
-    startY,
-    isDragging
-  ]);
+    }),
+    [
+      lockX,
+      lockY,
+      left,
+      right,
+      top,
+      bottom,
+      elasticCoef,
+      hasDragStart,
+      hasDragEnd,
+      fireDragStart,
+      fireDragEnd,
+      onRelease,
+      dragX,
+      dragY,
+      startX,
+      startY,
+      isDragging
+    ]
+  );
+  const gesture = reactNativeGestureHandler.usePanGesture(config);
   const animatedStyle = inertia.useTranslateStyle(dragX, dragY);
   return { gesture, animatedStyle, dragX, dragY, isDragging };
 }
@@ -157,103 +162,109 @@ function useSwipe(options = {}) {
   const hasSwipeEnd = onSwipeEnd !== void 0;
   const fireSwipe = useLatestCallback(onSwipe);
   const fireSwipeEnd = useLatestCallback(onSwipeEnd);
-  const gesture = react.useMemo(() => {
-    const pan = reactNativeGestureHandler.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 && 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(fireSwipe)(direction, { distance, velocity });
-      }
-      let exit = void 0;
-      if (direction !== null && onCommit) {
-        exit = onCommit(direction, {
-          x: swipeX.value,
-          y: swipeY.value,
-          velocity: { x: e.velocityX, y: e.velocityY }
-        });
-      }
-      let settle;
-      if (direction !== null && hasSwipeEnd) {
-        const dir = direction;
-        settle = (finished) => {
-          reactNativeReanimated.runOnJS(fireSwipeEnd)(dir, { finished: finished === true });
-        };
-      }
-      const isHorizontalCommit = direction === "left" || direction === "right";
-      const settleX = isHorizontalCommit ? settle : void 0;
-      const settleY = isHorizontalCommit ? void 0 : settle;
-      const exitX = exit ? exit.x : void 0;
-      const exitY = exit ? exit.y : void 0;
-      if (exitX) {
-        swipeX.value = inertia.buildReleaseAnimation(
-          exitX,
-          "to" in exitX ? exitX.to : swipeX.value,
-          settleX
-        );
-      } else {
-        swipeX.value = inertia.buildReleaseAnimation(
-          withReleaseVelocity(snapBack, e.velocityX),
-          0,
-          settleX
-        );
-      }
-      if (exitY) {
-        swipeY.value = inertia.buildReleaseAnimation(
-          exitY,
-          "to" in exitY ? exitY.to : swipeY.value,
-          settleY
-        );
-      } else {
-        swipeY.value = inertia.buildReleaseAnimation(
-          withReleaseVelocity(snapBack, e.velocityY),
-          0,
-          settleY
+  const config = react.useMemo(
+    () => ({
+      onActivate: () => {
+        "worklet";
+        isActive.value = true;
+      },
+      onUpdate: (e) => {
+        "worklet";
+        swipeX.value = e.translationX;
+        swipeY.value = e.translationY;
+      },
+      onDeactivate: (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 && 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(fireSwipe)(direction, { distance, velocity });
+        }
+        let exit = void 0;
+        if (direction !== null && onCommit) {
+          exit = onCommit(direction, {
+            x: swipeX.value,
+            y: swipeY.value,
+            velocity: { x: e.velocityX, y: e.velocityY }
+          });
+        }
+        let settle;
+        if (direction !== null && hasSwipeEnd) {
+          const dir = direction;
+          settle = (finished) => {
+            reactNativeReanimated.runOnJS(fireSwipeEnd)(dir, { finished: finished === true });
+          };
+        }
+        const isHorizontalCommit = direction === "left" || direction === "right";
+        const settleX = isHorizontalCommit ? settle : void 0;
+        const settleY = isHorizontalCommit ? void 0 : settle;
+        const exitX = exit ? exit.x : void 0;
+        const exitY = exit ? exit.y : void 0;
+        if (exitX) {
+          swipeX.value = inertia.buildReleaseAnimation(
+            exitX,
+            "to" in exitX ? exitX.to : swipeX.value,
+            settleX
+          );
+        } else {
+          swipeX.value = inertia.buildReleaseAnimation(
+            withReleaseVelocity(snapBack, e.velocityX),
+            0,
+            settleX
+          );
+        }
+        if (exitY) {
+          swipeY.value = inertia.buildReleaseAnimation(
+            exitY,
+            "to" in exitY ? exitY.to : swipeY.value,
+            settleY
+          );
+        } else {
+          swipeY.value = inertia.buildReleaseAnimation(
+            withReleaseVelocity(snapBack, e.velocityY),
+            0,
+            settleY
+          );
+        }
+      },
+      onFinalize: () => {
+        "worklet";
+        isActive.value = false;
       }
-    }).onFinalize(() => {
-      "worklet";
-      isActive.value = false;
-    });
-    return pan;
-  }, [
-    distanceThreshold,
-    velocityThreshold,
-    allowLeft,
-    allowRight,
-    allowUp,
-    allowDown,
-    snapBack,
-    hasSwipe,
-    hasSwipeEnd,
-    fireSwipe,
-    fireSwipeEnd,
-    onCommit,
-    swipeX,
-    swipeY,
-    isActive
-  ]);
+    }),
+    [
+      distanceThreshold,
+      velocityThreshold,
+      allowLeft,
+      allowRight,
+      allowUp,
+      allowDown,
+      snapBack,
+      hasSwipe,
+      hasSwipeEnd,
+      fireSwipe,
+      fireSwipeEnd,
+      onCommit,
+      swipeX,
+      swipeY,
+      isActive
+    ]
+  );
+  const gesture = reactNativeGestureHandler.usePanGesture(config);
   const animatedStyle = inertia.useTranslateStyle(swipeX, swipeY);
   const reset = react.useCallback(() => {
     swipeX.value = 0;
@@ -296,42 +307,48 @@ function usePan(options = {}) {
   const top = constraints?.top;
   const bottom = constraints?.bottom;
   const decel = deceleration;
-  const gesture = react.useMemo(() => {
-    const pan = reactNativeGestureHandler.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 = reactNativeReanimated.withDecay(decayConfig(e.velocityX, decel, clampX));
-      panY.value = reactNativeReanimated.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 config = react.useMemo(
+    () => ({
+      onActivate: () => {
+        "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);
+      },
+      onDeactivate: (e) => {
+        "worklet";
+        isPanning.value = false;
+        if (disableMomentum) return;
+        const clampX = boundsTuple(left, right);
+        const clampY = boundsTuple(top, bottom);
+        panX.value = reactNativeReanimated.withDecay(decayConfig(e.velocityX, decel, clampX));
+        panY.value = reactNativeReanimated.withDecay(decayConfig(e.velocityY, decel, clampY));
+      },
+      onFinalize: () => {
+        "worklet";
+        isPanning.value = false;
+      }
+    }),
+    [
+      left,
+      right,
+      top,
+      bottom,
+      decel,
+      disableMomentum,
+      panX,
+      panY,
+      startX,
+      startY,
+      isPanning
+    ]
+  );
+  const gesture = reactNativeGestureHandler.usePanGesture(config);
   const animatedStyle = inertia.useTranslateStyle(panX, panY);
   return { gesture, animatedStyle, panX, panY, isPanning };
 }

package/dist/index.mjs

@@ -1,7 +1,7 @@
 import { useMemo, useCallback, useRef } from 'react';
-import { Gesture } from 'react-native-gesture-handler';
+import { usePanGesture } from 'react-native-gesture-handler';
 import { useSharedValue, runOnJS, withDecay } from 'react-native-reanimated';
-import { applyBounds, buildReleaseAnimation, useTranslateStyle, useNamedTransitions, resolveNamedTransition } from '@rootnative/inertia';
+import { buildReleaseAnimation, applyBounds, useTranslateStyle, useNamedTransitions, resolveNamedTransition } from '@rootnative/inertia';
 
 // src/useDrag.ts
 function useLatestCallback(fn) {
@@ -38,81 +38,86 @@ function useDrag(options = {}) {
   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 (hasDragStart) runOnJS(fireDragStart)();
-    }).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;
-      const x = dragX.value;
-      const y = dragY.value;
-      const vx = e.velocityX;
-      const vy = e.velocityY;
-      if (onRelease) {
-        const result = onRelease({ x, y, velocity: { x: vx, y: vy } });
-        if (result) {
-          if (result.x && lockX) {
-            const toX = "to" in result.x ? result.x.to : x;
-            dragX.value = buildReleaseAnimation(
-              result.x,
-              toX
-            );
-          }
-          if (result.y && lockY) {
-            const toY = "to" in result.y ? result.y.to : y;
-            dragY.value = buildReleaseAnimation(
-              result.y,
-              toY
-            );
+  const config = useMemo(
+    () => ({
+      onActivate: () => {
+        "worklet";
+        startX.value = dragX.value;
+        startY.value = dragY.value;
+        isDragging.value = true;
+        if (hasDragStart) runOnJS(fireDragStart)();
+      },
+      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
+          );
+        }
+      },
+      onDeactivate: (e) => {
+        "worklet";
+        isDragging.value = false;
+        const x = dragX.value;
+        const y = dragY.value;
+        const vx = e.velocityX;
+        const vy = e.velocityY;
+        if (onRelease) {
+          const result = onRelease({ x, y, velocity: { x: vx, y: vy } });
+          if (result) {
+            if (result.x && lockX) {
+              const toX = "to" in result.x ? result.x.to : x;
+              dragX.value = buildReleaseAnimation(
+                result.x,
+                toX
+              );
+            }
+            if (result.y && lockY) {
+              const toY = "to" in result.y ? result.y.to : y;
+              dragY.value = buildReleaseAnimation(
+                result.y,
+                toY
+              );
+            }
           }
         }
+        if (hasDragEnd) {
+          runOnJS(fireDragEnd)({ x, y, velocity: { x: vx, y: vy } });
+        }
       }
-      if (hasDragEnd) {
-        runOnJS(fireDragEnd)({ x, y, velocity: { x: vx, y: vy } });
-      }
-    });
-    return pan;
-  }, [
-    lockX,
-    lockY,
-    left,
-    right,
-    top,
-    bottom,
-    elasticCoef,
-    hasDragStart,
-    hasDragEnd,
-    fireDragStart,
-    fireDragEnd,
-    onRelease,
-    dragX,
-    dragY,
-    startX,
-    startY,
-    isDragging
-  ]);
+    }),
+    [
+      lockX,
+      lockY,
+      left,
+      right,
+      top,
+      bottom,
+      elasticCoef,
+      hasDragStart,
+      hasDragEnd,
+      fireDragStart,
+      fireDragEnd,
+      onRelease,
+      dragX,
+      dragY,
+      startX,
+      startY,
+      isDragging
+    ]
+  );
+  const gesture = usePanGesture(config);
   const animatedStyle = useTranslateStyle(dragX, dragY);
   return { gesture, animatedStyle, dragX, dragY, isDragging };
 }
@@ -155,103 +160,109 @@ function useSwipe(options = {}) {
   const hasSwipeEnd = onSwipeEnd !== void 0;
   const fireSwipe = useLatestCallback(onSwipe);
   const fireSwipeEnd = useLatestCallback(onSwipeEnd);
-  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 && 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(fireSwipe)(direction, { distance, velocity });
-      }
-      let exit = void 0;
-      if (direction !== null && onCommit) {
-        exit = onCommit(direction, {
-          x: swipeX.value,
-          y: swipeY.value,
-          velocity: { x: e.velocityX, y: e.velocityY }
-        });
-      }
-      let settle;
-      if (direction !== null && hasSwipeEnd) {
-        const dir = direction;
-        settle = (finished) => {
-          runOnJS(fireSwipeEnd)(dir, { finished: finished === true });
-        };
-      }
-      const isHorizontalCommit = direction === "left" || direction === "right";
-      const settleX = isHorizontalCommit ? settle : void 0;
-      const settleY = isHorizontalCommit ? void 0 : settle;
-      const exitX = exit ? exit.x : void 0;
-      const exitY = exit ? exit.y : void 0;
-      if (exitX) {
-        swipeX.value = buildReleaseAnimation(
-          exitX,
-          "to" in exitX ? exitX.to : swipeX.value,
-          settleX
-        );
-      } else {
-        swipeX.value = buildReleaseAnimation(
-          withReleaseVelocity(snapBack, e.velocityX),
-          0,
-          settleX
-        );
-      }
-      if (exitY) {
-        swipeY.value = buildReleaseAnimation(
-          exitY,
-          "to" in exitY ? exitY.to : swipeY.value,
-          settleY
-        );
-      } else {
-        swipeY.value = buildReleaseAnimation(
-          withReleaseVelocity(snapBack, e.velocityY),
-          0,
-          settleY
+  const config = useMemo(
+    () => ({
+      onActivate: () => {
+        "worklet";
+        isActive.value = true;
+      },
+      onUpdate: (e) => {
+        "worklet";
+        swipeX.value = e.translationX;
+        swipeY.value = e.translationY;
+      },
+      onDeactivate: (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 && 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(fireSwipe)(direction, { distance, velocity });
+        }
+        let exit = void 0;
+        if (direction !== null && onCommit) {
+          exit = onCommit(direction, {
+            x: swipeX.value,
+            y: swipeY.value,
+            velocity: { x: e.velocityX, y: e.velocityY }
+          });
+        }
+        let settle;
+        if (direction !== null && hasSwipeEnd) {
+          const dir = direction;
+          settle = (finished) => {
+            runOnJS(fireSwipeEnd)(dir, { finished: finished === true });
+          };
+        }
+        const isHorizontalCommit = direction === "left" || direction === "right";
+        const settleX = isHorizontalCommit ? settle : void 0;
+        const settleY = isHorizontalCommit ? void 0 : settle;
+        const exitX = exit ? exit.x : void 0;
+        const exitY = exit ? exit.y : void 0;
+        if (exitX) {
+          swipeX.value = buildReleaseAnimation(
+            exitX,
+            "to" in exitX ? exitX.to : swipeX.value,
+            settleX
+          );
+        } else {
+          swipeX.value = buildReleaseAnimation(
+            withReleaseVelocity(snapBack, e.velocityX),
+            0,
+            settleX
+          );
+        }
+        if (exitY) {
+          swipeY.value = buildReleaseAnimation(
+            exitY,
+            "to" in exitY ? exitY.to : swipeY.value,
+            settleY
+          );
+        } else {
+          swipeY.value = buildReleaseAnimation(
+            withReleaseVelocity(snapBack, e.velocityY),
+            0,
+            settleY
+          );
+        }
+      },
+      onFinalize: () => {
+        "worklet";
+        isActive.value = false;
       }
-    }).onFinalize(() => {
-      "worklet";
-      isActive.value = false;
-    });
-    return pan;
-  }, [
-    distanceThreshold,
-    velocityThreshold,
-    allowLeft,
-    allowRight,
-    allowUp,
-    allowDown,
-    snapBack,
-    hasSwipe,
-    hasSwipeEnd,
-    fireSwipe,
-    fireSwipeEnd,
-    onCommit,
-    swipeX,
-    swipeY,
-    isActive
-  ]);
+    }),
+    [
+      distanceThreshold,
+      velocityThreshold,
+      allowLeft,
+      allowRight,
+      allowUp,
+      allowDown,
+      snapBack,
+      hasSwipe,
+      hasSwipeEnd,
+      fireSwipe,
+      fireSwipeEnd,
+      onCommit,
+      swipeX,
+      swipeY,
+      isActive
+    ]
+  );
+  const gesture = usePanGesture(config);
   const animatedStyle = useTranslateStyle(swipeX, swipeY);
   const reset = useCallback(() => {
     swipeX.value = 0;
@@ -294,42 +305,48 @@ function usePan(options = {}) {
   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 config = useMemo(
+    () => ({
+      onActivate: () => {
+        "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);
+      },
+      onDeactivate: (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;
+      }
+    }),
+    [
+      left,
+      right,
+      top,
+      bottom,
+      decel,
+      disableMomentum,
+      panX,
+      panY,
+      startX,
+      startY,
+      isPanning
+    ]
+  );
+  const gesture = usePanGesture(config);
   const animatedStyle = useTranslateStyle(panX, panY);
   return { gesture, animatedStyle, panX, panY, isPanning };
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rootnative/inertia-gestures",
-  "version": "0.0.19",
+  "version": "0.0.20",
   "description": "Gesture-handler-driven drag / pan / swipe adapters for @rootnative/inertia.",
   "license": "MIT",
   "author": "RootNative",
@@ -50,28 +50,28 @@
     "!**/*.test.*"
   ],
   "peerDependencies": {
-    "@rootnative/inertia": ">=0.0.19 <0.1.0",
-    "react": ">=19.2.3 <20.0.0",
-    "react-native": ">=0.83.0 <0.87.0",
-    "react-native-gesture-handler": ">=2.30.0 <3.0.0",
-    "react-native-reanimated": ">=4.5.0 <4.6.0"
+    "@rootnative/inertia": ">=0.0.20 <0.1.0",
+    "react": ">=19.3.0 <20.0.0",
+    "react-native": ">=0.88.0 <0.89.0",
+    "react-native-gesture-handler": ">=3.3.0 <4.0.0",
+    "react-native-reanimated": ">=4.7.0 <4.8.0"
   },
   "devDependencies": {
-    "@react-native/babel-preset": "^0.86.3",
-    "@react-native/jest-preset": "^0.86.3",
+    "@react-native/babel-preset": "^0.88.0",
+    "@react-native/jest-preset": "^0.88.0",
     "@testing-library/react-native": "^13.3.3",
     "@types/jest": "^29.5.14",
-    "@types/react": "^19.2.0",
+    "@types/react": "^19.3.0",
     "jest": "^29.7.0",
-    "react": "19.2.3",
-    "react-native": "0.86.3",
-    "react-native-gesture-handler": "~2.32.0",
-    "react-native-reanimated": "4.5.1",
-    "react-native-worklets": "0.10.1",
-    "react-test-renderer": "19.2.3",
+    "react": "19.3.0",
+    "react-native": "0.88.0",
+    "react-native-gesture-handler": "~3.3.0",
+    "react-native-reanimated": "4.7.1",
+    "react-native-worklets": "0.13.0",
+    "react-test-renderer": "19.3.0",
     "tsup": "^8.3.5",
     "typescript": "^5.7.3",
-    "@rootnative/inertia": "0.0.19"
+    "@rootnative/inertia": "0.0.20"
   },
   "publishConfig": {
     "access": "public"

package/src/useDrag.ts

@@ -1,5 +1,9 @@
 import { useMemo } from 'react'
-import { Gesture, type PanGesture } from 'react-native-gesture-handler'
+import {
+  usePanGesture,
+  type PanGesture,
+  type PanGestureConfig,
+} from 'react-native-gesture-handler'
 import {
   runOnJS,
   useSharedValue,
@@ -91,16 +95,16 @@ export function useDrag(options: DragOptions = {}): UseDragResult {
   const fireDragStart = useLatestCallback(onDragStart)
   const fireDragEnd = useLatestCallback(onDragEnd)
 
-  const gesture = useMemo(() => {
-    const pan = Gesture.Pan()
-      .onStart(() => {
+  const config = useMemo<PanGestureConfig>(
+    () => ({
+      onActivate: () => {
         'worklet'
         startX.value = dragX.value
         startY.value = dragY.value
         isDragging.value = true
         if (hasDragStart) runOnJS(fireDragStart)()
-      })
-      .onUpdate((e) => {
+      },
+      onUpdate: (e) => {
         'worklet'
         if (lockX) {
           dragX.value = applyBounds(
@@ -118,8 +122,8 @@ export function useDrag(options: DragOptions = {}): UseDragResult {
             elasticCoef,
           )
         }
-      })
-      .onEnd((e) => {
+      },
+      onDeactivate: (e) => {
         'worklet'
         isDragging.value = false
         const x = dragX.value
@@ -151,27 +155,30 @@ export function useDrag(options: DragOptions = {}): UseDragResult {
         if (hasDragEnd) {
           runOnJS(fireDragEnd)({ x, y, velocity: { x: vx, y: vy } })
         }
-      })
-    return pan
-  }, [
-    lockX,
-    lockY,
-    left,
-    right,
-    top,
-    bottom,
-    elasticCoef,
-    hasDragStart,
-    hasDragEnd,
-    fireDragStart,
-    fireDragEnd,
-    onRelease,
-    dragX,
-    dragY,
-    startX,
-    startY,
-    isDragging,
-  ])
+      },
+    }),
+    [
+      lockX,
+      lockY,
+      left,
+      right,
+      top,
+      bottom,
+      elasticCoef,
+      hasDragStart,
+      hasDragEnd,
+      fireDragStart,
+      fireDragEnd,
+      onRelease,
+      dragX,
+      dragY,
+      startX,
+      startY,
+      isDragging,
+    ],
+  )
+
+  const gesture = usePanGesture(config)
 
   const animatedStyle = useTranslateStyle(dragX, dragY)
 

package/src/usePan.ts

@@ -1,5 +1,9 @@
 import { useMemo } from 'react'
-import { Gesture, type PanGesture } from 'react-native-gesture-handler'
+import {
+  usePanGesture,
+  type PanGesture,
+  type PanGestureConfig,
+} from 'react-native-gesture-handler'
 import {
   useSharedValue,
   withDecay,
@@ -73,20 +77,20 @@ export function usePan(options: PanOptions = {}): UsePanResult {
   const bottom = constraints?.bottom
   const decel = deceleration
 
-  const gesture = useMemo(() => {
-    const pan = Gesture.Pan()
-      .onStart(() => {
+  const config = useMemo<PanGestureConfig>(
+    () => ({
+      onActivate: () => {
         'worklet'
         startX.value = panX.value
         startY.value = panY.value
         isPanning.value = true
-      })
-      .onUpdate((e) => {
+      },
+      onUpdate: (e) => {
         'worklet'
         panX.value = clamp(startX.value + e.translationX, left, right)
         panY.value = clamp(startY.value + e.translationY, top, bottom)
-      })
-      .onEnd((e) => {
+      },
+      onDeactivate: (e) => {
         'worklet'
         isPanning.value = false
         if (disableMomentum) return
@@ -94,25 +98,28 @@ export function usePan(options: PanOptions = {}): UsePanResult {
         const clampY = boundsTuple(top, bottom)
         panX.value = withDecay(decayConfig(e.velocityX, decel, clampX))
         panY.value = withDecay(decayConfig(e.velocityY, decel, clampY))
-      })
-      .onFinalize(() => {
+      },
+      onFinalize: () => {
         'worklet'
         isPanning.value = false
-      })
-    return pan
-  }, [
-    left,
-    right,
-    top,
-    bottom,
-    decel,
-    disableMomentum,
-    panX,
-    panY,
-    startX,
-    startY,
-    isPanning,
-  ])
+      },
+    }),
+    [
+      left,
+      right,
+      top,
+      bottom,
+      decel,
+      disableMomentum,
+      panX,
+      panY,
+      startX,
+      startY,
+      isPanning,
+    ],
+  )
+
+  const gesture = usePanGesture(config)
 
   const animatedStyle = useTranslateStyle(panX, panY)
 

package/src/useSwipe.ts

@@ -1,5 +1,9 @@
 import { useCallback, useMemo } from 'react'
-import { Gesture, type PanGesture } from 'react-native-gesture-handler'
+import {
+  usePanGesture,
+  type PanGesture,
+  type PanGestureConfig,
+} from 'react-native-gesture-handler'
 import {
   runOnJS,
   useSharedValue,
@@ -230,18 +234,18 @@ export function useSwipe(options: SwipeOptions = {}): UseSwipeResult {
   const fireSwipe = useLatestCallback(onSwipe)
   const fireSwipeEnd = useLatestCallback(onSwipeEnd)
 
-  const gesture = useMemo(() => {
-    const pan = Gesture.Pan()
-      .onStart(() => {
+  const config = useMemo<PanGestureConfig>(
+    () => ({
+      onActivate: () => {
         'worklet'
         isActive.value = true
-      })
-      .onUpdate((e) => {
+      },
+      onUpdate: (e) => {
         'worklet'
         swipeX.value = e.translationX
         swipeY.value = e.translationY
-      })
-      .onEnd((e) => {
+      },
+      onDeactivate: (e) => {
         'worklet'
         isActive.value = false
         const direction = pickDirection(
@@ -322,29 +326,32 @@ export function useSwipe(options: SwipeOptions = {}): UseSwipeResult {
             settleY,
           ) as unknown as number
         }
-      })
-      .onFinalize(() => {
+      },
+      onFinalize: () => {
         'worklet'
         isActive.value = false
-      })
-    return pan
-  }, [
-    distanceThreshold,
-    velocityThreshold,
-    allowLeft,
-    allowRight,
-    allowUp,
-    allowDown,
-    snapBack,
-    hasSwipe,
-    hasSwipeEnd,
-    fireSwipe,
-    fireSwipeEnd,
-    onCommit,
-    swipeX,
-    swipeY,
-    isActive,
-  ])
+      },
+    }),
+    [
+      distanceThreshold,
+      velocityThreshold,
+      allowLeft,
+      allowRight,
+      allowUp,
+      allowDown,
+      snapBack,
+      hasSwipe,
+      hasSwipeEnd,
+      fireSwipe,
+      fireSwipeEnd,
+      onCommit,
+      swipeX,
+      swipeY,
+      isActive,
+    ],
+  )
+
+  const gesture = usePanGesture(config)
 
   const animatedStyle = useTranslateStyle(swipeX, swipeY)