@rootnative/inertia 0.0.9 → 0.0.11

package/dist/useTranslateStyle-BDrOD97O.d.mts

@@ -0,0 +1,58 @@
+import { ViewStyle } from 'react-native';
+import { SharedValue } from 'react-native-reanimated';
+
+/**
+ * Clamp `value` to `[min, max]`. When `elastic > 0` the overshoot past a
+ * bound is scaled by `elastic` instead of hard-clamped, giving a rubber-band
+ * feel. `min` / `max` may be `undefined` to leave that side unbounded.
+ *
+ * Worklet, so it runs both inside a gesture-handler pan handler on the UI
+ * thread (`useDrag`) and from a JS-thread `PanResponder` callback
+ * (`useTouchDrag`).
+ *
+ * ```ts
+ * applyBounds(120, -100, 100, 0)    // 100
+ * applyBounds(120, -100, 100, 0.5)  // 110
+ * applyBounds(50, undefined, 100, 0) // 50
+ * ```
+ */
+declare function applyBounds(value: number, min: number | undefined, max: number | undefined, elastic: number): number;
+
+/**
+ * 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.
+ */
+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} />
+ * ```
+ */
+declare function useTranslateStyle(x: SharedValue<number>, y: SharedValue<number>): TranslateStyle;
+
+export { type TranslateStyle as T, applyBounds as a, useTranslateStyle as u };

package/dist/useTranslateStyle-BDrOD97O.d.ts

@@ -0,0 +1,58 @@
+import { ViewStyle } from 'react-native';
+import { SharedValue } from 'react-native-reanimated';
+
+/**
+ * Clamp `value` to `[min, max]`. When `elastic > 0` the overshoot past a
+ * bound is scaled by `elastic` instead of hard-clamped, giving a rubber-band
+ * feel. `min` / `max` may be `undefined` to leave that side unbounded.
+ *
+ * Worklet, so it runs both inside a gesture-handler pan handler on the UI
+ * thread (`useDrag`) and from a JS-thread `PanResponder` callback
+ * (`useTouchDrag`).
+ *
+ * ```ts
+ * applyBounds(120, -100, 100, 0)    // 100
+ * applyBounds(120, -100, 100, 0.5)  // 110
+ * applyBounds(50, undefined, 100, 0) // 50
+ * ```
+ */
+declare function applyBounds(value: number, min: number | undefined, max: number | undefined, elastic: number): number;
+
+/**
+ * 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.
+ */
+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} />
+ * ```
+ */
+declare function useTranslateStyle(x: SharedValue<number>, y: SharedValue<number>): TranslateStyle;
+
+export { type TranslateStyle as T, applyBounds as a, useTranslateStyle as u };

package/jest-preset.js

@@ -1,7 +1,7 @@
 // Jest preset for projects consuming `@rootnative/inertia` and its sibling
 // adapter packages (`@rootnative/inertia-gestures`, `-gradients`, `-svg`).
 //
-// Layered on top of `react-native`'s own preset. Adds:
+// Layered on top of `@react-native/jest-preset`. Adds:
 //   - the `react-native-worklets` + Reanimated mock surface Inertia exercises
 //     (worklet stubs, animation primitives, color/layout utilities)
 //   - `transformIgnorePatterns` widened so Jest transforms the published
@@ -19,7 +19,36 @@
 // If you need to allowlist additional packages for transformation, extend
 // `transformIgnorePatterns` in your own config — Jest merges over the preset.
 
