@rootnative/inertia 0.0.3 → 0.0.5

package/src/motion/installCheck.ts

@@ -41,7 +41,7 @@ export function ensureReanimatedInstalled(): void {
     const major = parseInt(version.split('.')[0] ?? '0', 10)
     if (major < 4) {
       console.error(
-        `[inertia] react-native-reanimated v${version} is installed, but @rootnative/inertia requires v4.0.0 or later. ` +
+        `[inertia] react-native-reanimated ${version} is installed, but @rootnative/inertia requires 4.0.0 or later. ` +
           `Upgrade with \`pnpm add react-native-reanimated@^4\` (or your package manager's equivalent).`,
       )
       return

package/src/transitions/index.ts

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

package/src/transitions/resolveSequence.ts

@@ -77,6 +77,18 @@ function mergeTransition(
   base: TransitionConfig | undefined,
   override: Partial<TransitionConfig>,
 ): TransitionConfig {
+  // A `no-animation` base is a ceiling, not a default, so no step override can
+  // talk its way past it. This is the reduced-motion gate: `configFor` in the
+  // factory swaps every per-key transition for `{ type: 'no-animation' }`, and
+  // the step-type rule below would otherwise hand a step its own `withTiming`
+  // back — silently animating for a user who asked the OS not to. Keep this
+  // branch first; it is the whole reason the gate holds for sequences.
+  //
+  // Returning `base` also drops any step `delay`, which matches how the rest
+  // of the resolver already treats this type: `delayOf` and `repeatOf` both
+  // return `undefined` for `no-animation`, so a snap is never deferred or
+  // repeated anywhere in the library.
+  if (base?.type === 'no-animation') return base
   // If the override declares a `type`, it wins outright — mixing fields from
   // a spring base into a timing override produces garbage. Otherwise inherit
   // the base's type and shallow-merge the rest.

package/src/types.ts

@@ -4,7 +4,7 @@ import {
   type ReactElement,
   type Ref,
 } from 'react'
-import { type StyleProp } from 'react-native'
+import { type BoxShadowValue, type StyleProp } from 'react-native'
 
 /**
  * A single animation step's destination, optionally overriding the transition
@@ -184,6 +184,55 @@ type AnimatableTransformExtras = {
   rotateY?: AnimatableValue<number>
 }
 
+/**
+ * Target shape for the `boxShadow` key on `animate` / `initial` / `exit`: a
+ * CSS `box-shadow` string, or RN's own array-of-layers form.
+ *
+ * Both endpoints of a `boxShadow` animation are normalized to a common layer
+ * count on the JS thread, so a two-layer shadow can animate to a one-layer one
+ * (the short side is padded with a transparent layer, as CSS transitions do).
+ * A layer that is `inset` on one side and not the other is not interpolable
+ * and throws.
+ */
+export type BoxShadowInput = string | ReadonlyArray<BoxShadowValue>
+
+/**
+ * Keys whose animatable form deliberately departs from the generic
+ * `AnimatableValue<S[K]>` mapping.
+ *
+ * `boxShadow` is the only member. Its natural value is already an array, which
+ * collides head-on with `AnimatableValue`'s keyframe-sequence form — nothing
+ * distinguishes `[layerA, layerB]` (one two-layer shadow) from a two-step
+ * sequence. The array slot is given to layers, which is the shape RN itself
+ * uses and by far the common case, and sequences are unsupported on this key.
+ * This mirrors the single-value-only contract `shadowOffset` has carried since
+ * `0.0.1`. Per-property transitions are unaffected: `transition={{ boxShadow:
+ * { type: 'timing' } }}` works as it does for every other key.
+ *
+ * Conditional on `S` so the key only appears where the underlying style
+ * actually has it, rather than being bolted onto every primitive.
+ */
+type AnimatableStructuredExtras<S> = 'boxShadow' extends keyof S
+  ? { boxShadow?: BoxShadowInput }
+  : // eslint-disable-next-line @typescript-eslint/no-empty-object-type
+    {}
+
+/**
+ * The `transform: [...]` array form, passed through as the underlying style
+ * types it. Inertia reads transform entries out of the array (see
+ * `styleValueFor` in `createMotionComponent`) rather than treating the array as
+ * an animatable scalar, so it is exempted from the `AnimatableValue` mapping —
+ * wrapping it there would offer a nonsensical `transform: [[...], [...]]`
+ * keyframe form.
+ *
+ * Conditional on `S` for the same reason as `boxShadow`: only appears where the
+ * underlying style actually has it.
+ */
+type AnimatableTransformArray<S> = 'transform' extends keyof S
+  ? { transform?: S['transform'] }
+  : // eslint-disable-next-line @typescript-eslint/no-empty-object-type
+    {}
+
 /**
  * The animation state shape inferred from the underlying component's style
  * prop. We narrow to the value side of `style` so consumers see ViewStyle on
@@ -198,9 +247,98 @@ type AnimatableTransformExtras = {
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
 type _StyleValue<T> = Exclude<T, (...args: any[]) => any>
 
+/**
+ * The style keys Inertia's runtime actually drives — the type-level mirror of
+ * `ALL_KEYS` in `createMotionComponent`, minus the `shadowOffset*` synthetics
+ * (consumers write the nested `shadowOffset` object, not the axes) and minus
+ * `boxShadow` (handled by `AnimatableStructuredExtras`, whose value shape
+ * deliberately departs from `AnimatableValue`).
+ *
+ * **This list and `ALL_KEYS` must stay in sync.** They are separate because one
+ * is a type and the other is a runtime array, and TypeScript can't derive the
+ * former from a value living in a module that imports this one. The direction
+ * that matters: a key here but not in `ALL_KEYS` typechecks and then silently
+ * does nothing at runtime — which is precisely the defect this type was
+ * introduced to kill. `animate-keys.test-d.tsx` pins the two together.
+ *
+ * Before 0.0.5 this type mapped over the component's *entire* style surface, so
+ * `animate={{ paddingTop: 40 }}` compiled cleanly and was then dropped on the
+ * floor — no error, no warning. That contradicted the library's own headline
+ * differentiator (wrong props should error, not go unnoticed), so the mapping is
+ * now an intersection: a key must be both animatable by Inertia *and* present on
+ * the underlying component's style prop.
+ */
+type AnimatableStyleKey =
+  // Transform axes surfaced as top-level keys.
+  | 'translateX'
+  | 'translateY'
+  | 'scaleX'
+  | 'scaleY'
+  // Numeric top-level keys.
+  | 'opacity'
+  | 'width'
+  | 'height'
+  | 'borderRadius'
+  | 'shadowOpacity'
+  | 'shadowRadius'
+  | 'elevation'
+  | 'borderTopLeftRadius'
+  | 'borderTopRightRadius'
+  | 'borderBottomLeftRadius'
+  | 'borderBottomRightRadius'
+  | 'borderWidth'
+  | 'borderTopWidth'
+  | 'borderRightWidth'
+  | 'borderBottomWidth'
+  | 'borderLeftWidth'
+  | 'top'
+  | 'right'
+  | 'bottom'
+  | 'left'
+  | 'padding'
+  | 'paddingTop'
+  | 'paddingRight'
+  | 'paddingBottom'
+  | 'paddingLeft'
+  | 'paddingHorizontal'
+  | 'paddingVertical'
+  | 'margin'
+  | 'marginTop'
+  | 'marginRight'
+  | 'marginBottom'
+  | 'marginLeft'
+  | 'marginHorizontal'
+  | 'marginVertical'
+  | 'flex'
+  | 'flexGrow'
+  | 'flexShrink'
+  | 'fontSize'
+  | 'letterSpacing'
+  | 'lineHeight'
+  | 'zIndex'
+  | 'gap'
+  | 'rowGap'
+  | 'columnGap'
+  // Color keys.
+  | 'backgroundColor'
+  | 'borderColor'
+  | 'color'
+  | 'tintColor'
+  | 'shadowColor'
+  // The one nested-object style prop, written as `{ width, height }`.
+  | 'shadowOffset'
+
 export type AnimateStyle<C> = C extends { style?: infer Raw }
   ? _StyleValue<Raw> extends StyleProp<infer S>
-    ? { [K in keyof S]?: AnimatableValue<S[K]> } & AnimatableTransformExtras
+    ? {
+        [K in keyof S as K extends AnimatableStyleKey ? K : never]?: K extends
+          | 'boxShadow'
+          | 'transform'
+          ? never
+          : AnimatableValue<S[K]>
+      } & AnimatableTransformExtras &
+        AnimatableStructuredExtras<S> &
+        AnimatableTransformArray<S>
     : never
   : never
 
@@ -379,19 +517,24 @@ export interface MotionProps<C, V extends VariantsMap<C> = VariantsMap<C>> {
    * recorded rect to its natural position via a FLIP transform stack.
    *
    * Reanimated 4 removed the `sharedTransitionTag` API — `layoutId` is the
-   * Inertia-side measure-based replacement. Rects are recorded in
-   * parent-relative coordinates (from `onLayout`), which composes when the
-   * source and target screens share an outer content container (the common
-   * stack-navigator case); nested-parent layouts need the v2
-   * window-coordinate path.
+   * Inertia-side measure-based replacement. Rects are recorded in **window**
+   * coordinates wherever the host can be measured synchronously (Fabric),
+   * which is what lets a source and target sit under containers at different
+   * screen offsets; elsewhere both fall back to the parent-relative
+   * coordinates `onLayout` reports. A source and target that ended up in
+   * different spaces skip the animation rather than play a wrong one.
    *
    * The same `transition` prop drives the FLIP animation (spring by
    * default; `'timing'` honored; `'decay'` downgrades to spring; reduced
-   * motion skips the transition). Out of scope for the first iteration:
-   * style-prop interpolation (border radius, colors, etc.) — only the
-   * rect-to-rect transform is animated. Two simultaneously-mounted
-   * primitives sharing the same `layoutId` are undefined behavior; pick a
-   * primitive per id at a time.
+   * motion skips the transition). Alongside the rect, a fixed set of style
+   * keys is carried from the source and crossfaded out on that same
+   * transition: `opacity`, `borderRadius`, `backgroundColor`, `borderColor`,
+   * `color`, `tintColor`. Transform keys are not carried — the FLIP owns
+   * them — and a key only participates when the element already has a value
+   * for it, from a record or from its static `style`.
+   *
+   * Two simultaneously-mounted primitives sharing the same `layoutId` are
+   * undefined behavior; pick a primitive per id at a time.
    */
   layoutId?: string
   /**

package/src/values/useColorTransition.ts

@@ -6,7 +6,7 @@ import {
 
 /**
  * Color style keys understood by React Native that this hook can target.
- * Sticks to the keys that exist on the v0.1 animatable surface so the
+ * Sticks to the keys that exist on the animatable surface so the
  * returned style fragment is always a legal RN style.
  */
 export type ColorStyleKey =

package/dist/chunk-FNVFV4EY.js

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

package/dist/chunk-FWQOXA43.js

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

package/dist/chunk-KBP4LR75.js

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