@rootnative/inertia 0.0.4 → 0.0.6

package/src/motion/createMotionComponent.tsx

@@ -23,11 +23,18 @@ import {
 } from '../config'
 import { isFocusVisible } from '../gestures'
 import {
+  layersToPayload,
   normalizeBoxShadow,
+  payloadToLayers,
   prepareBoxShadowAnimation,
-  type AnimatedBoxShadowLayer,
+  type BoxShadowPayload,
   type SplitBoxShadow,
 } from '../internal/boxShadow'
+import {
+  normalizeAnimatableColor,
+  normalizeAnimatableColorTarget,
+  TRANSPARENT,
+} from '../internal/color'
 import { warnOnce } from '../internal/warnOnce'
 import {
   resolveLayoutTransition,
@@ -91,6 +98,78 @@ const NUMERIC_TOP_LEVEL_KEYS = [
   'shadowOpacity',
   'shadowRadius',
   'elevation',
+  // ─── Added in 0.0.5 ──────────────────────────────────────────────────────
+  //
+  // Every key below rides the generic numeric path: one shared value, resolved
+  // on the JS thread, emitted by the worklet through the same `out[key] = v`
+  // branch as `opacity`. None needs a new interpolation mode, so the cost is
+  // the shared value plus a `DEFAULT_RESTING` entry.
+  //
+  // The load-bearing constraint is the resting default, not the plumbing. A
+  // key declared only in `gesture` / `exit` / a non-active variant rests at
+  // `DEFAULT_RESTING` unless the static `style` names it, and the animated
+  // style merges *after* `style` — so a non-identity default silently stomps
+  // the layout. That is the `0.0.3` P0 class, and it is why the sizing and
+  // spacing keys below default to `0` only in the sense RN itself does (an
+  // unset `padding` *is* 0); `minWidth`/`maxWidth`/`aspectRatio` are
+  // deliberately excluded — their "unset" is not a number, so no default can
+  // stand in for it without changing layout on activation.
+  //
+  // Per-corner radii. Animating one corner is common (a card expanding into a
+  // sheet keeps its top corners and squares off the bottom); `borderRadius`
+  // alone can't express it.
+  'borderTopLeftRadius',
+  'borderTopRightRadius',
+  'borderBottomLeftRadius',
+  'borderBottomRightRadius',
+  // Border widths. `borderWidth` is the common case; the per-edge keys matter
+  // for underline-style focus affordances (`borderBottomWidth` on a field).
+  'borderWidth',
+  'borderTopWidth',
+  'borderRightWidth',
+  'borderBottomWidth',
+  'borderLeftWidth',
+  // Absolute-position insets. Bread-and-butter for drawers, tooltips, and
+  // anything pinned to an edge that slides in.
+  'top',
+  'right',
+  'bottom',
+  'left',
+  // Spacing. Padding animates the box from the inside (a button growing its
+  // hit area on press); margin shifts it within its parent's flow.
+  'padding',
+  'paddingTop',
+  'paddingRight',
+  'paddingBottom',
+  'paddingLeft',
+  'paddingHorizontal',
+  'paddingVertical',
+  'margin',
+  'marginTop',
+  'marginRight',
+  'marginBottom',
+  'marginLeft',
+  'marginHorizontal',
+  'marginVertical',
+  // Flex sizing. `flex` / `flexGrow` interpolate the split between siblings —
+  // the idiomatic RN way to animate a pane resize without measuring.
+  'flex',
+  'flexGrow',
+  'flexShrink',
+  // Text metrics. `TextStyle`-only at the type level (`AnimateStyle<C>` gates
+  // them per primitive), but the runtime table is shared across primitives —
+  // an unused slot is one ref, same as `tintColor` has always been.
+  'fontSize',
+  'letterSpacing',
+  'lineHeight',
+  // Stacking. Integer-valued in practice, and interpolating it mid-flight is
+  // rarely what you want, but a `no-animation` transition on `zIndex` is the
+  // clean way to reorder at a step boundary in a sequence.
+  'zIndex',
+  // Gap. Row/column gaps animate a list's density without touching children.
+  'gap',
+  'rowGap',
+  'columnGap',
 ] as const
 
 // Color-valued keys. Reanimated's value setter detects color strings and
@@ -119,16 +198,20 @@ const COLOR_KEYS = [
 const SHADOW_OFFSET_KEYS = ['shadowOffsetWidth', 'shadowOffsetHeight'] as const
 
 // Keys whose shared value holds a structure rather than a scalar. `boxShadow`
-// is the only one: its slot carries an array of layer objects, which
+// is the only one: its slot carries the layers keyed by index, which
 // Reanimated's animation drivers recurse into, animating each leaf number and
-// color independently (`arrayOnStart` → `objectOnStart` in Reanimated's
-// `animation/util.ts`).
+// color independently (`objectOnStart` in Reanimated's `animation/util.ts`).
+//
+// Index-keyed and not an array, which is load-bearing — Reanimated recurses
+// into objects but not into arrays. See `BoxShadowPayload` for the mechanism
+// and for what it looked like when this was an array (`0.0.4`/`0.0.5`: dead
+// under the default spring, silently correct-looking under timing).
 //
-// Passing the CSS string through instead would NOT work — a box-shadow string
-// isn't a color, so it lands in Reanimated's prefix-number-suffix branch,
-// which is built for values like '100%' and would pull a single number out of
-// a four-value shadow. All string parsing therefore happens on the JS thread,
-// once per change, in `internal/boxShadow.ts`.
+// Passing the CSS string through instead would NOT work either — a box-shadow
+// string isn't a color, so it lands in Reanimated's prefix-number-suffix
+// branch, which is built for values like '100%' and would pull a single number
+// out of a four-value shadow. All string parsing therefore happens on the JS
+// thread, once per change, in `internal/boxShadow.ts`.
 const STRUCTURED_KEYS = ['boxShadow'] as const
 
 // Keys a shared-element transition (`layoutId`) carries from the source
@@ -181,15 +264,16 @@ const SHARED_STYLE_KEY_SET = new Set<AnimatableKey>(SHARED_STYLE_KEYS)
 
 /**
  * What a per-key shared value can hold. Scalars for every key except
- * `boxShadow`, whose slot carries the layer array (see `STRUCTURED_KEYS`).
+ * `boxShadow`, whose slot carries the index-keyed layer payload (see
+ * `STRUCTURED_KEYS`).
  */
-type AnimatableSlotValue = number | string | readonly AnimatedBoxShadowLayer[]
+type AnimatableSlotValue = number | string | BoxShadowPayload
 
 /**
  * Resting `boxShadow` — no shadow at all. Frozen and hoisted so every
  * primitive shares one reference and an untouched slot never allocates.
  */
-const NO_BOX_SHADOW: readonly AnimatedBoxShadowLayer[] = Object.freeze([])
+const NO_BOX_SHADOW: BoxShadowPayload = Object.freeze({})
 
 const GESTURE_LAYER_NAMES = [
   'hovered',
@@ -221,15 +305,69 @@ const DEFAULT_RESTING: Record<AnimatableKey, AnimatableSlotValue> = {
   shadowOpacity: 0,
   shadowRadius: 0,
   elevation: 0,
-  // 'transparent' is the only safe universal default for colors: it works as
-  // an initial seed for any color animation (no jarring opaque flash on mount
-  // when `initial` is omitted) and rgba(0,0,0,0) interpolates cleanly into
-  // any opaque target via Reanimated's color util.
-  backgroundColor: 'transparent',
-  borderColor: 'transparent',
-  color: 'transparent',
-  tintColor: 'transparent',
-  shadowColor: 'transparent',
+  // 0.0.5 keys. Every one of these is 0 because that is RN's own unset value
+  // for it — an element with no `paddingTop` has 0 padding, no `borderWidth`
+  // has none, no `top` is unpinned at 0 within its positioning context. So a
+  // key that reaches its resting default lands where the element already was.
+  //
+  // The exception worth naming: `flex` / `flexGrow` / `flexShrink` do NOT have
+  // 0 as a universal identity (`flexShrink` defaults to 1 on the web, and RN's
+  // own default differs by axis). They are still 0 here, because the style-scan
+  // in the resting pass reads the real value off the static `style` whenever it
+  // is declared — and a consumer animating flex without declaring it is asking
+  // for the from-0 growth, which is the readable interpretation.
+  borderTopLeftRadius: 0,
+  borderTopRightRadius: 0,
+  borderBottomLeftRadius: 0,
+  borderBottomRightRadius: 0,
+  borderWidth: 0,
+  borderTopWidth: 0,
+  borderRightWidth: 0,
+  borderBottomWidth: 0,
+  borderLeftWidth: 0,
+  top: 0,
+  right: 0,
+  bottom: 0,
+  left: 0,
+  padding: 0,
+  paddingTop: 0,
+  paddingRight: 0,
+  paddingBottom: 0,
+  paddingLeft: 0,
+  paddingHorizontal: 0,
+  paddingVertical: 0,
+  margin: 0,
+  marginTop: 0,
+  marginRight: 0,
+  marginBottom: 0,
+  marginLeft: 0,
+  marginHorizontal: 0,
+  marginVertical: 0,
+  flex: 0,
+  flexGrow: 0,
+  flexShrink: 0,
+  fontSize: 0,
+  letterSpacing: 0,
+  lineHeight: 0,
+  zIndex: 0,
+  gap: 0,
+  rowGap: 0,
+  columnGap: 0,
+  // Fully transparent black is the only safe universal default for colors: it
+  // works as an initial seed for any color animation (no jarring opaque flash
+  // on mount when `initial` is omitted) and interpolates cleanly into any
+  // opaque target.
+  //
+  // Spelled `rgba(0, 0, 0, 0)` and NOT `'transparent'`, which is not optional.
+  // Reanimated's color-name table maps `transparent` to `undefined`, so it is
+  // the one named color `isColor()` rejects — a slot resting at the keyword
+  // takes the prefix-number-suffix branch on its next animation and produces
+  // `NaN` instead of a color. See `TRANSPARENT` in `internal/boxShadow.ts`.
+  backgroundColor: TRANSPARENT,
+  borderColor: TRANSPARENT,
+  color: TRANSPARENT,
+  tintColor: TRANSPARENT,
+  shadowColor: TRANSPARENT,
   shadowOffsetWidth: 0,
   shadowOffsetHeight: 0,
   boxShadow: NO_BOX_SHADOW,
@@ -610,12 +748,20 @@ export function createMotionComponent<C extends ComponentType<any>>(
               const raw = flat.boxShadow as BoxShadowInput | undefined
               if (raw !== undefined) {
                 styleRestingShadow = normalizeBoxShadow(raw)
-                styleResting.boxShadow = styleRestingShadow.layers
+                styleResting.boxShadow = layersToPayload(
+                  styleRestingShadow.layers,
+                )
               }
               continue
             }
             const v = styleValueFor(flat, key)
-            if (v !== undefined) styleResting[key] = v
+            // A static `style` may legitimately say `'transparent'`; the slot
+            // it seeds must not, or the next animation off that value dies.
+            if (v !== undefined) {
+              styleResting[key] = COLOR_KEY_SET.has(key)
+                ? normalizeAnimatableColor(v)
+                : v
+            }
           }
         }
       }
@@ -634,14 +780,13 @@ export function createMotionComponent<C extends ComponentType<any>>(
         boxShadowSeedRef.current =
           source !== undefined
             ? normalizeBoxShadow(source)
-            : (styleRestingShadow ?? {
-                layers: [...NO_BOX_SHADOW],
-                insets: null,
-              })
+            : (styleRestingShadow ?? { layers: [], insets: null })
       }
 
       const sharedValues = useAnimatableSharedValues((key) => {
-        if (key === 'boxShadow') return boxShadowSeedRef.current!.layers
+        if (key === 'boxShadow') {
+          return layersToPayload(boxShadowSeedRef.current!.layers)
+        }
         // Shadow offset synthetics seed from the corresponding axis on the
         // `shadowOffset: { width, height }` source — the consumer doesn't write
         // `shadowOffsetWidth` / `shadowOffsetHeight` directly. Fall back to the
@@ -668,16 +813,21 @@ export function createMotionComponent<C extends ComponentType<any>>(
             DEFAULT_RESTING[key]
           )
         }
+        // Colors are normalized on the way in: `initial` and `animate` are
+        // consumer strings and may say `'transparent'`, which Reanimated
+        // cannot animate *away from* (see `internal/color.ts`). The two
+        // fallbacks below are already normalized.
         if (initial === false) {
           const a = animateRecord[key]
-          return restValue(a) ?? styleResting[key] ?? DEFAULT_RESTING[key]
+          const seed = restValue(a) ?? styleResting[key] ?? DEFAULT_RESTING[key]
+          return COLOR_KEY_SET.has(key) ? normalizeAnimatableColor(seed) : seed
         }
-        return (
+        const seed =
           initialRecord?.[key] ??
           restValue(animateRecord[key]) ??
           styleResting[key] ??
           DEFAULT_RESTING[key]
-        )
+        return COLOR_KEY_SET.has(key) ? normalizeAnimatableColor(seed) : seed
       })
 
       // Keep never-driven keys tracking the *live* static style. The seed above
