@rootnative/inertia 0.0.3 → 0.0.4

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,39 @@ 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 animation state shape inferred from the underlying component's style
  * prop. We narrow to the value side of `style` so consumers see ViewStyle on
@@ -200,7 +233,9 @@ type _StyleValue<T> = Exclude<T, (...args: any[]) => any>
 
 export type AnimateStyle<C> = C extends { style?: infer Raw }
   ? _StyleValue<Raw> extends StyleProp<infer S>
-    ? { [K in keyof S]?: AnimatableValue<S[K]> } & AnimatableTransformExtras
+    ? Omit<{ [K in keyof S]?: AnimatableValue<S[K]> }, 'boxShadow'> &
+        AnimatableTransformExtras &
+        AnimatableStructuredExtras<S>
     : never
   : never
 
@@ -379,19 +414,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;