@rootnative/inertia 0.0.7 → 0.0.8

package/dist/motion/Image.js

@@ -1,13 +1,13 @@
 'use strict';
 
-var chunkYUTS6JRU_js = require('../chunk-YUTS6JRU.js');
-require('../chunk-6V7MOBXO.js');
-require('../chunk-OBRGJAST.js');
-require('../chunk-PM6CVGXJ.js');
+var chunkZ5USXWTE_js = require('../chunk-Z5USXWTE.js');
+require('../chunk-E3ALFSH2.js');
+require('../chunk-6AN5X3YE.js');
+require('../chunk-WNVHPMBI.js');
 
 
 
 Object.defineProperty(exports, "MotionImage", {
   enumerable: true,
-  get: function () { return chunkYUTS6JRU_js.MotionImage; }
+  get: function () { return chunkZ5USXWTE_js.MotionImage; }
 });

package/dist/motion/Image.mjs

@@ -1,4 +1,4 @@
-export { MotionImage } from '../chunk-KBFN4TRO.mjs';
-import '../chunk-HPJMIBBK.mjs';
-import '../chunk-Z3HCJ43H.mjs';
-import '../chunk-REYL77RE.mjs';
+export { MotionImage } from '../chunk-6YIUETBF.mjs';
+import '../chunk-IX6SEOSK.mjs';
+import '../chunk-MFAFB4K7.mjs';
+import '../chunk-W7NTRSPD.mjs';

package/dist/motion/Pressable.js

@@ -1,13 +1,13 @@
 'use strict';
 
-var chunkWGCF3WQG_js = require('../chunk-WGCF3WQG.js');
-require('../chunk-6V7MOBXO.js');
-require('../chunk-OBRGJAST.js');
-require('../chunk-PM6CVGXJ.js');
+var chunk6NOCY764_js = require('../chunk-6NOCY764.js');
+require('../chunk-E3ALFSH2.js');
+require('../chunk-6AN5X3YE.js');
+require('../chunk-WNVHPMBI.js');
 
 
 
 Object.defineProperty(exports, "MotionPressable", {
   enumerable: true,
-  get: function () { return chunkWGCF3WQG_js.MotionPressable; }
+  get: function () { return chunk6NOCY764_js.MotionPressable; }
 });

package/dist/motion/Pressable.mjs

@@ -1,4 +1,4 @@
-export { MotionPressable } from '../chunk-52QSN2VQ.mjs';
-import '../chunk-HPJMIBBK.mjs';
-import '../chunk-Z3HCJ43H.mjs';
-import '../chunk-REYL77RE.mjs';
+export { MotionPressable } from '../chunk-JBK5ZLMH.mjs';
+import '../chunk-IX6SEOSK.mjs';
+import '../chunk-MFAFB4K7.mjs';
+import '../chunk-W7NTRSPD.mjs';

package/dist/motion/ScrollView.js

@@ -1,13 +1,13 @@
 'use strict';
 
-var chunkQYR66E2G_js = require('../chunk-QYR66E2G.js');
-require('../chunk-6V7MOBXO.js');
-require('../chunk-OBRGJAST.js');
-require('../chunk-PM6CVGXJ.js');
+var chunkZBHQPVWE_js = require('../chunk-ZBHQPVWE.js');
+require('../chunk-E3ALFSH2.js');
+require('../chunk-6AN5X3YE.js');
+require('../chunk-WNVHPMBI.js');
 
 
 
 Object.defineProperty(exports, "MotionScrollView", {
   enumerable: true,
-  get: function () { return chunkQYR66E2G_js.MotionScrollView; }
+  get: function () { return chunkZBHQPVWE_js.MotionScrollView; }
 });

package/dist/motion/ScrollView.mjs

@@ -1,4 +1,4 @@
-export { MotionScrollView } from '../chunk-VSK2E35J.mjs';
-import '../chunk-HPJMIBBK.mjs';
-import '../chunk-Z3HCJ43H.mjs';
-import '../chunk-REYL77RE.mjs';
+export { MotionScrollView } from '../chunk-M4766VUV.mjs';
+import '../chunk-IX6SEOSK.mjs';
+import '../chunk-MFAFB4K7.mjs';
+import '../chunk-W7NTRSPD.mjs';

package/dist/motion/Text.js