@@ -894,8 +1044,17 @@ export function createMotionComponent<C extends ComponentType<any>>(
             isExiting ? onSettle : undefined,
             TRANSFORM_KEY_SET.has(key) ? transformGroup : undefined,
           )
+          // Normalized for the driver only, and after `targetEndValue` above:
+          // `onAnimationEnd` reports the target the consumer declared, not our
+          // rewriting of it. A color target of `'transparent'` animates fine
+          // — Reanimated dispatches on the *source* — but under
+          // `'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(
-            target,
+            COLOR_KEY_SET.has(key)
+              ? normalizeAnimatableColorTarget(target)
+              : target,
             cfg,
             factory,
           ) as never
@@ -1123,17 +1282,19 @@ export function createMotionComponent<C extends ComponentType<any>>(
           out.shadowOffset = { width: shadowOffsetW, height: shadowOffsetH }
         }
         if (hasBoxShadow) {
-          const layers = sharedValues.boxShadow
-            .value as readonly AnimatedBoxShadowLayer[]
+          // The slot holds the layers keyed by index (Reanimated recurses into
+          // objects, not arrays — see `BoxShadowPayload`); RN wants an array,
+          // so this is where the two shapes meet.
+          const payload = sharedValues.boxShadow.value as BoxShadowPayload
           const insets = boxShadowInsets.value
-          // Fast path — no inset layer anywhere, so the animated array is
-          // already exactly what RN wants and crosses over untouched.
+          // Fast path — no inset layer anywhere, so each layer crosses over by
+          // reference and only the array itself is allocated.
           if (insets === null) {
-            out.boxShadow = layers
+            out.boxShadow = payloadToLayers(payload)
           } else {
             const withInset = []
-            for (let i = 0; i < layers.length; i++) {
-              withInset.push({ ...layers[i], inset: insets[i] })
+            for (let i = 0; payload[i] !== undefined; i++) {
+              withInset.push({ ...payload[i], inset: insets[i] })
             }
             out.boxShadow = withInset
           }
@@ -1245,74 +1406,38 @@ type SharedValueMap = Record<AnimatableKey, SharedValue<AnimatableSlotValue>>
  * are stable across renders (Reanimated's `useSharedValue` is a `useRef`
  * under the hood), so snapshotting the wrapping object once is safe.
  *
- * Hooks are called in a stable, lexical order — fine for rules-of-hooks.
- * Unused shared values are cheap; the worklet skips them via
- * `activeKeysRef`. Color keys are seeded with the initial color string so
- * Reanimated's value setter recognizes the slot as a color from the first
- * `withSpring` / `withTiming` call.
+ * Hooks are called by iterating `ALL_KEYS`, which is a module-level `as const`
+ * array — its length and order are fixed at module evaluation, so the hook
+ * sequence is identical on every render of every instance. That satisfies
+ * rules-of-hooks exactly as a hand-written list does, and it is what keeps this
+ * function from growing a line per key: the 0.0.5 additions took the table from
+ * 23 keys to 63, and 63 near-identical `useSharedValue` lines is both a bigger
+ * bundle and a standing invitation to add a key in one list but not the other
+ * (the failure mode is a `sharedValues[key]` of `undefined` inside the worklet,
+ * which is exactly how the first draft of that change broke).
+ *
+ * The ESLint exhaustive-deps rule can't see through the loop, hence the
+ * disable — the invariant it would check for us is asserted above instead.
+ *
+ * Unused shared values are cheap; the worklet skips them via `activeKeysRef`.
+ * Color keys are seeded with the initial color string so Reanimated's value
+ * setter recognizes the slot as a color from the first `withSpring` /
+ * `withTiming` call.
  */
 function useAnimatableSharedValues(
   init: (key: AnimatableKey) => AnimatableSlotValue,
 ): SharedValueMap {
-  const translateX = useSharedValue<AnimatableSlotValue>(init('translateX'))
-  const translateY = useSharedValue<AnimatableSlotValue>(init('translateY'))
-  const scale = useSharedValue<AnimatableSlotValue>(init('scale'))
-  const scaleX = useSharedValue<AnimatableSlotValue>(init('scaleX'))
-  const scaleY = useSharedValue<AnimatableSlotValue>(init('scaleY'))
-  const rotate = useSharedValue<AnimatableSlotValue>(init('rotate'))
-  const rotateX = useSharedValue<AnimatableSlotValue>(init('rotateX'))
-  const rotateY = useSharedValue<AnimatableSlotValue>(init('rotateY'))
-  const opacity = useSharedValue<AnimatableSlotValue>(init('opacity'))
-  const width = useSharedValue<AnimatableSlotValue>(init('width'))
-  const height = useSharedValue<AnimatableSlotValue>(init('height'))
-  const borderRadius = useSharedValue<AnimatableSlotValue>(init('borderRadius'))
-  const shadowOpacity = useSharedValue<AnimatableSlotValue>(
-    init('shadowOpacity'),
-  )
-  const shadowRadius = useSharedValue<AnimatableSlotValue>(init('shadowRadius'))
-  const elevation = useSharedValue<AnimatableSlotValue>(init('elevation'))
-  const backgroundColor = useSharedValue<AnimatableSlotValue>(
-    init('backgroundColor'),
-  )
-  const borderColor = useSharedValue<AnimatableSlotValue>(init('borderColor'))
-  const color = useSharedValue<AnimatableSlotValue>(init('color'))
-  const tintColor = useSharedValue<AnimatableSlotValue>(init('tintColor'))
-  const shadowColor = useSharedValue<AnimatableSlotValue>(init('shadowColor'))
-  const shadowOffsetWidth = useSharedValue<AnimatableSlotValue>(
-    init('shadowOffsetWidth'),
-  )
-  const shadowOffsetHeight = useSharedValue<AnimatableSlotValue>(
-    init('shadowOffsetHeight'),
-  )
-  const boxShadow = useSharedValue<AnimatableSlotValue>(init('boxShadow'))
+  const entries: [AnimatableKey, SharedValue<AnimatableSlotValue>][] = []
+  for (const key of ALL_KEYS) {
+    // eslint-disable-next-line react-hooks/rules-of-hooks
+    entries.push([key, useSharedValue<AnimatableSlotValue>(init(key))])
+  }
 
   const ref = useRef<SharedValueMap | null>(null)
   if (ref.current === null) {
-    ref.current = {
-      translateX,
-      translateY,
-      scale,
-      scaleX,
-      scaleY,
-      rotate,
-      rotateX,
-      rotateY,
-      opacity,
-      width,
-      height,
-      borderRadius,
-      shadowOpacity,
-      shadowRadius,
-      elevation,
-      backgroundColor,
-      borderColor,
-      color,
-      tintColor,
-      shadowColor,
-      shadowOffsetWidth,
-      shadowOffsetHeight,
-      boxShadow,
-    }
+    const map = {} as SharedValueMap
+    for (const [key, sv] of entries) map[key] = sv
+    ref.current = map
   }
 
   // Cancel every in-flight per-key animation when the primitive unmounts, so
@@ -1402,6 +1527,13 @@ function makeKeyCallbackFactory(
     const reportedIteration = state.iteration
     if (phase === 'sequence' || phase === 'repeat') state.iteration++
 
+    // `boxShadow`'s slot is keyed by index so Reanimated will recurse into it;
+    // that is an internal shape, and the consumer gets the layer list.
+    const reportedValue =
+      key === 'boxShadow' && value !== undefined
+        ? payloadToLayers(value as BoxShadowPayload)
+        : value
+
     const fn = onAnimationEndRef.current
     if (fn) {
       // Transform-group coalescing: a multi-axis translate / scale /
@@ -1417,7 +1549,7 @@ function makeKeyCallbackFactory(
           fn({
             key: 'transform' as never,
             finished,
-            value,
+            value: reportedValue,
             target,
             phase,
             step,
@@ -1428,7 +1560,7 @@ function makeKeyCallbackFactory(
         fn({
           key: key as never,
           finished,
-          value,
+          value: reportedValue,
           target,
           phase,
           step,
@@ -1525,20 +1657,18 @@ function driveBoxShadow(
   cfg: TransitionConfig | undefined,
   factory: CallbackFactory | undefined,
 ): void {
-  const currentLayers = Array.isArray(slot.value)
-    ? (slot.value as readonly AnimatedBoxShadowLayer[])
-    : NO_BOX_SHADOW
+  const currentLayers = payloadToLayers(slot.value as BoxShadowPayload)
   const { from, to, insets } = prepareBoxShadowAnimation(
-    { layers: [...currentLayers], insets: insetSlot.value },
+    { layers: currentLayers, insets: insetSlot.value },
     target,
   )
   insetSlot.value = insets
-  if (from.length !== currentLayers.length) slot.value = from
+  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,
-    to as unknown as number,
+    layersToPayload(to) as unknown as number,
     factory?.('animation', undefined),
   ) as AnimatableSlotValue
 }

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

@@ -217,6 +217,22 @@ type AnimatableStructuredExtras<S> = 'boxShadow' extends keyof S
   : // 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
@@ -231,11 +247,98 @@ type AnimatableStructuredExtras<S> = 'boxShadow' extends keyof S
 // 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>
-    ? Omit<{ [K in keyof S]?: AnimatableValue<S[K]> }, 'boxShadow'> &
-        AnimatableTransformExtras &
-        AnimatableStructuredExtras<S>
+    ? {
+        [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
 

package/dist/chunk-5SRD2WCO.js

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

package/dist/chunk-TVFNJ25Z.js

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

package/dist/chunk-VLDIFL3F.js

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