@rootnative/inertia-gradients 0.0.9 → 0.0.11

package/CHANGELOG.md

@@ -6,6 +6,28 @@ This package ships in lockstep with `@rootnative/inertia` — version numbers tr
 
 ## [Unreleased]
 
+## [0.0.11] - 2026-09-09
+
+### Changed
+
+- **Breaking: the peer ranges are narrowed to the Expo SDK 57 band.** `react` is now `>=19.2.3 <20.0.0`, `react-native` is `>=0.83.0 <0.87.0`, and `react-native-reanimated` is `>=4.5.0 <4.6.0`. This adapter tracks the band that `@rootnative/inertia` declares, so the two cannot disagree and no consumer can install a pair that resolves to different runtimes. The reason the band is this narrow is in the core changelog: each peer range resolves on its own, so a range wide enough for both SDK 54 and SDK 57 also admits `react-native 0.81` with Reanimated `4.6`, which cannot install.
+
+  Migration: move the app to Expo SDK 57 (React `19.2.3`, React Native `0.86.3`, Reanimated `4.5.1`, Worklets `0.10.1`). A project on SDK 54 stays on `0.0.10`. `expo-linear-gradient` keeps its own floor, because its version relationship is with the Expo SDK and not with this adapter.
+
+## [0.0.10] - 2026-09-06
+
+### Changed
+
+- **The `@rootnative/inertia` peer range has an upper bound: `>=0.0.9 <0.1.0`.** Pre-`1.0.0`, a minor bump of core is where a breaking change lands, so this adapter must not accept it. Enforced by `check:versions`. Found by the `1.0.0` readiness audit (2026-09-05), Phase 3.
+
+### Fixed
+
+- **The `animatedProps` worklet no longer reads a ref on the UI thread.** `hasLocationsRef.current` was read inside the worklet; the worklet runtime clones a captured ref object once, so the read was a frozen snapshot that happened to be correct only because `locations` presence is locked at mount. The worklet now captures a plain boolean. No behaviour change; a test pins the presence-change throw. Found by the `1.0.0` readiness audit (2026-09-05), Phase 3.
+
+- **A spring config without a `type` key is now honoured as the top-level transition.** `SpringTransition.type` is optional, so `transition={{ tension: 300, friction: 20 }}` is valid. The adapter's `'type' in transition` check read it as a per-property map, looked up the prop name, found nothing, and ran the library default spring with no warning. The check is now `isTopLevelTransition`, exported from `@rootnative/inertia`, which is the same structural discriminator the core factory uses. Found by the `1.0.0` readiness audit (2026-09-05).
+
+- **An inline `transition` literal no longer restarts the animation on every parent re-render.** The value-driving effects keyed on the `transition` object's identity. The documented call shape passes `transition={{ type: 'timing', duration: 600 }}` inline, so each parent render made a new object, re-fired every effect, and re-assigned the animation from its current value with the full duration; a frequently re-rendering parent never let the animation finish. The effects now key on `stableSig(transition)`, exported from `@rootnative/inertia`, so only a change to the config's content re-resolves. Found by the `1.0.0` readiness audit (2026-09-05).
+
 ## [0.0.9] - 2026-08-22
 
 **Lockstep version bump** alongside `@rootnative/inertia@0.0.9` (`useInterpolatedStyle` types its return against the map it was given, so a `style` array no longer needs a cast). No runtime changes in this adapter; the `@rootnative/inertia` peer range moves to `>=0.0.9`.