-const rnPreset = require('react-native/jest-preset')
+// This package is deliberately **not** declared as a peer dependency of
+// `@rootnative/inertia`. React Native pins it to an exact version (RN 0.86.3
+// requires exactly `@react-native/jest-preset@0.86.3`), so any range we
+// declared would advertise versions that cannot install — the sdk-compat range
+// audit fails on it — and an exact pin would break on every RN patch. The
+// version relationship belongs to `react-native`, which already declares it.
+//
+// Resolve `@react-native/jest-preset` directly rather than through the
+// `react-native/jest-preset` shim. RN 0.86 moved the preset into its own
+// package and left the old path as a shim that re-exports it — but it declares
+// the new package as an **optional** peer, and no package manager installs an
+// optional peer. So on RN 0.86 the shim throws a migration error for any
+// consumer who has not installed it by hand, which is what a consumer of this
+// preset would have hit. Requiring it here means the failure names this
+// package's requirement instead.
+let rnPreset
+try {
+  rnPreset = require('@react-native/jest-preset')
+} catch (error) {
+  if (error.code === 'MODULE_NOT_FOUND') {
+    throw new Error(
+      '[inertia] `@rootnative/inertia/jest-preset` needs `@react-native/jest-preset`.\n' +
+        'React Native 0.86 moved its Jest preset into that package and declares\n' +
+        'it as an optional peer, so it is not installed for you. Add it as a\n' +
+        'devDependency at the version matching your react-native:\n\n' +
+        '  npm install --save-dev @react-native/jest-preset\n',
+    )
+  }
+  throw error
+}
 
 module.exports = {
   ...rnPreset,

package/llms.txt

@@ -88,7 +88,8 @@ import { MotionFlatList } from '@rootnative/inertia/flat-list'
 - `resolveAnimatableValue(value, base, factory?)` — one level up: resolves a full per-property `animate` value (plain target, `{ to, ...override }` step, or keyframe array → `withSequence` with sequence-level `repeat`) into one animation. Gives custom components the complete `animate` grammar.
 - `cubicBezier(x1, y1, x2, y2)` / `cubicBezier(css)` — builds a `timing.easing` value from cubic-bezier control points: four numbers, a W3C CSS `cubic-bezier(0.2, 0, 0, 1)` string (design-token form), or a CSS keyword (`'linear'` | `'ease'` | `'ease-in'` | `'ease-out'` | `'ease-in-out'`). Makes CSS-format easing tokens directly consumable — pair with named transitions to feed a theme's motion tokens into the registry. Invalid input throws (`x1`/`x2` must be within [0, 1]; `step-*` and `linear(...)` unsupported).
 - `ensureWorkletEasing(easing)` — normalizes any accepted easing input (plain function, worklet, or Reanimated 4 `EasingFunctionFactory`) into a worklet `withTiming` can consume. Only needed for manual `withTiming` calls — the resolvers and primitives apply it automatically.
-- `TRANSPARENT` — `'rgba(0, 0, 0, 0)'`, the value to seed a colour shared value with when a custom component has no other source. Not `'transparent'`: Reanimated's colour table maps that keyword to `undefined`, so it is the one CSS colour name `isColor()` rejects, and a slot resting at it cannot be animated away from — under `withTiming` the target still snaps in at the end, under `withSpring` (the default) the animation never settles. Only affects values passed to `withSpring` / `withTiming`; `interpolateColor` parses the keyword fine, so hooks that interpolate colours themselves are unaffected.
+- `TRANSPARENT` — `'rgba(0, 0, 0, 0)'`, the value to seed a colour shared value with when a custom component has no other source. It exists because Reanimated up to 4.4 mapped the CSS keyword `'transparent'` to `undefined` in its colour table, making it the one name `isColor()` rejected: a slot resting at it could not be animated away from, and under `withSpring` (the default) the animation never settled. **Reanimated 4.5 fixed that** — the keyword now maps to a real packed colour — so within the supported peer band (`>=4.5.0 <4.6.0`) either spelling animates. The constant stays exported as an explicit, unambiguous seed and as the safe choice for code that may run against an older Reanimated.
+- `TranslateStyle` / `ColorStyle` / `ShadowStyle` (types) — what `useTranslateStyle`, `useColorTransition` / `useColorCascade`, and `useShadow` return. Plain style objects, **not** Reanimated's branded `AnimatedStyleHandle`: Reanimated 4.5 brands the value `useAnimatedStyle` returns, and a branded value is rejected inside a `StyleProp` array, so stating the plain shape is what keeps a style-array call site cast-free. Same reasoning as `InterpolatedStyle<K>` above. The brand is compile-time only — the value is still the animated style Reanimated produced.
 - `SharedValue<T>` (type) — re-exported from the root entry so props/refs that carry a value-layer hook result can be typed without importing from `react-native-reanimated`.
 - `@rootnative/inertia/reanimated` — render-layer interop subpath: pure re-exports of `Animated`, `createAnimatedComponent`, `useAnimatedStyle`, `useAnimatedProps`, `useDerivedValue`, `interpolate`, `interpolateColor`, `Extrapolation`, `cancelAnimation` (plus `SharedValue` / `DerivedValue` / `AnimatedStyle` / `AnimatedProps` types) under their original Reanimated names, for components that own their own `useAnimatedStyle` worklet over Inertia-driven shared values. Names must stay original — the Reanimated Babel plugin auto-workletizes callbacks by callee name. The `with*` animation factories are deliberately not re-exported; start animations with `useAnimation` / `resolveTransition` / `buildReleaseAnimation`.
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rootnative/inertia",
-  "version": "0.0.9",
+  "version": "0.0.11",
   "description": "Declarative animation primitives for React Native, built on react-native-reanimated.",
   "license": "MIT",
   "author": "RootNative",
@@ -125,27 +125,30 @@
     "!**/*.test.*"
   ],
   "peerDependencies": {
-    "react": ">=19.0.0",
-    "react-native": ">=0.81.0",
-    "react-native-reanimated": ">=4.0.0",
-    "react-native-worklets": ">=0.5.0"
+    "@testing-library/react-native": ">=13.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",
+    "react-native-worklets": ">=0.10.0 <0.11.0"
   },
   "peerDependenciesMeta": {
-    "react-native-worklets": {
+    "@testing-library/react-native": {
       "optional": true
     }
   },
   "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",
+    "@types/react": "^19.2.0",
     "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"

package/src/config/namedTransitions.ts

@@ -1,3 +1,4 @@
+import { warnOnce } from '../internal/warnOnce'
 import { isTopLevelTransition } from '../transitions/keys'
 import {
   type NamedTransitions,
@@ -6,8 +7,6 @@ import {
   type TransitionInput,
 } from '../types'
 
-declare const __DEV__: boolean
-
 /**
  * Fallback used when a name isn't found in the registry: the library default
  * spring, matching what an omitted transition resolves to everywhere else.
@@ -26,13 +25,12 @@ export function lookupNamedTransition(
 ): TransitionConfig {
   const cfg = registry[name]
   if (cfg) return cfg
-  if (__DEV__) {
-    console.warn(
-      `[inertia] Unknown transition name "${name}" — falling back to the ` +
-        `default spring. Register it on a provider: ` +
-        `<MotionConfig transitions={{ '${name}': { ... } }}>.`,
-    )
-  }
+  warnOnce(
+    `unknown-transition:${name}`,
+    `[inertia] Unknown transition name "${name}" — falling back to the ` +
+      `default spring. Register it on a provider: ` +
+      `<MotionConfig transitions={{ '${name}': { ... } }}>.`,
+  )
   return UNKNOWN_NAME_FALLBACK
 }
 

package/src/gestureLayer/index.ts

@@ -20,3 +20,6 @@ export type {
   UseGestureLayerOptions,
   UseGestureLayerResult,
 } from './useGestureLayer'
+// The per-layer form of `UseGestureLayerOptions.transition`. Re-exported here
+// so a consumer of this subpath can name it without also importing the root.
+export type { GestureLayerTransitions } from '../types'

package/src/gestureLayer/useGestureLayer.ts

@@ -210,7 +210,10 @@ export function useGestureLayer(
   // JS-thread precompute: union of keys across all layers, per-key type
   // (number vs color), and a rest-fallback table. The worklet body reads
   // from `meta` instead of probing each layer per frame — the type check
-  // only runs when layer identities change.
+  // only runs when the layers change structurally. Keyed on a signature, not
+  // on object identity: `states` is usually an inline literal, and a fresh
+  // `meta` each render would rebuild the animated style's worklet.
+  const statesSig = stableSig(states)
   const meta = useMemo(() => {
     const layers = {
       rest: states.rest,
@@ -251,14 +254,8 @@ export function useGestureLayer(
         restRaw !== undefined ? restRaw : isColor ? 'transparent' : 0
     }
     return { layers, keys, types, restValues }
-  }, [
-    states.rest,
-    states.hovered,
-    states.focused,
-    states.focusVisible,
-    states.pressed,
-    states.disabled,
-  ])
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [statesSig])
 
   const style = useAnimatedStyle(() => {
     const { layers, keys, types, restValues } = meta

package/src/gestures/focusVisibility.ts

@@ -12,15 +12,16 @@ import { Platform } from 'react-native'
  * arrives via D-pad, screen reader, or hardware keyboard, all of which are
  * keyboard-equivalent — so `isFocusVisible()` is unconditionally `true`.
  *
- * The web listeners attach eagerly at module import (capture phase, so they
- * run before the focus event reaches the focused element) and stay installed
- * for the lifetime of the document. Eager installation matters: the very
- * first interaction with a page can be the mouse click that focuses a
- * gesture-wired element, and if the listeners only attached during that
- * focus dispatch the mousedown would already have passed unobserved —
- * leaving the default `'keyboard'` modality and drawing a focus ring for a
- * pointer interaction. They are passive and idle-cheap; the cost is one
- * boolean read per `onFocus` dispatch.
+ * The web listeners attach when the first component that tracks
+ * `focusVisible` mounts (`installFocusVisibility`, called from a mount
+ * effect), in the capture phase so they run before the focus event reaches
+ * the focused element, and they stay installed for the lifetime of the
+ * document. Mount-time installation is early enough: the click that focuses
+ * a gesture-wired element can only land on an element that is already
+ * mounted, so its `mousedown` is observed. The listeners are not attached at
+ * import time — `@rootnative/inertia` declares `sideEffects: false`, and an
+ * import-time listener would make that declaration false. They are passive
+ * and idle-cheap; the cost is one boolean read per `onFocus` dispatch.
  */
 
 type InputModality = 'keyboard' | 'pointer'
@@ -38,7 +39,14 @@ function setPointer() {
   modality = 'pointer'
 }
 
-function ensureInstalled(): void {
+/**
+ * Attach the document listeners that track input modality on web. Idempotent
+ * and a no-op on native or without a `document`. Call it from a mount effect
+ * of any component that reads `isFocusVisible()`, so the pointer event that
+ * precedes the first focus is observed (see module doc above).
+ * `isFocusVisible` also calls it as a safety net.
+ */
+export function installFocusVisibility(): void {
   if (installed) return
   if (Platform.OS !== 'web') return
   if (typeof document === 'undefined') return
@@ -49,12 +57,6 @@ function ensureInstalled(): void {
   installed = true
 }
 
-// Install at import time so the pointer event that precedes the first focus
-// is observed (see module doc above). `ensureInstalled` stays in
-// `isFocusVisible` as a safety net for environments where `document` appears
-// after import.
-ensureInstalled()
-
 /**
  * `true` if the next `onFocus` should be treated as "focus-visible" (keyboard
  * focus). On native, always `true`. On web, reflects the most recent user
@@ -62,7 +64,7 @@ ensureInstalled()
  */
 export function isFocusVisible(): boolean {
   if (Platform.OS !== 'web') return true
-  ensureInstalled()
+  installFocusVisibility()
   return modality === 'keyboard'
 }
 

package/src/gestures/index.ts

@@ -1 +1 @@
-export { isFocusVisible } from './focusVisibility'
+export { installFocusVisibility, isFocusVisible } from './focusVisibility'

package/src/index.ts

@@ -42,12 +42,18 @@ export {
   resolveTransition,
   resolveAnimatableValue,
   ensureWorkletEasing,
+  isTopLevelTransition,
+  stableSig,
   type AnimationCallback,
+  type CallbackFactory,
 } from './transitions'
 // Seed value for any color shared value a custom animated component drives
 // through `resolveTransition`. Exported because the obvious choice —
 // `'transparent'` — cannot be animated away from; see the symbol's own docs.
 export { TRANSPARENT } from './internal/color'
+// Worklet-safe clamp shared by `useTouchDrag` and the gesture adapters'
+// `useDrag`; exported so a custom drag can apply the same rubber-band rule.
+export { applyBounds } from './touch/applyBounds'
 export {
   useAnimation,
   useAnimator,
@@ -61,6 +67,7 @@ export {
   useShadow,
   useSpring,
   useTransform,
+  useTranslateStyle,
   useVariants,
 } from './values'
 // The value-layer hooks above all return Reanimated `SharedValue`s — export
@@ -72,12 +79,15 @@ export type {
   Animator,
   BoxShadowLayer,
   ColorCascadeLayer,
+  ColorStyle,
   ColorStyleKey,
   ExtrapolationMode,
   InterpolatedStyle,
   InterpolatedStyleMap,
+  TranslateStyle,
   NumericStyleKey,
   ShadowConfig,
+  ShadowStyle,
   TransformKey,
   UseColorCascadeOptions,
   UseColorTransitionOptions,
@@ -97,8 +107,10 @@ export type {
   EasingFunction,
   EasingFunctionFactory,
   EasingInput,
+  GestureLayerTransitions,
   GestureSubStates,
   MotionComponent,
+  MotionComponentProps,
   MotionProps,
   NamedTransitions,
   NoAnimationTransition,

package/src/internal/boxShadow.ts

@@ -164,7 +164,7 @@ export function resolveBoxShadowInput(
     offsetY: coerceLength(layer.offsetY, 'offsetY'),
     blurRadius: coerceLength(layer.blurRadius, 'blurRadius'),
     spreadDistance: coerceLength(layer.spreadDistance, 'spreadDistance'),
-    color: layer.color ?? 'black',
+    color: coerceColor(layer.color),
     inset: layer.inset ?? false,
   }))
 }
@@ -273,7 +273,10 @@ export type BoxShadowInput =
       // rejected) by `coerceLength` like every other length.
       blurRadius?: unknown
       spreadDistance?: number | string | undefined
-      color?: string | undefined
+      // `unknown` because RN 0.86 widened this from `string` to `ColorValue`,
+      // which includes the opaque handle `PlatformColor()` returns. Coerced
+      // (and rejected) by `coerceColor`.
+      color?: unknown
       inset?: boolean | undefined
     }>
 
@@ -284,6 +287,25 @@ export type BoxShadowInput =
  * `parseBoxShadow` — px and unitless only, and anything else throws rather
  * than silently animating from a `NaN`.
  */
+/**
+ * Coerce one RN colour field to a string.
+ *
+ * RN 0.86 widened `BoxShadowValue.color` from `string` to `ColorValue`, which
+ * admits the opaque handle `PlatformColor()` and `DynamicColorIOS()` return.
+ * That handle is a platform reference, not a colour this code can read, so it
+ * cannot be interpolated. Reject it here with a message that names the cause,
+ * rather than letting it reach the worklet and animate to `NaN`.
+ */
+function coerceColor(value: unknown): string {
+  if (value === undefined) return 'black'
+  if (typeof value === 'string') return value
+  throw new Error(
+    '[inertia] boxShadow: color must be a colour string, got ' +
+      `${typeof value}. PlatformColor and DynamicColorIOS values cannot be ` +
+      'interpolated — pass a string colour on an animated shadow.',
+  )
+}
+
 function coerceLength(value: unknown, field: string): number {
   if (value === undefined) return 0
   if (typeof value === 'number') return value

package/src/layout/resolveLayout.ts

@@ -1,4 +1,5 @@
 import { LinearTransition } from 'react-native-reanimated'
+import { DEFAULT_LAYOUT_DURATION } from '../transitions/constants'
 import { ensureWorkletEasing } from '../transitions/easing'
 import { DEFAULT_SPRING, springToReanimated } from '../transitions/spring'
 import { type TransitionConfig } from '../types'
@@ -34,7 +35,9 @@ export function resolveLayoutTransition(
   if (cfg.type === 'no-animation') return undefined
 
   if (cfg.type === 'timing') {
-    let builder = LinearTransition.duration(cfg.duration ?? 300)
+    let builder = LinearTransition.duration(
+      cfg.duration ?? DEFAULT_LAYOUT_DURATION,
+    )
     const easing = ensureWorkletEasing(cfg.easing)
     if (easing) builder = builder.easing(easing)
     if (cfg.delay) builder = builder.delay(cfg.delay)

package/src/layout/useSharedLayout.ts

@@ -15,6 +15,7 @@ import {
   withSpring,
   withTiming,
 } from 'react-native-reanimated'
+import { DEFAULT_LAYOUT_DURATION } from '../transitions/constants'
 import { DEFAULT_SPRING, springToReanimated } from '../transitions/spring'
 import { type SpringTransition, type TransitionConfig } from '../types'
 import { measureWindowRect } from './measureWindow'
@@ -334,7 +335,7 @@ function legBuilder(
   transition: TransitionConfig | undefined,
 ): (from: number, to: number) => number {
   if (transition?.type === 'timing') {
-    const duration = transition.duration ?? 300
+    const duration = transition.duration ?? DEFAULT_LAYOUT_DURATION
     return (from, to) =>
       withSequence(
         withTiming(from, { duration: 0 }),