@rootnative/inertia 0.0.9 → 0.0.11

package/src/values/useSpring.ts

@@ -6,7 +6,12 @@ import {
   withSpring,
   type SharedValue,
 } from 'react-native-reanimated'
-import { lookupNamedTransition, useNamedTransitions } from '../config'
+import {
+  lookupNamedTransition,
+  useNamedTransitions,
+  useShouldReduceMotion,
+} from '../config'
+import { warnOnce } from '../internal/warnOnce'
 import { springToReanimated } from '../transitions/spring'
 import {
   type NamedTransitions,
@@ -14,8 +19,6 @@ import {
   type TransitionName,
 } from '../types'
 
-declare const __DEV__: boolean
-
 /**
  * Animate a shared value toward `target` with spring physics, using the
  * library's react-spring vocabulary (`tension` / `friction` / `mass`).
@@ -35,12 +38,16 @@ declare const __DEV__: boolean
  * must resolve to a spring config — a name registered as timing / decay /
  * no-animation warns in dev and falls back to the default spring (reach for
  * `useAnimation` when the named transition's type should be honored).
+ *
+ * Reduced motion (via `<MotionConfig reducedMotion>`) is honoured: the output
+ * is assigned the target directly, with no spring, on both paths.
  */
 export function useSpring(
   target: number | SharedValue<number>,
   config?: SpringTransition | TransitionName,
 ): SharedValue<number> {
   const spring = resolveSpringInput(config, useNamedTransitions())
+  const shouldReduceMotion = useShouldReduceMotion()
   // Reanimated config is rebuilt only when the public config object changes
   // shape. The worklet path reads this from JS-thread closure capture, which
   // is fine: it's the resolved config that's invariant across UI-thread
@@ -52,14 +59,7 @@ export function useSpring(
     // depending on `config` itself would rebuild the Reanimated config on
     // every render and defeat the memo.
     // eslint-disable-next-line react-hooks/exhaustive-deps
-    [
-      spring?.tension,
-      spring?.friction,
-      spring?.mass,
-      spring?.velocity,
-      spring?.restSpeedThreshold,
-      spring?.restDisplacementThreshold,
-    ],
+    [spring?.tension, spring?.friction, spring?.mass, spring?.velocity],
   )
 
   const isSharedTarget = isSharedValue(target)
@@ -72,28 +72,38 @@ export function useSpring(
   // a stale closure.
   useEffect(() => {
     if (isSharedTarget) return
-    output.value = withSpring(target as number, reanimConfig)
+    output.value = shouldReduceMotion
+      ? (target as number)
+      : withSpring(target as number, reanimConfig)
     // `output` is identity-stable per hook instance (Reanimated guarantee).
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [isSharedTarget, target, reanimConfig])
+  }, [isSharedTarget, target, reanimConfig, shouldReduceMotion])
 
   // SharedValue path. `useAnimatedReaction` runs the prepare worklet whenever
   // its returned value changes; we read `.value` off the target SV and pipe
   // it through `withSpring` on the UI thread. When the target is a plain
   // number we never declare a source so the reaction is inert (returns
   // `null`, never fires `react`).
+  //
+  // `source` is in the dependency list on purpose. An explicit list replaces
+  // Reanimated's closure-derived one, so a caller that swaps which shared
+  // value drives the spring would otherwise keep the reaction wired to the
+  // old one — the same stale-closure class `useColorCascade` fixed in 0.0.4.
+  // A plain-number target maps to `null`, so a changing number does not
+  // re-register the inert reaction.
+  const source = isSharedTarget ? target : null
   useAnimatedReaction(
     () => {
       'worklet'
-      if (!isSharedTarget) return null
-      return (target as SharedValue<number>).value
+      if (source === null) return null
+      return source.value
     },
     (next, prev) => {
       'worklet'
       if (next === null || next === prev) return
-      output.value = withSpring(next, reanimConfig)
+      output.value = shouldReduceMotion ? next : withSpring(next, reanimConfig)
     },
-    [isSharedTarget, reanimConfig],
+    [source, reanimConfig, shouldReduceMotion],
   )
 
   // Stop the in-flight spring when the owning component unmounts so its
@@ -122,14 +132,13 @@ function resolveSpringInput(
   if (typeof config !== 'string') return config
   const cfg = lookupNamedTransition(config, registry)
   if (cfg.type === undefined || cfg.type === 'spring') return cfg
-  if (__DEV__) {
-    console.warn(
-      `[inertia] Named transition "${config}" resolves to type ` +
-        `'${cfg.type}', but useSpring / useBooleanSpring are spring-only — ` +
-        `falling back to the default spring. Use useAnimation to honor ` +
-        `non-spring named transitions.`,
-    )
-  }
+  warnOnce(
+    `spring-only:${config}`,
+    `[inertia] Named transition "${config}" resolves to type ` +
+      `'${cfg.type}', but useSpring / useBooleanSpring are spring-only — ` +
+      `falling back to the default spring. Use useAnimation to honor ` +
+      `non-spring named transitions.`,
+  )
   return undefined
 }
 

package/src/values/useTransform.ts

@@ -1,5 +1,5 @@
+import { useMemo } from 'react'
 import {
-  Extrapolation,
   interpolate,
   interpolateColor,
   useDerivedValue,
@@ -11,17 +11,10 @@ import {
 // import is always available wherever Inertia is.
 import { isWorkletFunction } from 'react-native-worklets'
 import { warnNonWorkletOnce } from '../internal/nonWorkletWarning'
+import { stableSig } from '../transitions/sig'
+import { mapExtrapolation, type ExtrapolationMode } from './extrapolation'
 
-/**
- * Extrapolation behavior at the edges of the input range. Mirrors
- * Reanimated's enum so consumers don't need a separate import.
- *
- * - `'clamp'` (default) — output stays pinned at the first/last value
- *   outside the input range. Matches Framer Motion's default.
- * - `'identity'` — return the input unchanged outside the range.
- * - `'extend'` — continue the linear slope beyond the range.
- */
-export type ExtrapolationMode = 'clamp' | 'identity' | 'extend'
+export type { ExtrapolationMode }
 
 export interface UseTransformOptions {
   extrapolateLeft?: ExtrapolationMode
@@ -34,7 +27,10 @@ export interface UseTransformOptions {
  * ```ts
  * const x = useMotionValue(0)
  * const y = useMotionValue(0)
- * const distance = useTransform(() => Math.sqrt(x.value ** 2 + y.value ** 2))
+ * const distance = useTransform(() => {
+ *   'worklet'
+ *   return Math.sqrt(x.value ** 2 + y.value ** 2)
+ * })
  * ```
  *
  * The transformer MUST be a worklet — put the `'worklet'` directive as its
@@ -87,6 +83,20 @@ export function useTransform<T>(
   // `useDerivedValue` exactly once. Keeping the hook call unconditional
   // satisfies rules-of-hooks; per-call branching (transformer vs
   // interpolation) is decided once at JS time, never at frame time.
+  // Range arrays are memoised on their contents: callers routinely write
+  // `useTransform(x, [0, 1], [0, 100])` inline, and a fresh array each render
+  // would otherwise change the producer's closure and rebuild the derived
+  // value's worklet every render.
+  const rangeSig = stableSig([inputRange, outputRange])
+  const ranges = useMemo(
+    () => ({
+      input: (inputRange ?? []) as readonly number[],
+      output: (outputRange ?? []) as readonly (number | string)[],
+    }),
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [rangeSig],
+  )
+
   let producer: () => unknown
   if (typeof arg1 === 'function') {
     // Transformer overload. Must be a worklet — the directive-wrapped
@@ -110,8 +120,8 @@ export function useTransform<T>(
     // Interpolation overload. We pre-resolve everything JS-side so the
     // worklet body only consumes flat values.
     const source = arg1
-    const input = inputRange as readonly number[]
-    const output = outputRange as readonly (number | string)[]
+    const input = ranges.input
+    const output = ranges.output
     const isColor = output.length > 0 && typeof output[0] === 'string'
     const extrapolateLeft = mapExtrapolation(options?.extrapolateLeft)
     const extrapolateRight = mapExtrapolation(options?.extrapolateRight)
@@ -140,9 +150,3 @@ export function useTransform<T>(
     | SharedValue<number>
     | SharedValue<string>
 }
-
-function mapExtrapolation(mode: ExtrapolationMode | undefined): Extrapolation {
-  if (mode === 'identity') return Extrapolation.IDENTITY
-  if (mode === 'extend') return Extrapolation.EXTEND
-  return Extrapolation.CLAMP
-}

package/src/values/useTranslateStyle.ts

@@ -0,0 +1,47 @@
+import type { ViewStyle } from 'react-native'
+import { useAnimatedStyle, type SharedValue } from 'react-native-reanimated'
+
+/**
+ * What {@link useTranslateStyle} returns: a plain style object that owns
+ * `transform`.
+ *
+ * Deliberately **not** `ReturnType<typeof useAnimatedStyle>`. Reanimated 4.5
+ * brands that value (`AnimatedStyleHandle`), and a branded type is rejected
+ * inside a `StyleProp<ViewStyle>` array — so every call site would need a cast,
+ * which is the exact defect `InterpolatedStyle` was introduced to remove in
+ * `0.0.9`. The brand is compile-time only, so the runtime value is unchanged:
+ * it is still the animated style Reanimated produced.
+ */
+export type TranslateStyle = {
+  transform: NonNullable<ViewStyle['transform']>
+}
+
+/**
+ * Animated style that translates by two shared values:
+ * `transform: [{ translateX: x }, { translateY: y }]`.
+ *
+ * This is the style fragment every drag-style hook returns (`useTouchDrag`,
+ * and `useDrag` / `usePan` / `useSwipe` in `@rootnative/inertia-gestures`).
+ * Use it directly when a custom gesture owns its own translation values.
+ *
+ * The style owns the whole `transform` key. Do not stack a second transform
+ * style beside it — `transform` is one key in React Native, so the later
+ * style replaces this one instead of merging. Nest another animated view, or
+ * build one style from `x` / `y` with `useInterpolatedStyle`, to add a
+ * transform.
+ *
+ * ```tsx
+ * const x = useMotionValue(0)
+ * const y = useMotionValue(0)
+ * const style = useTranslateStyle(x, y)
+ * return <Motion.View style={style} />
+ * ```
+ */
+export function useTranslateStyle(
+  x: SharedValue<number>,
+  y: SharedValue<number>,
+): TranslateStyle {
+  return useAnimatedStyle(() => ({
+    transform: [{ translateX: x.value }, { translateY: y.value }],
+  })) as unknown as TranslateStyle
+}

package/dist/chunk-24NUL23E.js

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

package/dist/chunk-4XBX7KOD.js

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

package/dist/chunk-Z5USXWTE.js

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