@@ -60,7 +82,9 @@ _No git tag was cut for this release; the published artifact is on npm as [`@roo
 
 - `MotionLinearGradient` over `expo-linear-gradient`. Accepts the same `initial` / `animate` / `transition` shape as the core `Motion.*` primitives, with animatable keys for `colors`, `start`, `end`, and `locations`.
 
-[unreleased]: https://github.com/rootnative/inertia/compare/core+gestures+gradients+svg@0.0.9...HEAD
+[unreleased]: https://github.com/rootnative/inertia/compare/core+gestures+gradients+svg@0.0.11...HEAD
+[0.0.11]: https://github.com/rootnative/inertia/releases/tag/core+gestures+gradients+svg@0.0.11
+[0.0.10]: https://github.com/rootnative/inertia/releases/tag/core+gestures+gradients+svg@0.0.10
 [0.0.9]: https://github.com/rootnative/inertia/releases/tag/core+gestures+gradients+svg@0.0.9
 [0.0.8]: https://github.com/rootnative/inertia/releases/tag/core+gestures+gradients+svg@0.0.8
 [0.0.7]: https://github.com/rootnative/inertia/releases/tag/core+gestures+gradients+svg@0.0.7

package/README.md

@@ -16,9 +16,9 @@ Animatable linear gradient primitive for [`@rootnative/inertia`](../core), built
 pnpm add @rootnative/inertia-gradients expo-linear-gradient
 ```
 
-`expo-linear-gradient` works in bare React Native projects as well as Expo — no `expo-modules-core` runtime is required.
+`expo-linear-gradient` works in bare React Native projects as well as Expo, but it is an Expo Module. Bare projects need the Expo modules runtime installed. See [Installing Expo modules](https://docs.expo.dev/bare/installing-expo-modules/).
 
-**Peer dependencies:** `@rootnative/inertia` (workspace or installed), `react >=19.0.0`, `react-native >=0.81.0`, `react-native-reanimated >=4.0.0`, `expo-linear-gradient >=14.0.0`.
+**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`, `expo-linear-gradient >=14.0.0`.
 
 ## Usage
 

package/dist/index.js

@@ -17,7 +17,7 @@ var DEFAULT_START = { x: 0, y: 0 };
 var DEFAULT_END = { x: 1, y: 0 };
 function pickTransition(per, key) {
   if (!per) return void 0;
-  if ("type" in per) return per;
+  if (inertia.isTopLevelTransition(per)) return per;
   return per[key];
 }
 function MotionLinearGradient(props) {
@@ -33,6 +33,7 @@ function MotionLinearGradient(props) {
   } = props;
   const slotCountRef = react.useRef(colors.length);
   const hasLocationsRef = react.useRef(locations !== void 0);
+  const hasLocations = hasLocationsRef.current;
   if (__DEV__) {
     if (slotCountRef.current !== colors.length) {
       throw new Error(
@@ -73,6 +74,7 @@ function MotionLinearGradient(props) {
   const startKey = animate?.start ? `${animate.start.x},${animate.start.y}` : "";
   const endKey = animate?.end ? `${animate.end.x},${animate.end.y}` : "";
   const locationsKey = animate?.locations ? animate.locations.join("|") : "";
+  const transitionSig = inertia.stableSig(transition);
   const animateColors = animate?.colors;
   const animateStart = animate?.start;
   const animateEnd = animate?.end;
@@ -84,19 +86,19 @@ function MotionLinearGradient(props) {
       const target = animateColors[i] ?? colors[i] ?? "";
       colorSvs[i].value = inertia.resolveTransition(cfg, target);
     }
-  }, [colorsKey, reduce, transition]);
+  }, [colorsKey, reduce, transitionSig]);
   react.useEffect(() => {
     if (!animateStart) return;
     const cfg = reduce ? NO_ANIMATION : pickTransition(transition, "start");
     startX.value = inertia.resolveTransition(cfg, animateStart.x);
     startY.value = inertia.resolveTransition(cfg, animateStart.y);
-  }, [startKey, reduce, transition]);
+  }, [startKey, reduce, transitionSig]);
   react.useEffect(() => {
     if (!animateEnd) return;
     const cfg = reduce ? NO_ANIMATION : pickTransition(transition, "end");
     endX.value = inertia.resolveTransition(cfg, animateEnd.x);
     endY.value = inertia.resolveTransition(cfg, animateEnd.y);
-  }, [endKey, reduce, transition]);
+  }, [endKey, reduce, transitionSig]);
   react.useEffect(() => {
     if (!animateLocations) return;
     const cfg = reduce ? NO_ANIMATION : pickTransition(transition, "locations");
@@ -106,7 +108,7 @@ function MotionLinearGradient(props) {
         locationSvs[i].value = inertia.resolveTransition(cfg, target);
       }
     }
-  }, [locationsKey, reduce, transition]);
+  }, [locationsKey, reduce, transitionSig]);
   const animatedProps = Animated.useAnimatedProps(() => {
     "worklet";
     const colorsOut = new Array(colorSvs.length);
@@ -116,7 +118,7 @@ function MotionLinearGradient(props) {
       start: { x: startX.value, y: startY.value },
       end: { x: endX.value, y: endY.value }
     };
-    if (hasLocationsRef.current) {
+    if (hasLocations) {
       const locsOut = new Array(locationSvs.length);
       for (let i = 0; i < locationSvs.length; i++)
         locsOut[i] = locationSvs[i].value;

package/dist/index.mjs

@@ -1,7 +1,7 @@
 import { useRef, useEffect } from 'react';
 import { LinearGradient } from 'expo-linear-gradient';
 import Animated, { useSharedValue, useAnimatedProps } from 'react-native-reanimated';
-import { useShouldReduceMotion, resolveTransition } from '@rootnative/inertia';
+import { useShouldReduceMotion, stableSig, resolveTransition, isTopLevelTransition } from '@rootnative/inertia';
 import { jsx } from 'react/jsx-runtime';
 
 // src/MotionLinearGradient.tsx
@@ -11,7 +11,7 @@ var DEFAULT_START = { x: 0, y: 0 };
 var DEFAULT_END = { x: 1, y: 0 };
 function pickTransition(per, key) {
   if (!per) return void 0;
-  if ("type" in per) return per;
+  if (isTopLevelTransition(per)) return per;
   return per[key];
 }
 function MotionLinearGradient(props) {
@@ -27,6 +27,7 @@ function MotionLinearGradient(props) {
   } = props;
   const slotCountRef = useRef(colors.length);
   const hasLocationsRef = useRef(locations !== void 0);
+  const hasLocations = hasLocationsRef.current;
   if (__DEV__) {
     if (slotCountRef.current !== colors.length) {
       throw new Error(
@@ -67,6 +68,7 @@ function MotionLinearGradient(props) {
   const startKey = animate?.start ? `${animate.start.x},${animate.start.y}` : "";
   const endKey = animate?.end ? `${animate.end.x},${animate.end.y}` : "";
   const locationsKey = animate?.locations ? animate.locations.join("|") : "";
+  const transitionSig = stableSig(transition);
   const animateColors = animate?.colors;
   const animateStart = animate?.start;
   const animateEnd = animate?.end;
@@ -78,19 +80,19 @@ function MotionLinearGradient(props) {
       const target = animateColors[i] ?? colors[i] ?? "";
       colorSvs[i].value = resolveTransition(cfg, target);
     }
-  }, [colorsKey, reduce, transition]);
+  }, [colorsKey, reduce, transitionSig]);
   useEffect(() => {
     if (!animateStart) return;
     const cfg = reduce ? NO_ANIMATION : pickTransition(transition, "start");
     startX.value = resolveTransition(cfg, animateStart.x);
     startY.value = resolveTransition(cfg, animateStart.y);
-  }, [startKey, reduce, transition]);
+  }, [startKey, reduce, transitionSig]);
   useEffect(() => {
     if (!animateEnd) return;
     const cfg = reduce ? NO_ANIMATION : pickTransition(transition, "end");
     endX.value = resolveTransition(cfg, animateEnd.x);
     endY.value = resolveTransition(cfg, animateEnd.y);
-  }, [endKey, reduce, transition]);
+  }, [endKey, reduce, transitionSig]);
   useEffect(() => {
     if (!animateLocations) return;
     const cfg = reduce ? NO_ANIMATION : pickTransition(transition, "locations");
@@ -100,7 +102,7 @@ function MotionLinearGradient(props) {
         locationSvs[i].value = resolveTransition(cfg, target);
       }
     }
-  }, [locationsKey, reduce, transition]);
+  }, [locationsKey, reduce, transitionSig]);
   const animatedProps = useAnimatedProps(() => {
     "worklet";
     const colorsOut = new Array(colorSvs.length);
@@ -110,7 +112,7 @@ function MotionLinearGradient(props) {
       start: { x: startX.value, y: startY.value },
       end: { x: endX.value, y: endY.value }
     };
-    if (hasLocationsRef.current) {
+    if (hasLocations) {
       const locsOut = new Array(locationSvs.length);
       for (let i = 0; i < locationSvs.length; i++)
         locsOut[i] = locationSvs[i].value;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rootnative/inertia-gradients",
-  "version": "0.0.9",
+  "version": "0.0.11",
   "description": "Animated linear gradient primitive for @rootnative/inertia, built on expo-linear-gradient.",
   "license": "MIT",
   "author": "RootNative",
@@ -50,28 +50,30 @@
     "!**/*.test.*"
   ],
   "peerDependencies": {
-    "@rootnative/inertia": ">=0.0.9",
+    "@rootnative/inertia": ">=0.0.11 <0.1.0",
     "expo-linear-gradient": ">=14.0.0",
-    "react": ">=19.0.0",
-    "react-native": ">=0.81.0",
-    "react-native-reanimated": ">=4.0.0"
+    "react": ">=19.2.3 <20.0.0",
+    "react-native": ">=0.83.0 <0.87.0",
+    "react-native-reanimated": ">=4.5.0 <4.6.0"
   },
   "devDependencies": {
-    "@react-native/babel-preset": "^0.81.5",
+    "@react-native/babel-preset": "^0.86.3",
+    "@react-native/jest-preset": "^0.86.3",
     "@size-limit/preset-small-lib": "^11.1.0",
     "@testing-library/react-native": "^13.3.3",
     "@types/jest": "^29.5.14",
-    "@types/react": "^19.1.0",
-    "expo-linear-gradient": "~15.0.8",
+    "@types/react": "^19.2.0",
+    "expo-linear-gradient": "~57.0.1",
     "jest": "^29.7.0",
-    "react": "19.1.0",
-    "react-native": "0.81.5",
-    "react-native-reanimated": "~4.1.1",
-    "react-test-renderer": "19.1.0",
+    "react": "19.2.3",
+    "react-native": "0.86.3",
+    "react-native-reanimated": "4.5.1",
+    "react-native-worklets": "0.10.1",
+    "react-test-renderer": "19.2.3",
     "size-limit": "^11.1.0",
     "tsup": "^8.3.5",
     "typescript": "^5.7.3",
-    "@rootnative/inertia": "0.0.9"
+    "@rootnative/inertia": "0.0.11"
   },
   "publishConfig": {
     "access": "public"

package/src/MotionLinearGradient.tsx

@@ -6,7 +6,9 @@ import Animated, {
   type SharedValue,
 } from 'react-native-reanimated'
 import {
+  isTopLevelTransition,
   resolveTransition,
+  stableSig,
   useShouldReduceMotion,
   type TransitionConfig,
 } from '@rootnative/inertia'
@@ -34,7 +36,11 @@ function pickTransition(
   key: keyof LinearGradientPerPropertyTransition,
 ): TransitionConfig | undefined {
   if (!per) return undefined
-  if ('type' in per) return per as TransitionConfig
+  // Structural check, not `'type' in per`: `SpringTransition.type` is
+  // optional, so `{ tension: 300 }` is a valid top-level config with no
+  // `type` key. The old check treated it as a per-property map, looked up
+  // `map[key]`, got `undefined`, and ran the default spring instead.
+  if (isTopLevelTransition(per)) return per
   return (per as LinearGradientPerPropertyTransition)[key]
 }
 
@@ -114,6 +120,11 @@ export function MotionLinearGradient(props: MotionLinearGradientProps) {
   // allocate its shared-value table on the same path.
   const slotCountRef = useRef(colors.length)
   const hasLocationsRef = useRef(locations !== undefined)
+  // Plain boolean for the worklet below. A ref's `.current` must not be read
+  // on the UI thread — the worklet runtime clones the ref object once, so a
+  // later write would be invisible there. Presence is locked at mount, so the
+  // value cannot change after the first render.
+  const hasLocations = hasLocationsRef.current
 
   if (__DEV__) {
     if (slotCountRef.current !== colors.length) {
@@ -174,6 +185,13 @@ export function MotionLinearGradient(props: MotionLinearGradientProps) {
   const endKey = animate?.end ? `${animate.end.x},${animate.end.y}` : ''
   const locationsKey = animate?.locations ? animate.locations.join('|') : ''
 
+  // Effects below key on this signature, not on the `transition` object. A
+  // parent that re-renders with an inline `transition={{ ... }}` literal makes
+  // a new object each time; keying on identity re-fired every effect and
+  // restarted the in-flight animation from its current value with the full
+  // duration. The signature only changes when the config itself changes.
+  const transitionSig = stableSig(transition)
+
   const animateColors = animate?.colors
   const animateStart = animate?.start
   const animateEnd = animate?.end
@@ -188,7 +206,7 @@ export function MotionLinearGradient(props: MotionLinearGradientProps) {
     }
     // colorSvs / colors are stable across renders by the length-lock above.
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [colorsKey, reduce, transition])
+  }, [colorsKey, reduce, transitionSig])
 
   useEffect(() => {
     if (!animateStart) return
@@ -196,7 +214,7 @@ export function MotionLinearGradient(props: MotionLinearGradientProps) {
     startX.value = resolveTransition(cfg, animateStart.x) as number
     startY.value = resolveTransition(cfg, animateStart.y) as number
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [startKey, reduce, transition])
+  }, [startKey, reduce, transitionSig])
 
   useEffect(() => {
     if (!animateEnd) return
@@ -204,7 +222,7 @@ export function MotionLinearGradient(props: MotionLinearGradientProps) {
     endX.value = resolveTransition(cfg, animateEnd.x) as number
     endY.value = resolveTransition(cfg, animateEnd.y) as number
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [endKey, reduce, transition])
+  }, [endKey, reduce, transitionSig])
 
   useEffect(() => {
     if (!animateLocations) return
@@ -216,7 +234,7 @@ export function MotionLinearGradient(props: MotionLinearGradientProps) {
       }
     }
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [locationsKey, reduce, transition])
+  }, [locationsKey, reduce, transitionSig])
 
   const animatedProps = useAnimatedProps(() => {
     'worklet'
@@ -232,7 +250,7 @@ export function MotionLinearGradient(props: MotionLinearGradientProps) {
       start: { x: startX.value, y: startY.value },
       end: { x: endX.value, y: endY.value },
     }
-    if (hasLocationsRef.current) {
+    if (hasLocations) {
       const locsOut = new Array<number>(locationSvs.length)
       for (let i = 0; i < locationSvs.length; i++)
         locsOut[i] = locationSvs[i]!.value