@onlynative/inertia 0.0.1-alpha.7 → 0.0.1-alpha.9

package/src/touch/useTouchDrag.ts

@@ -0,0 +1,289 @@
+import { useMemo } from 'react'
+import {
+  PanResponder,
+  type PanResponderGestureState,
+  type PanResponderInstance,
+} from 'react-native'
+import {
+  useAnimatedStyle,
+  useSharedValue,
+  type SharedValue,
+} from 'react-native-reanimated'
+import { buildReleaseAnimation } from '../transitions'
+import type { TransitionConfig } from '../types'
+
+/**
+ * Same drag-result shape as `useDrag` from `@onlynative/inertia-gestures`,
+ * minus the `gesture` field (PanResponder spreads handlers, no
+ * `<GestureDetector>` wrapper). The shared values + animatedStyle are
+ * interchangeable across both hooks; consumers can swap implementations
+ * without touching their `useAnimatedStyle` consumers.
+ */
+export interface UseTouchDragResult {
+  /** Spread onto a `View` / `Pressable` to install the pan responder. */
+  panHandlers: PanResponderInstance['panHandlers']
+  /** Stable animated `transform` style. */
+  animatedStyle: ReturnType<typeof useAnimatedStyle>
+  /** Live x translation, persistent across gestures. */
+  dragX: SharedValue<number>
+  /** Live y translation, persistent across gestures. */
+  dragY: SharedValue<number>
+  /** True while the gesture is active. */
+  isDragging: SharedValue<boolean>
+}
+
+/**
+ * Release transition shape for PanResponder's JS-thread `onRelease`. Mirrors
+ * the gesture-handler adapter's `ReleaseTransition` but with `to` typed as
+ * required for spring/timing/no-animation (decay omits it).
+ */
+export type TouchReleaseTransition =
+  | (TransitionConfig & { type: 'spring'; to: number })
+  | (TransitionConfig & { type: 'timing'; to: number })
+  | (TransitionConfig & { type: 'decay' })
+  | (TransitionConfig & { type: 'no-animation'; to: number })
+
+export interface TouchReleaseInfo {
+  x: number
+  y: number
+  velocity: { x: number; y: number }
+}
+
+export interface TouchReleaseResult {
+  x?: TouchReleaseTransition
+  y?: TouchReleaseTransition
+}
+
+export interface UseTouchDragOptions {
+  /**
+   * Restrict the drag to one axis. Defaults to `'both'`. When `'x'` is set
+   * the y-axis shared value never updates (and vice versa); velocity is
+   * still reported on both for `onDragEnd`.
+   */
+  axis?: 'x' | 'y' | 'both'
+  /**
+   * Travel bounds (px from resting). Each side is independently optional.
+   * Out-of-bounds values clamp to the limit unless `elastic > 0`.
+   */
+  constraints?: {
+    left?: number
+    right?: number
+    top?: number
+    bottom?: number
+  }
+  /**
+   * Rubber-band coefficient applied to overshoot past `constraints`. `0`
+   * (default) hard-clamps; `0.2`-`0.4` is a typical Framer-Motion feel.
+   */
+  elastic?: number
+  /**
+   * Fires when the user starts dragging. JS thread.
+   */
+  onDragStart?: () => void
+  /**
+   * Fires when the user releases or the gesture terminates. JS thread.
+   *
+   * Velocity is in px/sec to match the `@onlynative/inertia-gestures` API
+   * (PanResponder's native `vx` / `vy` are px/ms; the hook normalizes).
+   */
+  onDragEnd?: (info: TouchReleaseInfo) => void
+  /**
+   * Optional release-animation callback. Return per-axis release transitions
+   * to animate the SVs to a settled position via Inertia's transition
+   * resolver — spring snap-to-tick, decay with bounds, timing settle.
+   *
+   * Unlike the gesture-handler version, this callback runs on the **JS
+   * thread** (PanResponder is JS-only). The returned transitions still drive
+   * UI-thread animations via Reanimated — only the decision logic is JS-side.
+   */
+  onRelease?: (info: TouchReleaseInfo) => TouchReleaseResult | void
+}
+
+/**
+ * PanResponder-backed drag hook. Pointer-equivalent of `useDrag` from
+ * `@onlynative/inertia-gestures`, with two differences:
+ *
+ *   1. No `react-native-gesture-handler` peer dep required — PanResponder is
+ *      built into React Native, so this lives in core.
+ *   2. Returns `panHandlers` to spread on a `View` / `Pressable` instead of
+ *      a `gesture` to plug into `<GestureDetector>`.
+ *
+ * Use this when:
+ *   - You need keyboard a11y alongside drag (a slider with arrow-key step,
+ *     a scrollbar with `PageUp` / `PageDown`). PanResponder composes
+ *     cleanly with `onKeyDown`; gesture-handler doesn't surface keyboard.
+ *   - You don't want to take `react-native-gesture-handler` as a dependency
+ *     (smaller bundle, simpler install).
+ *
+ * Skip this when:
+ *   - You're already using `react-native-gesture-handler` elsewhere (use
+ *     `useDrag` from `@onlynative/inertia-gestures` for consistency and
+ *     better worklet-thread fidelity on release velocity).
+ *   - You need momentum semantics like the gesture-handler `usePan` —
+ *     PanResponder's release velocity is JS-thread and slightly less precise.
+ *
+ * @example
+ * ```tsx
+ * import { useTouchDrag } from '@onlynative/inertia/touch'
+ *
+ * function Slider({ ticks }: { ticks: number[] }) {
+ *   const drag = useTouchDrag({
+ *     axis: 'x',
+ *     constraints: { left: 0, right: 280 },
+ *     onRelease: (e) => {
+ *       const snap = nearestTick(e.x, ticks)
+ *       return { x: { type: 'spring', to: snap, velocity: e.velocity.x } }
+ *     },
+ *   })
+ *
+ *   return (
+ *     <Motion.View
+ *       style={[styles.thumb, drag.animatedStyle]}
+ *       {...drag.panHandlers}
+ *     />
+ *   )
+ * }
+ * ```
+ */
+export function useTouchDrag(
+  options: UseTouchDragOptions = {},
+): UseTouchDragResult {
+  const { axis = 'both', constraints, elastic = 0 } = options
+
+  const dragX = useSharedValue(0)
+  const dragY = useSharedValue(0)
+  const startX = useSharedValue(0)
+  const startY = useSharedValue(0)
+  const isDragging = useSharedValue(false)
+
+  // Snapshot scalars into local consts so the responder callbacks close over
+  // primitives, not the `options` literal — a fresh `options` each render
+  // would otherwise force the PanResponder identity to change.
+  const lockX = axis !== 'y'
+  const lockY = axis !== 'x'
+  const left = constraints?.left
+  const right = constraints?.right
+  const top = constraints?.top
+  const bottom = constraints?.bottom
+  const elasticCoef = elastic
+  const { onDragStart, onDragEnd, onRelease } = options
+
+  const responder = useMemo(
+    () => buildResponder(),
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [
+      lockX,
+      lockY,
+      left,
+      right,
+      top,
+      bottom,
+      elasticCoef,
+      onDragStart,
+      onDragEnd,
+      onRelease,
+    ],
+  )
+
+  // Hoisted out of the inline `useMemo` factory to keep the dep list readable
+  // and avoid re-declaring closure helpers each render.
+  function buildResponder(): PanResponderInstance {
+    const handleEnd = (g: PanResponderGestureState) => {
+      isDragging.value = false
+      const x = dragX.value
+      const y = dragY.value
+      // PanResponder velocity is px/ms; multiply to match the
+      // `@onlynative/inertia-gestures` API (px/sec from gesture-handler).
+      const vx = g.vx * 1000
+      const vy = g.vy * 1000
+      if (onRelease) {
+        const result = onRelease({ x, y, velocity: { x: vx, y: vy } })
+        if (result) {
+          if (result.x && lockX) {
+            const toX = 'to' in result.x ? result.x.to : x
+            dragX.value = buildReleaseAnimation(
+              result.x,
+              toX,
+            ) as unknown as number
+          }
+          if (result.y && lockY) {
+            const toY = 'to' in result.y ? result.y.to : y
+            dragY.value = buildReleaseAnimation(
+              result.y,
+              toY,
+            ) as unknown as number
+          }
+        }
+      }
+      if (onDragEnd) onDragEnd({ x, y, velocity: { x: vx, y: vy } })
+    }
+
+    return PanResponder.create({
+      // Always claim the start so taps that turn into drags don't slip
+      // through to a parent ScrollView. Consumers can compose their own
+      // capture predicates by wrapping the returned `panHandlers`.
+      onStartShouldSetPanResponder: () => true,
+      onMoveShouldSetPanResponder: () => true,
+      onPanResponderGrant: () => {
+        startX.value = dragX.value
+        startY.value = dragY.value
+        isDragging.value = true
+        if (onDragStart) onDragStart()
+      },
+      onPanResponderMove: (_e, g) => {
+        if (lockX) {
+          dragX.value = applyBounds(
+            startX.value + g.dx,
+            left,
+            right,
+            elasticCoef,
+          )
+        }
+        if (lockY) {
+          dragY.value = applyBounds(
+            startY.value + g.dy,
+            top,
+            bottom,
+            elasticCoef,
+          )
+        }
+      },
+      onPanResponderRelease: (_e, g) => handleEnd(g),
+      onPanResponderTerminate: (_e, g) => handleEnd(g),
+    })
+  }
+
+  const animatedStyle = useAnimatedStyle(() => ({
+    transform: [{ translateX: dragX.value }, { translateY: dragY.value }],
+  }))
+
+  return {
+    panHandlers: responder.panHandlers,
+    animatedStyle,
+    dragX,
+    dragY,
+    isDragging,
+  }
+}
+
+/**
+ * Clamp `value` to `[min, max]`. When `elastic > 0` the overshoot past a
+ * bound is scaled by `elastic`, giving a rubber-band feel. `min` / `max`
+ * may be `undefined` to leave that side unbounded.
+ *
+ * JS-thread (PanResponder callbacks are JS, not worklets).
+ */
+function applyBounds(
+  value: number,
+  min: number | undefined,
+  max: number | undefined,
+  elastic: number,
+): number {
+  if (min !== undefined && value < min) {
+    return elastic > 0 ? min + (value - min) * elastic : min
+  }
+  if (max !== undefined && value > max) {
+    return elastic > 0 ? max + (value - max) * elastic : max
+  }
+  return value
+}