@@ -1,13 +1,13 @@
 'use strict';
 
-var chunkZSOCRHU3_js = require('../chunk-ZSOCRHU3.js');
-require('../chunk-6V7MOBXO.js');
-require('../chunk-OBRGJAST.js');
-require('../chunk-PM6CVGXJ.js');
+var chunk4XBX7KOD_js = require('../chunk-4XBX7KOD.js');
+require('../chunk-E3ALFSH2.js');
+require('../chunk-6AN5X3YE.js');
+require('../chunk-WNVHPMBI.js');
 
 
 
 Object.defineProperty(exports, "MotionText", {
   enumerable: true,
-  get: function () { return chunkZSOCRHU3_js.MotionText; }
+  get: function () { return chunk4XBX7KOD_js.MotionText; }
 });

package/dist/motion/Text.mjs

@@ -1,4 +1,4 @@
-export { MotionText } from '../chunk-WMLS4TMX.mjs';
-import '../chunk-HPJMIBBK.mjs';
-import '../chunk-Z3HCJ43H.mjs';
-import '../chunk-REYL77RE.mjs';
+export { MotionText } from '../chunk-QNLSCOR5.mjs';
+import '../chunk-IX6SEOSK.mjs';
+import '../chunk-MFAFB4K7.mjs';
+import '../chunk-W7NTRSPD.mjs';

package/dist/motion/View.js

@@ -1,13 +1,13 @@
 'use strict';
 
-var chunkNPJ46457_js = require('../chunk-NPJ46457.js');
-require('../chunk-6V7MOBXO.js');
-require('../chunk-OBRGJAST.js');
-require('../chunk-PM6CVGXJ.js');
+var chunk24NUL23E_js = require('../chunk-24NUL23E.js');
+require('../chunk-E3ALFSH2.js');
+require('../chunk-6AN5X3YE.js');
+require('../chunk-WNVHPMBI.js');
 
 
 
 Object.defineProperty(exports, "MotionView", {
   enumerable: true,
-  get: function () { return chunkNPJ46457_js.MotionView; }
+  get: function () { return chunk24NUL23E_js.MotionView; }
 });

package/dist/motion/View.mjs

@@ -1,4 +1,4 @@
-export { MotionView } from '../chunk-RUIOM2YZ.mjs';
-import '../chunk-HPJMIBBK.mjs';
-import '../chunk-Z3HCJ43H.mjs';
-import '../chunk-REYL77RE.mjs';
+export { MotionView } from '../chunk-GSUC4HWP.mjs';
+import '../chunk-IX6SEOSK.mjs';
+import '../chunk-MFAFB4K7.mjs';
+import '../chunk-W7NTRSPD.mjs';

package/dist/touch/index.js

@@ -1,6 +1,6 @@
 'use strict';
 
-var chunkPM6CVGXJ_js = require('../chunk-PM6CVGXJ.js');
+var chunkWNVHPMBI_js = require('../chunk-WNVHPMBI.js');
 var react = require('react');
 var reactNative = require('react-native');
 var reactNativeReanimated = require('react-native-reanimated');
@@ -48,14 +48,14 @@ function useTouchDrag(options = {}) {
         if (result) {
           if (result.x && lockX) {
             const toX = "to" in result.x ? result.x.to : x;
-            dragX.value = chunkPM6CVGXJ_js.buildReleaseAnimation(
+            dragX.value = chunkWNVHPMBI_js.buildReleaseAnimation(
               result.x,
               toX
             );
           }
           if (result.y && lockY) {
             const toY = "to" in result.y ? result.y.to : y;
-            dragY.value = chunkPM6CVGXJ_js.buildReleaseAnimation(
+            dragY.value = chunkWNVHPMBI_js.buildReleaseAnimation(
               result.y,
               toY
             );

package/dist/touch/index.mjs

@@ -1,4 +1,4 @@
-import { buildReleaseAnimation } from '../chunk-REYL77RE.mjs';
+import { buildReleaseAnimation } from '../chunk-W7NTRSPD.mjs';
 import { useMemo } from 'react';
 import { PanResponder } from 'react-native';
 import { useSharedValue, useAnimatedStyle } from 'react-native-reanimated';

package/llms.txt

@@ -10,12 +10,28 @@ pnpm add @rootnative/inertia react-native-reanimated
 
 Enable the Reanimated Babel plugin per its install guide.
 
+## Which package has what
+
+The core package does not contain the gesture hooks, the gradient primitive, or the SVG primitives. Each is a separate install. `useSwipe` and `useDrag` are **not** in core — a swipe deck needs `@rootnative/inertia-gestures`.
+
+| You want | Package | Extra peer dependency |
+| --- | --- | --- |
+| `Motion.*`, `Presence`, `Stagger`, `MotionConfig`, every value-layer hook | `@rootnative/inertia` | — (core, always required) |
+| `useDrag`, `useSwipe`, `usePan` | `@rootnative/inertia-gestures` | `react-native-gesture-handler` |
+| Animatable linear gradients | `@rootnative/inertia-gradients` | `expo-linear-gradient` |
+| Animatable SVG paths and shapes | `@rootnative/inertia-svg` | `react-native-svg` |
+
+`useTouchDrag` is the exception: a drag hook in **core**, under the `@rootnative/inertia/touch` subpath, because PanResponder is built into React Native. Use it for drag without `react-native-gesture-handler`, or when the drag needs keyboard accessibility.
+
+All four packages ship in **lockstep** — same version, released together. Install the same version of every `@rootnative/inertia*` package you use. Two things that mislead: the `@rootnative/core` and `@rootnative/components` packages of RootNative UI are a different library on a different version line, and `npm view` shows an `alpha` dist-tag on these packages that is **older** than `latest` (a prerelease leftover — follow `latest`).
+
 ## Imports
 
 ```ts
 import {
   Motion,
   Presence,
+  Stagger,
   MotionConfig,
   useGesture,
   useVariants,
@@ -50,6 +66,7 @@ import { MotionFlatList } from '@rootnative/inertia/flat-list'
 
 - `Motion.View` / `Motion.Text` / `Motion.Image` / `Motion.Pressable` / `Motion.ScrollView` / `Motion.FlatList` — animatable primitives. Per-primitive style inference (no shared `ViewStyle & TextStyle & ImageStyle` fallback). `Motion.FlatList` is the **virtualized** animated scroller: it takes `useScroll`'s `onScroll` handler and keeps `data` / `renderItem` item-type inference, so a long list can virtualize and animate at once. Animation props apply to the scroll container; animate rows with a `Motion.*` inside `renderItem`.
 - `<Presence>` — mount / unmount transitions; children need explicit `key`s. Exiting children get `pointerEvents: 'none'` automatically.
+- `<Stagger interval delay? from? enabled?>` — assigns each child a delay of `delay + position * interval` (ms), applied to the declarative animations (`initial` → `animate`, later `animate` changes) of every `Motion.*` primitive in that child's subtree. `from='last'` reverses the cascade; `enabled={false}` zeroes every delay (the "cascade in, snap out" switch). Composes with the child's own `transition.delay`; never delays `gesture` feedback, `<Presence>` exits, or reduced-motion snaps. Renders no host view. Custom animated components read the slot's delay with `useStaggerDelay()`.
 - `<MotionConfig reducedMotion="user" | "never" | "always" transitions={{ name: TransitionConfig }}>` — gates motion against the OS reduce-motion setting (default `"user"`) and registers named transitions for the subtree. A registered name is accepted anywhere a `TransitionConfig` is: the `transition` prop (top-level and per-property/per-layer), the `layout` prop, and the value-layer hooks (`transition="selection"`, `useBooleanSpring(checked, 'selection')`). Nested providers merge (child overrides per name); unknown names warn in dev and fall back to the default spring. Names are consumer vocabulary — no presets ship with the library. Optional compile-time narrowing via `declare module '@rootnative/inertia' { interface RegisteredTransitions { ... } }`. Custom components join the registry with `useNamedTransitions()` + `resolveNamedTransition(input, registry)`.
 - `useGesture(transition?)` — hook-form of the `gesture` prop. Returns 0↔1 progress shared values (`pressed`, `focused`, `focusVisible`, `hovered`) plus a `handlers` bag to spread on a `Pressable`. Use when one gesture needs to drive multiple animated siblings (focus rings, MD3 state-layer halos, multi-element compositions).
 - `useGestureLayer(states, options?)` — opt-in helper at `@rootnative/inertia/gesture-layer` for the **strongest-active-layer-wins** composition (MD3 state-layer haloes, iOS-translucent overlays). Supply per-state target maps (`rest` / `hovered` / `focused` / `focusVisible` / `pressed` / `disabled`); the hook owns the worklet. Numeric keys compose via clamped-max with `rest` as the floor; color keys compose via priority cascade with `interpolateColor`; `disabled` (JS-side flag) overrides every gesture layer. Returns `{ style, handlers, states }` — `states` is the per-state 0↔1 progress shared values (`hovered` / `focused` / `focusVisible` / `pressed` / `disabled`) behind the composed style, for deriving extra styles (e.g. `useShadow({ progress: states.hovered })`) from the same gesture wiring. Reach for plain `useGesture` for additive blends or per-key custom rules.
@@ -153,7 +170,7 @@ Auto-layout transitions ship via the `layout` prop (`true` / `TransitionConfig`)
 
 - `@rootnative/inertia-gradients` — `MotionLinearGradient` over `expo-linear-gradient`. Animatable: `colors`, `start`, `end`, `locations`.
 - `@rootnative/inertia-svg` — animatable SVG primitives over `react-native-svg`, all under the `MotionSvg` namespace (`MotionSvg.Path` / `.Circle` / `.Rect` / `.Line`) or as direct imports. `MotionPath` animates `d` (path morphing on structurally-compatible paths — same command sequence after implicit-repeat expansion; remount with `key` to switch shape), `fill`, `stroke`, `strokeWidth`, opacities, `strokeDashoffset`. `MotionCircle` / `MotionRect` / `MotionLine` animate their geometry props, paints, and `strokeDasharray` (element-wise; array length locked at mount). `createMotionSvgComponent(Component, { animatableProps, colorProps, arrayProps })` — the factory behind the prebuilt shapes — wraps any other `react-native-svg` element with the same `initial` / `animate` / `transition` surface; `transition` accepts named transitions from the nearest `<MotionConfig transitions>` (top-level and per-property).
-- `@rootnative/inertia-gestures` — `useDrag`, `useSwipe`, `usePan` over `react-native-gesture-handler`. `useDrag` accepts an `onRelease` worklet that returns per-axis Inertia release transitions (snap-to-tick spring, decay with bounds, etc.) — the release velocity stays on the UI thread, no JS round-trip.
+- `@rootnative/inertia-gestures` — `useDrag`, `useSwipe`, `usePan` over `react-native-gesture-handler`. `useDrag` accepts an `onRelease` worklet that returns per-axis Inertia release transitions (snap-to-tick spring, decay with bounds, etc.) — the release velocity stays on the UI thread, no JS round-trip. `useSwipe`'s snap-back is configurable (`releaseTransition`, inline or a named transition, release velocity passed in), and a committed swipe can exit the screen instead of snapping back: `onCommit` (UI-thread worklet, returns per-axis exit transitions) + `onSwipeEnd` (JS thread, fires when the release animation settles) — the card-deck shape.
 
 ## Docs
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rootnative/inertia",
-  "version": "0.0.7",
+  "version": "0.0.8",
   "description": "Declarative animation primitives for React Native, built on react-native-reanimated.",
   "license": "MIT",
   "author": "RootNative",

package/src/index.ts

@@ -33,12 +33,16 @@ export type {
 } from './config'
 export { Presence, usePresence } from './presence'
 export type { PresenceContextValue } from './presence'
+export { Stagger, useStaggerDelay } from './stagger'
+export type { StaggerProps } from './stagger'
 export {
+  applyDelay,
   buildReleaseAnimation,
   cubicBezier,
   resolveTransition,
   resolveAnimatableValue,
   ensureWorkletEasing,
+  type AnimationCallback,
 } from './transitions'
 // Seed value for any color shared value a custom animated component drives
 // through `resolveTransition`. Exported because the obvious choice —

package/src/motion/createMotionComponent.tsx

@@ -43,7 +43,9 @@ import {
   useSharedLayout,
 } from '../layout'
 import { usePresence } from '../presence'
+import { useStaggerDelay } from '../stagger'
 import {
+  applyDelay,
   isTopLevelTransition,
   resolveAnimatableValue,
   resolveTransition,
@@ -547,6 +549,13 @@ export function createMotionComponent<C extends ComponentType<any>>(
       // at app start — a runtime toggle takes effect on the next launch.
       const shouldReduceMotion = useShouldReduceMotion()
 
+      // Per-child delay assigned by the nearest <Stagger> ancestor; 0 outside
+      // one. Applied in the value-driving effect, not here: the effect's
+      // closure reads the value current at the render that starts an
+      // animation, and a delay change alone must not re-trigger anything —
+      // so it is deliberately absent from the effect's deps.
+      const staggerDelay = useStaggerDelay()
+
       // Pin the latest `onAnimationEnd` in a ref so the worklet callback always
       // dispatches against the current closure without re-resolving the
       // animation graph. Worklets can read refs via `runOnJS`.
@@ -962,6 +971,22 @@ export function createMotionComponent<C extends ComponentType<any>>(
                 transition,
               )
 
+        // <Stagger> delay for this run, wrapped around each key's fully
+        // resolved animation via `applyDelay` — once per animation, never
+        // merged into the base config (a sequence applies a base `delay` per
+        // step, which would stretch the whole sequence by N × delay). Composes
+        // with a consumer's own `transition.delay`, which `resolveTransition`
+        // has already applied inside.
+        //
+        // Deliberately 0 while exiting (an exit delayed by list position holds
+        // <Presence>'s unmount hostage to the cascade) and under reduced
+        // motion (a snap must not be deferred — same contract as `delayOf`
+        // returning `undefined` for `no-animation`).
+        const runStagger =
+          shouldReduceMotion || isExiting || staggerDelay <= 0
+            ? 0
+            : staggerDelay
+
         // Count transform axes participating in this effect run so the factory
         // can coalesce their terminal callbacks into a single transform-group
         // event. `undefined` when no transform axis is animating, which lets
@@ -996,6 +1021,7 @@ export function createMotionComponent<C extends ComponentType<any>>(
               boxShadowInsets,
               shadowTarget,
               cfg,
+              runStagger,
               makeKeyCallbackFactory(
                 'boxShadow',
                 sharedValues.boxShadow,
@@ -1051,12 +1077,15 @@ export function createMotionComponent<C extends ComponentType<any>>(
           // `'no-animation'` (and so under reduced motion) it is assigned
           // straight into the slot, and the next animation would start from a
           // value that can't be parsed.
-          sharedValues[key].value = resolveAnimatableValue(
-            COLOR_KEY_SET.has(key)
-              ? normalizeAnimatableColorTarget(target)
-              : target,
-            cfg,
-            factory,
+          sharedValues[key].value = applyDelay(
+            resolveAnimatableValue(
+              COLOR_KEY_SET.has(key)
+                ? normalizeAnimatableColorTarget(target)
+                : target,
+              cfg,
+              factory,
+            ),
+            runStagger,
           ) as never
         }
 
@@ -1655,6 +1684,7 @@ function driveBoxShadow(
   insetSlot: SharedValue<boolean[] | null>,
   target: BoxShadowInput,
   cfg: TransitionConfig | undefined,
+  staggerDelay: number,
   factory: CallbackFactory | undefined,
 ): void {
   const currentLayers = payloadToLayers(slot.value as BoxShadowPayload)
@@ -1666,10 +1696,15 @@ function driveBoxShadow(
   if (from.length !== currentLayers.length) slot.value = layersToPayload(from)
   // `resolveTransition` is typed for the scalar surface it was written for;
   // Reanimated itself accepts the structured target and recurses into it.
-  slot.value = resolveTransition(
-    cfg,
-    layersToPayload(to) as unknown as number,
-    factory?.('animation', undefined),
+  // The stagger wrap sits outside, same as the scalar path — this key can't
+  // be a sequence, but keeping the delay out of `cfg` keeps one rule.
+  slot.value = applyDelay(
+    resolveTransition(
+      cfg,
+      layersToPayload(to) as unknown as number,
+      factory?.('animation', undefined),
+    ),
+    staggerDelay,
   ) as AnimatableSlotValue
 }
 

package/src/stagger/Stagger.tsx

@@ -0,0 +1,75 @@
+import { Children, isValidElement, type ReactNode } from 'react'
+import { StaggerContext } from './StaggerContext'
+
+export interface StaggerProps {
+  children?: ReactNode
+  /**
+   * Milliseconds between consecutive children. Child `i` (in render order)
+   * receives a delay of `delay + i * interval`.
+   */
+  interval: number
+  /**
+   * Base delay in milliseconds applied to every child before the interval,
+   * so the whole cascade can start late without pushing the spacing into
+   * each child. Defaults to `0`.
+   */
+  delay?: number
+  /**
+   * Which end of the child list starts the cascade. `'first'` (default)
+   * staggers top-down in render order; `'last'` reverses it, so the final
+   * child animates first.
+   */
+  from?: 'first' | 'last'
+  /**
+   * Turn the stagger on or off in one place. When `false`, every child gets
+   * a delay of `0` — the single-switch escape hatch for "cascade in, but
+   * not back out": pass `enabled={revealed}` and the hide direction snaps
+   * together. Defaults to `true`.
+   */
+  enabled?: boolean
+}
+
+/**
+ * Assign each child a stagger delay from its position, so a list entrance
+ * cascades without every child computing `index * ms` itself.
+ *
+ * The parent owns the timing: reordering, filtering, or reversing the list
+ * re-derives every delay from the new render order, and `enabled` turns the
+ * whole cascade off in one place. Each child slot gets its own provider, so
+ * a `Motion.*` primitive anywhere inside child `i`'s subtree inherits child
+ * `i`'s delay.
+ *
+ * The delay applies to the declarative animations of the `Motion.*`
+ * primitives underneath — the mount animation (`initial` → `animate`) and
+ * any later `animate` change. It deliberately does not delay `gesture`
+ * feedback, `<Presence>` exits, or reduced-motion snaps.
+ *
+ * `<Stagger>` renders no host view — only per-child context providers.
+ */
+export function Stagger({
+  children,
+  interval,
+  delay = 0,
+  from = 'first',
+  enabled = true,
+}: StaggerProps) {
+  // `Children.toArray` drops `null` / `undefined` / booleans, so conditional
+  // children don't leave holes in the cascade, and it assigns stable
+  // element keys that the providers below reuse.
+  const items = Children.toArray(children)
+  const count = items.length
+  return (
+    <>
+      {items.map((child, index) => {
+        const position = from === 'last' ? count - 1 - index : index
+        const childDelay = enabled ? delay + position * interval : 0
+        const key = isValidElement(child) ? (child.key ?? index) : index
+        return (
+          <StaggerContext.Provider key={key} value={childDelay}>
+            {child}
+          </StaggerContext.Provider>
+        )
+      })}
+    </>
+  )
+}

package/src/stagger/StaggerContext.ts

@@ -0,0 +1,25 @@
+import { createContext, useContext } from 'react'
+
+/**
+ * Per-child stagger delay in milliseconds, provided by `<Stagger>`. `0`
+ * outside a `<Stagger>` (or under a disabled one), which every consumer
+ * treats as "no stagger".
+ *
+ * Internal wiring — consumers use `<Stagger>`; custom animated components
+ * read the value through `useStaggerDelay()`.
+ */
+export const StaggerContext = createContext(0)
+
+/**
+ * The stagger delay (in milliseconds) assigned to this element's child slot
+ * by the nearest `<Stagger>` ancestor. `0` when there is none, when the
+ * stagger is disabled, or for the first child of a zero-`delay` stagger.
+ *
+ * The `Motion.*` primitives consume this automatically. Custom animated
+ * components built on `resolveTransition` / `resolveAnimatableValue` call
+ * this hook and add the returned value to their animation delay so they
+ * participate in a `<Stagger>` the same way the built-in primitives do.
+ */
+export function useStaggerDelay(): number {
+  return useContext(StaggerContext)
+}

package/src/stagger/index.ts

@@ -0,0 +1,2 @@
+export { Stagger, type StaggerProps } from './Stagger'
+export { useStaggerDelay } from './StaggerContext'

package/src/transitions/index.ts

@@ -1,4 +1,9 @@
-export { resolveTransition, type CallbackFactory } from './resolve'
+export {
+  applyDelay,
+  resolveTransition,
+  type AnimationCallback,
+  type CallbackFactory,
+} from './resolve'
 export { resolveAnimatableValue } from './resolveSequence'
 export { cubicBezier } from './cubicBezier'
 export { ensureWorkletEasing } from './easing'

package/src/transitions/resolve.ts

@@ -116,7 +116,13 @@ export function applyRepeat(
   return withRepeat(animation as never, count, alternate)
 }
 
-function applyDelay(animation: unknown, delay: number | undefined) {
+/**
+ * Wrap an animation in `withDelay`. A missing / zero / negative delay is a
+ * pass-through. Exported for the factory's stagger wrap, which must delay a
+ * fully-resolved animation exactly once — merging the delay into the base
+ * config instead would re-apply it per sequence step.
+ */
+export function applyDelay(animation: unknown, delay: number | undefined) {
   if (!delay || delay <= 0) return animation
   return withDelay(delay, animation as never)
 }

package/src/transitions/runtime.ts

@@ -5,6 +5,7 @@ import {
   withTiming,
 } from 'react-native-reanimated'
 import { springToReanimated } from './spring'
+import { type AnimationCallback } from './resolve'
 import { type TransitionConfig } from '../types'
 
 const DEFAULT_TIMING_DURATION = 250
@@ -26,13 +27,23 @@ const DEFAULT_TIMING_DURATION = 250
  *
  * For decay transitions, `toValue` is ignored — decay decelerates from the
  * SV's current position via its own physics. Pass `0` if you don't have one.
+ *
+ * `callback`, when provided, fires once when the animation settles — the same
+ * `(finished) => void` shape Reanimated's `with*` factories accept. It runs on
+ * the UI thread, so bridge to JS with `runOnJS(...)` inside it. For
+ * `no-animation` the callback fires synchronously with `finished: true`, since
+ * a direct assignment has no settle point of its own.
  */
 export function buildReleaseAnimation(
   transition: TransitionConfig,
   toValue: number,
+  callback?: AnimationCallback,
 ): unknown {
   'worklet'
-  if (transition.type === 'no-animation') return toValue
+  if (transition.type === 'no-animation') {
+    if (callback) callback(true, toValue)
+    return toValue
+  }
   if (transition.type === 'decay') {
     const cfg: {
       velocity: number
@@ -43,7 +54,7 @@ export function buildReleaseAnimation(
       cfg.deceleration = transition.deceleration
     }
     if (transition.clamp !== undefined) cfg.clamp = transition.clamp
-    return withDecay(cfg)
+    return withDecay(cfg, callback as never)
   }
   if (transition.type === 'timing') {
     // Reanimated 4's `Easing.bezier(...)` returns an `EasingFunctionFactory`
@@ -54,10 +65,14 @@ export function buildReleaseAnimation(
       e && typeof e === 'object' && 'factory' in e
         ? e.factory()
         : (e ?? Easing.inOut(Easing.ease))
-    return withTiming(toValue, {
-      duration: transition.duration ?? DEFAULT_TIMING_DURATION,
-      easing: easingFn,
-    })
+    return withTiming(
+      toValue,
+      {
+        duration: transition.duration ?? DEFAULT_TIMING_DURATION,
+        easing: easingFn,
+      },
+      callback as never,
+    )
   }
-  return withSpring(toValue, springToReanimated(transition))
+  return withSpring(toValue, springToReanimated(transition), callback as never)
 }

package/dist/chunk-NPJ46457.js

@@ -1,8 +0,0 @@
-'use strict';
-
-var chunk6V7MOBXO_js = require('./chunk-6V7MOBXO.js');
-var reactNative = require('react-native');
-
-var MotionView = chunk6V7MOBXO_js.createMotionComponent(reactNative.View);
-
-exports.MotionView = MotionView;

package/dist/chunk-YUTS6JRU.js

@@ -1,8 +0,0 @@
-'use strict';
-
-var chunk6V7MOBXO_js = require('./chunk-6V7MOBXO.js');
-var reactNative = require('react-native');
-
-var MotionImage = chunk6V7MOBXO_js.createMotionComponent(reactNative.Image);
-
-exports.MotionImage = MotionImage;

package/dist/chunk-ZSOCRHU3.js

@@ -1,8 +0,0 @@
-'use strict';
-
-var chunk6V7MOBXO_js = require('./chunk-6V7MOBXO.js');
-var reactNative = require('react-native');
-
-var MotionText = chunk6V7MOBXO_js.createMotionComponent(reactNative.Text);
-
-exports.MotionText = MotionText;