package/src/types.ts

@@ -1,4 +1,9 @@
-import { type ComponentType } from 'react'
+import {
+  type ComponentProps,
+  type ComponentType,
+  type ReactElement,
+  type Ref,
+} from 'react'
 import { type StyleProp } from 'react-native'
 
 /**
@@ -239,8 +244,15 @@ export interface VariantController<K extends string = string> {
 
 /**
  * Props injected onto every Motion primitive.
+ *
+ * The second type parameter `V` is the concrete `variants` map. It is inferred
+ * from the `variants` prop at each JSX use (see `MotionComponent`), which is
+ * what lets `animate` narrow to the variant key union and reject typos. When
+ * no `variants` prop is passed, `V` falls back to `VariantsMap<C>` — whose key
+ * type is the open `string`, so `animate` still accepts any string and nothing
+ * regresses for the variant-less case.
  */
-export interface MotionProps<C> {
+export interface MotionProps<C, V extends VariantsMap<C> = VariantsMap<C>> {
   /**
    * Initial values applied on mount. Read once on mount and intentionally
    * non-reactive — to reset after a state change, change the component `key`,
@@ -251,10 +263,11 @@ export interface MotionProps<C> {
   initial?: AnimateStyle<C> | false
   /**
    * The animation target. A style object, a variant key (when `variants` is
-   * supplied), or an array of sequence steps. Variant keys autocomplete when
-   * `variants` is annotated `as const`.
+   * supplied), or an array of sequence steps. When `variants` is set, the
+   * string form is narrowed to the map's keys, so a key typo is a compile
+   * error and the keys autocomplete — no `as const` required.
    */
-  animate?: AnimateStyle<C> | string
+  animate?: AnimateStyle<C> | (keyof V & string)
   /**
    * Values applied while the component exits via `<Presence>`.
    */
@@ -263,13 +276,13 @@ export interface MotionProps<C> {
    * Named animation states. With `variants` set, `animate` accepts a key from
    * this map.
    */
-  variants?: VariantsMap<C>
+  variants?: V
   /**
    * Imperative controller from `useVariants(...)`. When supplied, `animate`
    * is read from `controller.current` and re-applied whenever the controller
    * transitions. `animate` and `controller` should not both be set.
    */
-  controller?: VariantController
+  controller?: VariantController<keyof V & string>
   /**
    * Gesture-driven sub-states (`pressed`, `focused`, `focusVisible`,
    * `hovered`). When omitted, no handlers are mounted on the underlying
@@ -298,11 +311,34 @@ export interface MotionProps<C> {
    * — decay is downgraded to spring (no clear target). Reduced motion gates
    * the prop the same way it gates `animate`.
    *
-   * `layoutId` for shared element transitions across screens is deferred:
-   * Reanimated 4 dropped the underlying `sharedTransitionTag` API and a
-   * Inertia-side measure-based registry is the in-flight design.
+   * `layoutId` (below) is a related but distinct mechanism for shared
+   * element transitions across screens — `layout` animates this element's
+   * own layout changes, `layoutId` animates from a different element's
+   * last measured rect to this element's current rect.
    */
   layout?: boolean | TransitionConfig
+  /**
+   * Shared-element transition id. When a Motion primitive with `layoutId`
+   * unmounts, its last on-screen rect is recorded under that id; the next
+   * mount of any Motion primitive with the same id animates from the
+   * 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.
+   *
+   * 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.
+   */
+  layoutId?: string
   /**
    * Fired once per logical animation completion. See `AnimationCallbackInfo`
    * for the payload shape — transform parents fire once, not per axis.
@@ -311,14 +347,37 @@ export interface MotionProps<C> {
 }
 
 /**
- * The component type produced by `createMotionComponent`. Combines the
- * underlying component's props (minus `style`, which we replace with an
- * animated style) with the Motion-specific props above.
+ * Props of a Motion primitive for a given underlying component `C` and a
+ * concrete variants map `V`: the component's own props (minus `style`, which
+ * we replace with an animated style) intersected with the Motion props.
  */
-// eslint-disable-next-line @typescript-eslint/no-explicit-any
-export type MotionComponent<C extends ComponentType<any>> = ComponentType<
-  Omit<React.ComponentProps<C>, 'style'> &
-    MotionProps<React.ComponentProps<C>> & {
-      style?: React.ComponentProps<C>['style']
-    }
->
+export type MotionComponentProps<
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  C extends ComponentType<any>,
+  V extends VariantsMap<ComponentProps<C>> = VariantsMap<ComponentProps<C>>,
+> = Omit<ComponentProps<C>, 'style'> &
+  MotionProps<ComponentProps<C>, V> & {
+    style?: ComponentProps<C>['style']
+    ref?: Ref<unknown>
+  }
+
+/**
+ * The component type produced by `createMotionComponent`.
+ *
+ * It is a **generic call signature**, not a plain `ComponentType`: the variant
+ * map `V` is inferred from the `variants` prop at each JSX use. That inference
+ * is what narrows `animate`'s string form to the variant keys, so
+ * `<Motion.View variants={{ open, closed }} animate="opne" />` is a compile
+ * error and `open` / `closed` autocomplete. With no `variants` prop, `V` falls
+ * back to the open `VariantsMap`, so `animate` still accepts any string and the
+ * variant-less call site is unchanged.
+ */
+export interface MotionComponent<
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  C extends ComponentType<any>,
+> {
+  <V extends VariantsMap<ComponentProps<C>> = VariantsMap<ComponentProps<C>>>(
+    props: MotionComponentProps<C, V>,
+  ): ReactElement | null
+  displayName?: string
+}

package/src/values/index.ts

@@ -1,4 +1,10 @@
 export { useAnimation } from './useAnimation'
+export { useBooleanSpring } from './useBooleanSpring'
+export {
+  useColorTransition,
+  type ColorStyleKey,
+  type UseColorTransitionOptions,
+} from './useColorTransition'
 export {
   useGesture,
   type UseGestureHandlers,
@@ -12,4 +18,9 @@ export {
   type UseTransformOptions,
 } from './useTransform'
 export { useScroll, type UseScrollResult } from './useScroll'
+export {
+  useShadow,
+  type ShadowConfig,
+  type UseShadowOptions,
+} from './useShadow'
 export { useVariants } from './useVariants'

package/src/values/useBooleanSpring.ts

@@ -0,0 +1,33 @@
+import { type SharedValue } from 'react-native-reanimated'
+import { useSpring } from './useSpring'
+import { type SpringTransition } from '../types'
+
+/**
+ * Toggle a 0↔1 progress value with a spring whenever `active` flips.
+ *
+ * This is the recurring shape behind checkbox checks, accordion expansions,
+ * drawer open/closed states, focus rings, and every other binary UI flip
+ * that wants spring physics rather than a hard cut. The returned shared
+ * value sits at `0` when `active` is `false` and animates toward `1` when
+ * `active` flips to `true` (and back again on the reverse flip). Feed it to
+ * a `useTransform`, `useShadow`, or a hand-rolled `useAnimatedStyle` to
+ * drive whatever the boolean controls visually.
+ *
+ * ```tsx
+ * const progress = useBooleanSpring(isChecked)
+ * const indicatorStyle = useAnimatedStyle(() => ({
+ *   opacity: progress.value,
+ *   transform: [{ scale: progress.value }],
+ * }))
+ * ```
+ *
+ * The spring config follows the same react-spring vocabulary as the rest of
+ * the library (`tension` / `friction` / `mass`); omit it to take the
+ * library's defaults.
+ */
+export function useBooleanSpring(
+  active: boolean,
+  springConfig?: SpringTransition,
+): SharedValue<number> {
+  return useSpring(active ? 1 : 0, springConfig)
+}

package/src/values/useColorTransition.ts

@@ -0,0 +1,72 @@
+import {
+  interpolateColor,
+  useAnimatedStyle,
+  type SharedValue,
+} from 'react-native-reanimated'
+
+/**
+ * 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
+ * returned style fragment is always a legal RN style.
+ */
+export type ColorStyleKey =
+  | 'backgroundColor'
+  | 'color'
+  | 'borderColor'
+  | 'borderTopColor'
+  | 'borderRightColor'
+  | 'borderBottomColor'
+  | 'borderLeftColor'
+  | 'tintColor'
+  | 'shadowColor'
+
+export interface UseColorTransitionOptions {
+  /**
+   * Which style slot the interpolated color is emitted under. Defaults to
+   * `backgroundColor` — the dominant case for state-layer haloes, card
+   * fills, and chip surfaces. Override for ring colors (`borderColor`),
+   * text colors (`color`), image tints (`tintColor`), etc.
+   */
+  key?: ColorStyleKey
+}
+
+/**
+ * Interpolate a single color channel between `from` and `to` as `progress`
+ * moves 0→1, returning an animated style fragment that can be spread onto
+ * any Reanimated-aware view.
+ *
+ * ```tsx
+ * const progress = useBooleanSpring(isPressed)
+ * const fillStyle = useColorTransition(progress, [colors.surface, colors.pressed])
+ * const ringStyle = useColorTransition(progress, [colors.outline, colors.primary], {
+ *   key: 'borderColor',
+ * })
+ *
+ * return <Motion.View style={[styles.chip, fillStyle, ringStyle]} />
+ * ```
+ *
+ * This is a pure interpolator: it does not animate on its own. Drive
+ * `progress` upstream with a `useSpring`, `useBooleanSpring`, gesture
+ * progress, or scroll-derived `useTransform`. Values outside `[0, 1]`
+ * clamp. For a raw `SharedValue<string>` (e.g. to feed a gradient or
+ * compose into a hand-rolled `useAnimatedStyle`), use `useTransform`
+ * directly with a color output range.
+ */
+export function useColorTransition(
+  progress: SharedValue<number>,
+  range: readonly [string, string],
+  options?: UseColorTransitionOptions,
+): ReturnType<typeof useAnimatedStyle> {
+  // Resolve the slot key once on the JS thread so the worklet body
+  // consumes a single string literal — consistent with the JS-thread
+  // resolver principle that keeps `Object.keys`-style walks off the UI
+  // thread (see CLAUDE.md design principle 8).
+  const key = options?.key ?? 'backgroundColor'
+  const from = range[0]
+  const to = range[1]
+
+  return useAnimatedStyle(() => {
+    'worklet'
+    return { [key]: interpolateColor(progress.value, [0, 1], [from, to]) }
+  })
+}

package/src/values/useShadow.ts

@@ -0,0 +1,116 @@
+import {
+  interpolate,
+  interpolateColor,
+  useAnimatedStyle,
+  type SharedValue,
+} from 'react-native-reanimated'
+
+/**
+ * Shape accepted on either end of a `useShadow` tween. Every field is
+ * optional — only keys present on at least one side participate in the
+ * output style. Mirrors the flat shadow keys on `Motion.View`'s `animate`
+ * surface, plus the nested `shadowOffset` source.
+ */
+export interface ShadowConfig {
+  shadowOpacity?: number
+  shadowRadius?: number
+  shadowOffset?: { width?: number; height?: number }
+  /** Android elevation. iOS shadow consumers can leave this off. */
+  elevation?: number
+  shadowColor?: string
+}
+
+export interface UseShadowOptions {
+  /** Shadow state at `progress === 0`. */
+  from: ShadowConfig
+  /** Shadow state at `progress === 1`. */
+  to: ShadowConfig
+  /**
+   * Driver — typically 0→1. Whatever produces it (a `useSpring`, a gesture
+   * progress value, a scroll-derived `useTransform`) is the caller's
+   * concern. The hook is a pure interpolator; it does not animate on its
+   * own. Values outside `[0, 1]` clamp.
+   */
+  progress: SharedValue<number>
+}
+
+/**
+ * Interpolate between two shadow configs as `progress` moves 0→1, returning
+ * an animated style fragment that can be spread onto any Reanimated-aware
+ * view (including `Motion.*` primitives and a hand-rolled `Animated.View`).
+ *
+ * ```tsx
+ * const progress = useSpring(isElevated ? 1 : 0)
+ * const shadowStyle = useShadow({
+ *   from: { shadowOpacity: 0.08, shadowRadius: 2, shadowOffset: { width: 0, height: 1 }, elevation: 1 },
+ *   to:   { shadowOpacity: 0.24, shadowRadius: 12, shadowOffset: { width: 0, height: 8 }, elevation: 8 },
+ *   progress,
+ * })
+ *
+ * return <Motion.View style={[styles.card, shadowStyle]} />
+ * ```
+ *
+ * Only keys present on either `from` or `to` are emitted. A key present on
+ * one side and absent on the other tweens from the present value to the
+ * absent side's natural zero (`0` for numbers, `'transparent'` for
+ * `shadowColor`, `{ width: 0, height: 0 }` for `shadowOffset`). This is a
+ * pure interpolator — to "animate" the shadow, drive `progress` with a
+ * spring, timing, or gesture upstream.
+ */
+export function useShadow({
+  from,
+  to,
+  progress,
+}: UseShadowOptions): ReturnType<typeof useAnimatedStyle> {
+  // Resolve presence + endpoints once on the JS thread so the worklet body
+  // consumes flat literals — consistent with the JS-thread resolver
+  // principle that keeps `Object.keys`-style walks off the UI thread.
+  const hasOpacity =
+    from.shadowOpacity !== undefined || to.shadowOpacity !== undefined
+  const hasRadius =
+    from.shadowRadius !== undefined || to.shadowRadius !== undefined
+  const hasElevation =
+    from.elevation !== undefined || to.elevation !== undefined
+  const hasColor =
+    from.shadowColor !== undefined || to.shadowColor !== undefined
+  const hasOffset =
+    from.shadowOffset !== undefined || to.shadowOffset !== undefined
+
+  const opacityFrom = from.shadowOpacity ?? 0
+  const opacityTo = to.shadowOpacity ?? 0
+  const radiusFrom = from.shadowRadius ?? 0
+  const radiusTo = to.shadowRadius ?? 0
+  const elevationFrom = from.elevation ?? 0
+  const elevationTo = to.elevation ?? 0
+  const colorFrom = from.shadowColor ?? 'transparent'
+  const colorTo = to.shadowColor ?? 'transparent'
+  const offsetWFrom = from.shadowOffset?.width ?? 0
+  const offsetWTo = to.shadowOffset?.width ?? 0
+  const offsetHFrom = from.shadowOffset?.height ?? 0
+  const offsetHTo = to.shadowOffset?.height ?? 0
+
+  return useAnimatedStyle(() => {
+    'worklet'
+    const t = progress.value
+    const out: Record<string, unknown> = {}
+    if (hasOpacity) {
+      out.shadowOpacity = interpolate(t, [0, 1], [opacityFrom, opacityTo])
+    }
+    if (hasRadius) {
+      out.shadowRadius = interpolate(t, [0, 1], [radiusFrom, radiusTo])
+    }
+    if (hasElevation) {
+      out.elevation = interpolate(t, [0, 1], [elevationFrom, elevationTo])
+    }
+    if (hasColor) {
+      out.shadowColor = interpolateColor(t, [0, 1], [colorFrom, colorTo])
+    }
+    if (hasOffset) {
+      out.shadowOffset = {
+        width: interpolate(t, [0, 1], [offsetWFrom, offsetWTo]),
+        height: interpolate(t, [0, 1], [offsetHFrom, offsetHTo]),
+      }
+    }
+    return out
+  })
+}