react-native-gtkx 0.2.0-alpha.2 → 0.3.0-alpha.1

package/dist/reanimated-compat/layout-animation-runtime.js

@@ -0,0 +1,311 @@
+// Driving a built layout-animation config against a real GTK widget.
+//
+// The builders in layout-animation.ts produce upstream's own
+// `{ initialValues, animations, callback }`, keyed by style property. This
+// file is the half that knows where each of those properties can actually go
+// on this platform, and it is the same three doors every other animated write
+// here uses — `gtk_widget_set_opacity`, the rect store's transform, and (new)
+// the rect store's layout offset. No React render, no Yoga pass, no second
+// clock: every animation is built with the platform's own engine on the
+// platform's own frame scheduler, exactly as `withTiming` on a shared value
+// is.
+//
+// WHAT IS HONOURED, and the one thing that is not:
+//
+//   `opacity`             → the widget, per frame.
+//   `transform`           → the rect store's transform slot, per frame.
+//   `originX` / `originY` → the rect store's LAYOUT offset, per frame, as the
+//                           distance still to travel from where the child was
+//                           to where the engine put it. This is what makes
+//                           `LinearTransition` a paint-only animation.
+//   `width` / `height`    → applied by the layout engine immediately, not
+//                           animated. `LinearTransition` always emits them,
+//                           and animating a size means a Yoga pass per frame
+//                           whose cost is the tree's rather than the value's
+//                           (63.9 µs at five children, 496.3 µs at three
+//                           hundred — docs/research/animated-colors.md). This
+//                           is the same refusal `useAnimatedStyle` already
+//                           makes for layout properties, and it is the reason
+//                           the position is animated with a translation.
+//
+// Anything else is named once, per property, per session — the platform's
+// standing rule that an undriveable property must be visible rather than
+// dropped.
+import { clearStoredLayoutOffset, deferDuringAllocate, setStoredLayoutOffset, setStoredTransform, } from "../components/rect-store";
+import { parseAngle } from "../style/transform";
+import { queueAllocate } from "../gtkx/bridge/index";
+import { buildAnimation, isAnimationSpec, } from "./animation";
+// Emitted by LinearTransition on every run and honoured by the layout engine
+// on the next commit rather than per frame — see the header.
+const SIZE_PROPERTIES = new Set(["width", "height"]);
+const warned = new Set();
+const warnUndriveable = (property) => {
+    if (warned.has(property)) {
+        return;
+    }
+    warned.add(property);
+    const isProduction = typeof process !== "undefined" && process.env.NODE_ENV === "production";
+    if (isProduction) {
+        return;
+    }
+    console.warn(`react-native-reanimated: a layout animation asked for \`${property}\`, which react-native-gtkx cannot ` +
+        "write to a mounted widget without a React render. Layout animations drive `opacity`, `transform` and " +
+        "position here. See docs/api.md.");
+};
+/** @internal Test seam: the warning is once per property per session. */
+export const resetLayoutAnimationWarnings = () => {
+    warned.clear();
+};
+const numberOrNull = (value) => typeof value === "number" && Number.isFinite(value) ? value : null;
+const clamp01 = (value) => Math.min(1, Math.max(0, value));
+/**
+ * Runs one built config against one widget.
+ *
+ * `values` is what the builder was handed, and the runtime needs it back:
+ * `originX`/`originY` animate towards `target*`, so the offset to write is
+ * the driven value minus that target.
+ */
+export const runLayoutAnimation = (engine, target, config, values, onEnd) => {
+    const { widget, parentWidget } = target;
+    // --- the three doors ---------------------------------------------------
+    // A `layout` transition's first write happens INSIDE a GTK allocation pass
+    // — the engine flushes there, the commit hands the new rect to the rect
+    // store, and the observer that starts this animation runs on that write —
+    // and queueing an allocation from inside one is what `deferDuringAllocate`
+    // exists to stop. Keyed on a token private to this animation so it can
+    // never displace the commit's own deferred job for the same widget.
+    const allocateToken = {};
+    // The container to re-allocate, and it is NOT always the one the caller
+    // named. An `entering` animation starts from a layout effect, and React
+    // attaches refs from the leaves up — so a view mounting in the same commit
+    // as its container sees `parentWidget` null, because the container's own
+    // ref has not been assigned yet. The widget is already PARENTED by then
+    // (the reconciler's mutation phase runs before any layout effect), so GTK
+    // itself has the answer. Without this, every transform- or position-driven
+    // entering animation wrote its frames into the rect store and never asked
+    // anyone to draw them: the first allocation picked up the initial value and
+    // the view froze there — a `ZoomIn` that mounts at scale 0 and stays.
+    let container = parentWidget;
+    const requestAllocate = () => {
+        container ??= widget.getParent();
+        const containerWidget = container;
+        if (!containerWidget) {
+            return;
+        }
+        const queue = () => queueAllocate(containerWidget);
+        if (!deferDuringAllocate(allocateToken, queue)) {
+            queue();
+        }
+    };
+    // The live transform array, mutated in place and re-published whole, the
+    // same shape src/components/animated.tsx keeps for a driven style.
+    let transformParts = [];
+    const flushTransform = () => {
+        setStoredTransform(widget, transformParts);
+        requestAllocate();
+    };
+    let offsetX = 0;
+    let offsetY = 0;
+    let hasOffset = false;
+    const flushOffset = () => {
+        hasOffset = true;
+        setStoredLayoutOffset(widget, offsetX, offsetY);
+        requestAllocate();
+    };
+    const opacityChannel = {
+        apply(value) {
+            const numeric = numberOrNull(value);
+            if (numeric !== null) {
+                widget.setOpacity(clamp01(numeric));
+            }
+        },
+        start(value) {
+            return numberOrNull(value);
+        },
+        push(value) {
+            widget.setOpacity(clamp01(value));
+        },
+    };
+    const originChannel = (axis) => {
+        const targetValue = axis === "x" ? values.targetOriginX : values.targetOriginY;
+        const write = (offset) => {
+            if (axis === "x") {
+                offsetX = offset;
+            }
+            else {
+                offsetY = offset;
+            }
+            flushOffset();
+        };
+        return {
+            apply(value) {
+                const numeric = numberOrNull(value);
+                if (numeric !== null) {
+                    write(numeric - targetValue);
+                }
+            },
+            start(value) {
+                return numberOrNull(value);
+            },
+            push(value) {
+                write(value - targetValue);
+            },
+        };
+    };
+    // An angle slot takes upstream's own spelling as well as a number: the
+    // catalogue emits degrees (a numeric animation cannot carry a unit), but
+    // `.withInitialValues({ transform: [{ rotate: "45deg" }] })` is written by
+    // hand and would otherwise be dropped as "not a number". `parseAngle` is
+    // the same reader src/style/transform.ts uses to build the matrix, so both
+    // spellings land on the same rotation.
+    const ANGLE_KEYS = new Set(["rotate", "rotateZ"]);
+    const transformChannel = (index, key) => {
+        const read = ANGLE_KEYS.has(key)
+            ? (value) => parseAngle(value)
+            : numberOrNull;
+        return {
+            apply(value) {
+                const numeric = read(value);
+                if (numeric !== null) {
+                    transformParts[index] = { [key]: numeric };
+                    flushTransform();
+                }
+            },
+            start(value) {
+                return read(value);
+            },
+            push(value) {
+                transformParts[index] = { [key]: value };
+                flushTransform();
+            },
+        };
+    };
+    // --- initial values ----------------------------------------------------
+    const channelFor = (property) => {
+        if (property === "opacity") {
+            return opacityChannel;
+        }
+        if (property === "originX") {
+            return originChannel("x");
+        }
+        if (property === "originY") {
+            return originChannel("y");
+        }
+        if (SIZE_PROPERTIES.has(property)) {
+            return null;
+        }
+        warnUndriveable(property);
+        return null;
+    };
+    const eachTransformEntry = (source, visit) => {
+        if (!Array.isArray(source)) {
+            return;
+        }
+        source.forEach((entry, index) => {
+            if (typeof entry !== "object" || entry === null) {
+                return;
+            }
+            for (const [key, value] of Object.entries(entry)) {
+                visit(index, key, value);
+            }
+        });
+    };
+    // The transform array is seeded whole from the initial values so a static
+    // entry beside an animated one keeps its place in the composition order.
+    const initialTransform = config.initialValues.transform;
+    if (Array.isArray(initialTransform)) {
+        transformParts = initialTransform.map((entry) => typeof entry === "object" && entry !== null
+            ? { ...entry }
+            : {});
+        flushTransform();
+    }
+    for (const [property, value] of Object.entries(config.initialValues)) {
+        if (property === "transform") {
+            continue;
+        }
+        channelFor(property)?.apply(value);
+    }
+    const jobs = [];
+    const collect = (property, value, channel, initial) => {
+        if (channel === null) {
+            return;
+        }
+        if (!isAnimationSpec(value)) {
+            channel.apply(value);
+            return;
+        }
+        const from = channel.start(initial);
+        if (from === null) {
+            warnUndriveable(property);
+            return;
+        }
+        jobs.push({ channel, spec: value, from });
+    };
+    for (const [property, value] of Object.entries(config.animations)) {
+        if (property === "transform") {
+            eachTransformEntry(value, (index, key, entry) => {
+                const initial = transformParts[index]?.[key];
+                collect(`transform.${key}`, entry, transformChannel(index, key), initial);
+            });
+            continue;
+        }
+        collect(property, value, channelFor(property), config.initialValues[property]);
+    }
+    const running = [];
+    let settled = false;
+    let pending = jobs.length;
+    let allFinished = true;
+    const finish = () => {
+        if (settled) {
+            return;
+        }
+        settled = true;
+        if (hasOffset) {
+            clearStoredLayoutOffset(widget);
+            requestAllocate();
+        }
+        config.callback?.(allFinished);
+        onEnd?.(allFinished);
+    };
+    for (const job of jobs) {
+        const driver = new engine.api.Value(job.from);
+        const listener = driver.addListener(({ value }) => {
+            job.channel.push(value);
+        });
+        const animation = buildAnimation(engine, driver, job.spec);
+        running.push({
+            stop: () => {
+                animation.stop();
+                driver.removeListener(listener);
+            },
+        });
+        animation.start((result) => {
+            driver.removeListener(listener);
+            if (!result.finished) {
+                allFinished = false;
+            }
+            pending -= 1;
+            if (pending === 0) {
+                finish();
+            }
+        });
+    }
+    if (jobs.length === 0) {
+        // Nothing to drive is still a completed animation: whoever is holding a
+        // widget for this must be released, or it is held until the timer.
+        finish();
+    }
+    return {
+        stop() {
+            if (settled) {
+                return;
+            }
+            allFinished = false;
+            for (const animation of running) {
+                animation.stop();
+            }
+            finish();
+        },
+    };
+};
+//# sourceMappingURL=layout-animation-runtime.js.map

package/dist/reanimated-compat/layout-animation-runtime.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"layout-animation-runtime.js","sourceRoot":"","sources":["../../src/reanimated-compat/layout-animation-runtime.ts"],"names":[],"mappings":"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","sourcesContent":["// Driving a built layout-animation config against a real GTK widget.\n//\n// The builders in layout-animation.ts produce upstream's own\n// `{ initialValues, animations, callback }`, keyed by style property. This\n// file is the half that knows where each of those properties can actually go\n// on this platform, and it is the same three doors every other animated write\n// here uses — `gtk_widget_set_opacity`, the rect store's transform, and (new)\n// the rect store's layout offset. No React render, no Yoga pass, no second\n// clock: every animation is built with the platform's own engine on the\n// platform's own frame scheduler, exactly as `withTiming` on a shared value\n// is.\n//\n// WHAT IS HONOURED, and the one thing that is not:\n//\n//   `opacity`             → the widget, per frame.\n//   `transform`           → the rect store's transform slot, per frame.\n//   `originX` / `originY` → the rect store's LAYOUT offset, per frame, as the\n//                           distance still to travel from where the child was\n//                           to where the engine put it. This is what makes\n//                           `LinearTransition` a paint-only animation.\n//   `width` / `height`    → applied by the layout engine immediately, not\n//                           animated. `LinearTransition` always emits them,\n//                           and animating a size means a Yoga pass per frame\n//                           whose cost is the tree's rather than the value's\n//                           (63.9 µs at five children, 496.3 µs at three\n//                           hundred — docs/research/animated-colors.md). This\n//                           is the same refusal `useAnimatedStyle` already\n//                           makes for layout properties, and it is the reason\n//                           the position is animated with a translation.\n//\n// Anything else is named once, per property, per session — the platform's\n// standing rule that an undriveable property must be visible rather than\n// dropped.\nimport {\n  clearStoredLayoutOffset,\n  deferDuringAllocate,\n  setStoredLayoutOffset,\n  setStoredTransform,\n} from \"../components/rect-store\"\nimport { parseAngle } from \"../style/transform\"\nimport type { TransformPart } from \"../contracts\"\nimport type { Gtk } from \"../gtkx/bridge/index\"\nimport { queueAllocate } from \"../gtkx/bridge/index\"\nimport {\n  buildAnimation,\n  isAnimationSpec,\n  type AnimationEngine,\n  type AnimationSpec,\n} from \"./animation\"\nimport type {\n  BuiltLayoutAnimation,\n  LayoutAnimationValues,\n} from \"./layout-animation\"\n\nexport type LayoutAnimationTarget = {\n  widget: Gtk.Widget\n  parentWidget: Gtk.Widget | null\n}\n\nexport type RunningLayoutAnimation = {\n  /** Cuts the animation short. The callback still fires, with `false`. */\n  stop(): void\n}\n\n// Emitted by LinearTransition on every run and honoured by the layout engine\n// on the next commit rather than per frame — see the header.\nconst SIZE_PROPERTIES = new Set([\"width\", \"height\"])\n\nconst warned = new Set<string>()\n\nconst warnUndriveable = (property: string): void => {\n  if (warned.has(property)) {\n    return\n  }\n  warned.add(property)\n  const isProduction =\n    typeof process !== \"undefined\" && process.env.NODE_ENV === \"production\"\n  if (isProduction) {\n    return\n  }\n  console.warn(\n    `react-native-reanimated: a layout animation asked for \\`${property}\\`, which react-native-gtkx cannot ` +\n      \"write to a mounted widget without a React render. Layout animations drive `opacity`, `transform` and \" +\n      \"position here. See docs/api.md.\",\n  )\n}\n\n/** @internal Test seam: the warning is once per property per session. */\nexport const resetLayoutAnimationWarnings = (): void => {\n  warned.clear()\n}\n\nconst numberOrNull = (value: unknown): number | null =>\n  typeof value === \"number\" && Number.isFinite(value) ? value : null\n\ntype Channel = {\n  /** Applies an immediate value from `initialValues`. */\n  apply(value: unknown): void\n  /** The value an animation on this property should start from. */\n  start(value: unknown): number | null\n  /** Pushes a driven value. */\n  push(value: number): void\n}\n\nconst clamp01 = (value: number): number => Math.min(1, Math.max(0, value))\n\n/**\n * Runs one built config against one widget.\n *\n * `values` is what the builder was handed, and the runtime needs it back:\n * `originX`/`originY` animate towards `target*`, so the offset to write is\n * the driven value minus that target.\n */\nexport const runLayoutAnimation = (\n  engine: AnimationEngine,\n  target: LayoutAnimationTarget,\n  config: BuiltLayoutAnimation,\n  values: LayoutAnimationValues,\n  onEnd?: (finished: boolean) => void,\n): RunningLayoutAnimation => {\n  const { widget, parentWidget } = target\n\n  // --- the three doors ---------------------------------------------------\n\n  // A `layout` transition's first write happens INSIDE a GTK allocation pass\n  // — the engine flushes there, the commit hands the new rect to the rect\n  // store, and the observer that starts this animation runs on that write —\n  // and queueing an allocation from inside one is what `deferDuringAllocate`\n  // exists to stop. Keyed on a token private to this animation so it can\n  // never displace the commit's own deferred job for the same widget.\n  const allocateToken = {}\n\n  // The container to re-allocate, and it is NOT always the one the caller\n  // named. An `entering` animation starts from a layout effect, and React\n  // attaches refs from the leaves up — so a view mounting in the same commit\n  // as its container sees `parentWidget` null, because the container's own\n  // ref has not been assigned yet. The widget is already PARENTED by then\n  // (the reconciler's mutation phase runs before any layout effect), so GTK\n  // itself has the answer. Without this, every transform- or position-driven\n  // entering animation wrote its frames into the rect store and never asked\n  // anyone to draw them: the first allocation picked up the initial value and\n  // the view froze there — a `ZoomIn` that mounts at scale 0 and stays.\n  let container: Gtk.Widget | null = parentWidget\n  const requestAllocate = (): void => {\n    container ??= widget.getParent() as Gtk.Widget | null\n    const containerWidget = container\n    if (!containerWidget) {\n      return\n    }\n    const queue = (): void => queueAllocate(containerWidget)\n    if (!deferDuringAllocate(allocateToken, queue)) {\n      queue()\n    }\n  }\n\n  // The live transform array, mutated in place and re-published whole, the\n  // same shape src/components/animated.tsx keeps for a driven style.\n  let transformParts: Record<string, number | string>[] = []\n  const flushTransform = (): void => {\n    setStoredTransform(widget, transformParts as unknown as TransformPart[])\n    requestAllocate()\n  }\n\n  let offsetX = 0\n  let offsetY = 0\n  let hasOffset = false\n  const flushOffset = (): void => {\n    hasOffset = true\n    setStoredLayoutOffset(widget, offsetX, offsetY)\n    requestAllocate()\n  }\n\n  const opacityChannel: Channel = {\n    apply(value) {\n      const numeric = numberOrNull(value)\n      if (numeric !== null) {\n        widget.setOpacity(clamp01(numeric))\n      }\n    },\n    start(value) {\n      return numberOrNull(value)\n    },\n    push(value) {\n      widget.setOpacity(clamp01(value))\n    },\n  }\n\n  const originChannel = (axis: \"x\" | \"y\"): Channel => {\n    const targetValue =\n      axis === \"x\" ? values.targetOriginX : values.targetOriginY\n    const write = (offset: number): void => {\n      if (axis === \"x\") {\n        offsetX = offset\n      } else {\n        offsetY = offset\n      }\n      flushOffset()\n    }\n    return {\n      apply(value) {\n        const numeric = numberOrNull(value)\n        if (numeric !== null) {\n          write(numeric - targetValue)\n        }\n      },\n      start(value) {\n        return numberOrNull(value)\n      },\n      push(value) {\n        write(value - targetValue)\n      },\n    }\n  }\n\n  // An angle slot takes upstream's own spelling as well as a number: the\n  // catalogue emits degrees (a numeric animation cannot carry a unit), but\n  // `.withInitialValues({ transform: [{ rotate: \"45deg\" }] })` is written by\n  // hand and would otherwise be dropped as \"not a number\". `parseAngle` is\n  // the same reader src/style/transform.ts uses to build the matrix, so both\n  // spellings land on the same rotation.\n  const ANGLE_KEYS = new Set([\"rotate\", \"rotateZ\"])\n\n  const transformChannel = (index: number, key: string): Channel => {\n    const read = ANGLE_KEYS.has(key)\n      ? (value: unknown): number | null => parseAngle(value)\n      : numberOrNull\n    return {\n      apply(value) {\n        const numeric = read(value)\n        if (numeric !== null) {\n          transformParts[index] = { [key]: numeric }\n          flushTransform()\n        }\n      },\n      start(value) {\n        return read(value)\n      },\n      push(value) {\n        transformParts[index] = { [key]: value }\n        flushTransform()\n      },\n    }\n  }\n\n  // --- initial values ----------------------------------------------------\n\n  const channelFor = (property: string): Channel | null => {\n    if (property === \"opacity\") {\n      return opacityChannel\n    }\n    if (property === \"originX\") {\n      return originChannel(\"x\")\n    }\n    if (property === \"originY\") {\n      return originChannel(\"y\")\n    }\n    if (SIZE_PROPERTIES.has(property)) {\n      return null\n    }\n    warnUndriveable(property)\n    return null\n  }\n\n  const eachTransformEntry = (\n    source: unknown,\n    visit: (index: number, key: string, value: unknown) => void,\n  ): void => {\n    if (!Array.isArray(source)) {\n      return\n    }\n    source.forEach((entry, index) => {\n      if (typeof entry !== \"object\" || entry === null) {\n        return\n      }\n      for (const [key, value] of Object.entries(entry)) {\n        visit(index, key, value)\n      }\n    })\n  }\n\n  // The transform array is seeded whole from the initial values so a static\n  // entry beside an animated one keeps its place in the composition order.\n  const initialTransform = config.initialValues.transform\n  if (Array.isArray(initialTransform)) {\n    transformParts = initialTransform.map((entry) =>\n      typeof entry === \"object\" && entry !== null\n        ? ({ ...entry } as Record<string, number | string>)\n        : {},\n    )\n    flushTransform()\n  }\n\n  for (const [property, value] of Object.entries(config.initialValues)) {\n    if (property === \"transform\") {\n      continue\n    }\n    channelFor(property)?.apply(value)\n  }\n\n  // --- the animations ----------------------------------------------------\n\n  type Job = { channel: Channel; spec: AnimationSpec; from: number }\n  const jobs: Job[] = []\n\n  const collect = (\n    property: string,\n    value: unknown,\n    channel: Channel | null,\n    initial: unknown,\n  ): void => {\n    if (channel === null) {\n      return\n    }\n    if (!isAnimationSpec(value)) {\n      channel.apply(value)\n      return\n    }\n    const from = channel.start(initial)\n    if (from === null) {\n      warnUndriveable(property)\n      return\n    }\n    jobs.push({ channel, spec: value, from })\n  }\n\n  for (const [property, value] of Object.entries(config.animations)) {\n    if (property === \"transform\") {\n      eachTransformEntry(value, (index, key, entry) => {\n        const initial = transformParts[index]?.[key]\n        collect(\n          `transform.${key}`,\n          entry,\n          transformChannel(index, key),\n          initial,\n        )\n      })\n      continue\n    }\n    collect(\n      property,\n      value,\n      channelFor(property),\n      config.initialValues[property],\n    )\n  }\n\n  const running: { stop(): void }[] = []\n  let settled = false\n  let pending = jobs.length\n  let allFinished = true\n\n  const finish = (): void => {\n    if (settled) {\n      return\n    }\n    settled = true\n    if (hasOffset) {\n      clearStoredLayoutOffset(widget)\n      requestAllocate()\n    }\n    config.callback?.(allFinished)\n    onEnd?.(allFinished)\n  }\n\n  for (const job of jobs) {\n    const driver = new engine.api.Value(job.from)\n    const listener = driver.addListener(({ value }) => {\n      job.channel.push(value)\n    })\n    const animation = buildAnimation(engine, driver, job.spec)\n    running.push({\n      stop: () => {\n        animation.stop()\n        driver.removeListener(listener)\n      },\n    })\n    animation.start((result) => {\n      driver.removeListener(listener)\n      if (!result.finished) {\n        allFinished = false\n      }\n      pending -= 1\n      if (pending === 0) {\n        finish()\n      }\n    })\n  }\n\n  if (jobs.length === 0) {\n    // Nothing to drive is still a completed animation: whoever is holding a\n    // widget for this must be released, or it is held until the timer.\n    finish()\n  }\n\n  return {\n    stop() {\n      if (settled) {\n        return\n      }\n      allFinished = false\n      for (const animation of running) {\n        animation.stop()\n      }\n      finish()\n    },\n  }\n}\n"]}

package/dist/reanimated-compat/layout-animation-view.d.ts

@@ -0,0 +1,27 @@
+import { type ComponentProps, type ElementType, type ReactNode } from "react";
+import type { LayoutAnimationBuilderLike } from "./layout-animation";
+/** What `entering`, `exiting` and `layout` accept: a builder, or its class. */
+export type LayoutAnimationProps = {
+    /** Runs once, when the component mounts. */
+    entering?: LayoutAnimationBuilderLike | false | null;
+    /**
+     * Runs when the component unmounts, on a widget the platform keeps on
+     * screen for the duration. Ignored when the component's own container is
+     * unmounting in the same commit — there would be nothing left to animate
+     * inside.
+     */
+    exiting?: LayoutAnimationBuilderLike | false | null;
+    /** Runs whenever the layout engine commits a new position for this child. */
+    layout?: LayoutAnimationBuilderLike | false | null;
+};
+/** @internal Test seam: the warning is once per component per session. */
+export declare const resetLayoutAnimationComponentWarnings: () => void;
+/** The props a layout-animated wrapper adds on top of the component's own. */
+export type LayoutAnimatedComponent<C extends ElementType> = (props: ComponentProps<C> & LayoutAnimationProps) => ReactNode;
+/**
+ * Adds `entering`, `exiting` and `layout` to an animated component.
+ *
+ * The rendered output is byte-for-byte what the wrapped component produces —
+ * the wrapper is a function component with no host element of its own.
+ */
+export declare const withLayoutAnimations: <C extends ElementType>(component: C) => LayoutAnimatedComponent<C>;

package/dist/reanimated-compat/layout-animation-view.js

@@ -0,0 +1,266 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+// `entering`, `exiting` and `layout` on an animated component.
+//
+// The three props are added by WRAPPING, not by changing the platform's
+// `Animated.View`: the wrapper renders the component it was given, adds no
+// widget to the tree, and reaches the real one through the handle that
+// component already exposes — the same seam `createAnimatedComponent` uses.
+// That is what lets `Animated.Text` and anything through
+// `createAnimatedComponent` take a layout animation on exactly the same
+// terms as `Animated.View`.
+//
+// WHY THE WRAPPER IS WHERE `exiting` LIVES, and this is the whole reason it
+// exists as a component rather than a hook inside the platform: React runs a
+// deleted subtree's layout-effect cleanups from the OUTSIDE IN, and unparents
+// its topmost widget last. A cleanup registered here — one component above
+// the one that owns the widget — therefore runs at the only moment when the
+// widget is still parented, its Yoga node still alive and its layout manager
+// still attached. It hands all three to the platform's retention primitive
+// (src/components/widget-retention.ts), which puts the widget back after the
+// reconciler takes it out and holds everything else until the fade ends or
+// the fallback timer fires.
+//
+// The other two need nothing new. `entering` is "write the initial values on
+// mount and animate to the real ones"; `layout` is "the engine committed a
+// different rect for this child, so walk it there from where it was" — both
+// are snapshot-measure-animate, which is exactly what upstream's own web
+// implementation does on its single thread.
+import { useInsertionEffect, useLayoutEffect, useRef, useState, } from "react";
+import { Dimensions } from "../apis/index";
+import { Animated as PlatformAnimated } from "../components/animated";
+import { glibScheduler } from "../components/frame-scheduler";
+import { useHostNode } from "../components/host-node";
+import { widgetForHandle } from "../components/measure";
+import { getStoredLayoutOffset, getStoredRect, observeStoredRect, } from "../components/rect-store";
+import { retainWidget, } from "../components/widget-retention";
+import { computePointInWindow } from "../gtkx/bridge/index";
+import { useLayoutAnimationSkip } from "./layout-animation-config";
+import { runLayoutAnimation, } from "./layout-animation-runtime";
+/**
+ * How much longer than the animation itself a widget may be retained before
+ * the fallback drops it. The timer exists for the case where the animation
+ * never reports an end at all, so the margin only has to cover the ordinary
+ * jitter of a frame source — not a whole animation.
+ */
+const RETENTION_MARGIN_MS = 500;
+const ZERO_RECT = { x: 0, y: 0, width: 0, height: 0 };
+// The platform's own Animated api and the frame scheduler behind it: the same
+// pair every other animation in this surface runs on, so a layout animation
+// adds no second clock.
+const ENGINE = {
+    api: PlatformAnimated,
+    scheduler: glibScheduler,
+};
+const retainForExit = (widget, parentWidget, builder, stop) => retainWidget(widget, parentWidget, {
+    // The fallback covers a frame source that never delivers an end, so it
+    // only has to outlast the animation the builder describes.
+    fallbackMs: builder.getMaxDuration() + RETENTION_MARGIN_MS,
+    onRelease: stop,
+});
+const warnedWithoutWidget = new Set();
+const warnNoWidget = (name) => {
+    if (warnedWithoutWidget.has(name)) {
+        return;
+    }
+    warnedWithoutWidget.add(name);
+    const isProduction = typeof process !== "undefined" && process.env.NODE_ENV === "production";
+    if (!isProduction) {
+        console.warn(`react-native-reanimated: ${name} was given an \`entering\`, \`exiting\` or \`layout\` animation, but ` +
+            "the component exposed no ref carrying a widget, so there is nothing to animate. Put the animation on " +
+            "an `Animated.View`, or give the component a `ref` built with the platform's own measure handle. " +
+            "See docs/api.md.");
+    }
+};
+/** @internal Test seam: the warning is once per component per session. */
+export const resetLayoutAnimationComponentWarnings = () => {
+    warnedWithoutWidget.clear();
+};
+const valuesFor = (widget, current, target) => {
+    const window = Dimensions.get("window");
+    // One FFI call per animation START (never per frame), so a builder reading
+    // the global origin gets a real answer rather than a parent-relative one
+    // wearing its name.
+    const page = computePointInWindow(widget, 0, 0);
+    const dx = page ? page.x - target.x : 0;
+    const dy = page ? page.y - target.y : 0;
+    return {
+        targetOriginX: target.x,
+        targetOriginY: target.y,
+        targetWidth: target.width,
+        targetHeight: target.height,
+        targetGlobalOriginX: target.x + dx,
+        targetGlobalOriginY: target.y + dy,
+        currentOriginX: current.x,
+        currentOriginY: current.y,
+        currentWidth: current.width,
+        currentHeight: current.height,
+        currentGlobalOriginX: current.x + dx,
+        currentGlobalOriginY: current.y + dy,
+        windowWidth: window.width,
+        windowHeight: window.height,
+    };
+};
+const displayNameOf = (component) => {
+    if (typeof component === "string") {
+        return component;
+    }
+    const named = component;
+    return named?.displayName ?? named?.name ?? "Component";
+};
+/**
+ * Adds `entering`, `exiting` and `layout` to an animated component.
+ *
+ * The rendered output is byte-for-byte what the wrapped component produces —
+ * the wrapper is a function component with no host element of its own.
+ */
+export const withLayoutAnimations = (component) => {
+    const name = displayNameOf(component);
+    const LayoutAnimated = ({ entering, exiting, layout, ref, ...rest }) => {
+        const host = useHostNode();
+        const handleRef = useRef(null);
+        // Null unless a `<LayoutAnimationConfig>` is above. Captured once and read
+        // from inside the effects below: the object identity is stable for the
+        // life of that wrapper, and both of its flags are only meaningful at the
+        // moment the effect (or its cleanup) actually runs.
+        const skip = useLayoutAnimationSkip();
+        // Read by an unmount cleanup and by a rect observer, both of which
+        // outlive the render that produced them. Refreshed in an insertion effect
+        // — the project's standard escape from writing a ref during render, and
+        // early enough that a layout effect in the same commit sees it.
+        const exitingRef = useRef(exiting ?? null);
+        const layoutRef = useRef(layout ?? null);
+        const forwardedRef = useRef(ref);
+        useInsertionEffect(() => {
+            exitingRef.current = exiting ?? null;
+            layoutRef.current = layout ?? null;
+            forwardedRef.current = ref;
+        });
+        // Stable identity: a fresh callback ref every render would detach and
+        // reattach the wrapped component's handle on every render.
+        const [assignHandle] = useState(() => (instance) => {
+            handleRef.current = instance;
+            const target = forwardedRef.current;
+            if (typeof target === "function") {
+                target(instance);
+            }
+            else if (target) {
+                ;
+                target.current = instance;
+            }
+            // No return value: React 19 reads one as a callback-ref cleanup.
+        });
+        const parentWidgetRef = host.widgetRef;
+        // --- entering --------------------------------------------------------
+        // Never refreshed, unlike the two above: an entering animation runs once,
+        // on mount, so the builder that counts is the one this component was
+        // mounted with.
+        const enteringRef = useRef(entering ?? null);
+        useLayoutEffect(() => {
+            const builder = enteringRef.current;
+            if (!builder || skip?.entering.current) {
+                return;
+            }
+            const widget = widgetForHandle(handleRef.current);
+            if (!widget) {
+                warnNoWidget(name);
+                return;
+            }
+            const rect = getStoredRect(widget) ?? ZERO_RECT;
+            const values = valuesFor(widget, rect, rect);
+            const running = runLayoutAnimation(ENGINE, { widget, parentWidget: parentWidgetRef.current }, builder.build()(values), values);
+            return () => running.stop();
+            // eslint-disable-next-line react-hooks/exhaustive-deps
+        }, []);
+        // --- layout ----------------------------------------------------------
+        // Keyed on whether there IS a layout animation, not on which one: a rect
+        // observer is what turns on the rect store's notify path, and a view that
+        // never asked for a layout transition must not pay for it.
+        const hasLayout = Boolean(layout);
+        useLayoutEffect(() => {
+            if (!hasLayout) {
+                return;
+            }
+            const widget = widgetForHandle(handleRef.current);
+            if (!widget) {
+                warnNoWidget(name);
+                return;
+            }
+            let running = null;
+            const unobserve = observeStoredRect(widget, (next, previous) => {
+                const builder = layoutRef.current;
+                // Nothing to walk from on the first commit, and a pure resize has no
+                // position to animate — the size lands immediately either way.
+                if (!builder || previous === undefined) {
+                    return;
+                }
+                if (previous.x === next.x && previous.y === next.y) {
+                    return;
+                }
+                // Where the child is being DRAWN right now, which is the rect it had
+                // plus whatever a transition still in flight has added to it.
+                const offset = getStoredLayoutOffset(widget);
+                const drawn = {
+                    x: previous.x + offset.dx,
+                    y: previous.y + offset.dy,
+                    width: previous.width,
+                    height: previous.height,
+                };
+                running?.stop();
+                const values = valuesFor(widget, drawn, next);
+                running = runLayoutAnimation(ENGINE, { widget, parentWidget: parentWidgetRef.current }, builder.build()(values), values, () => {
+                    running = null;
+                });
+            });
+            return () => {
+                unobserve();
+                running?.stop();
+            };
+            // eslint-disable-next-line react-hooks/exhaustive-deps
+        }, [hasLayout]);
+        // --- exiting ---------------------------------------------------------
+        // Declared last so its cleanup runs after the other two have stopped
+        // whatever they were driving: React tears a component's layout effects
+        // down in the order they were created.
+        useLayoutEffect(() => {
+            return () => {
+                const builder = exitingRef.current;
+                // `skip.exiting` is set by a `<LayoutAnimationConfig skipExiting>`
+                // above us, whose own cleanup React already ran — deletions tear down
+                // outside in, which is the same ordering `exiting` itself relies on.
+                if (!builder || skip?.exiting.current) {
+                    return;
+                }
+                const widget = widgetForHandle(handleRef.current);
+                // Read HERE and not captured when the effect ran, which is the whole
+                // point: null means this component's own container is unmounting in
+                // the same commit (React detaches the container's ref before
+                // descending into it), and there is then no container left to hold
+                // the widget — an exit animation inside a disappearing parent is not
+                // one anybody sees.
+                // eslint-disable-next-line react-hooks/exhaustive-deps
+                const parentWidget = parentWidgetRef.current;
+                if (!widget || !parentWidget) {
+                    return;
+                }
+                const rect = getStoredRect(widget) ?? ZERO_RECT;
+                const values = valuesFor(widget, rect, rect);
+                let running = null;
+                const retention = retainForExit(widget, parentWidget, builder, () => running?.stop());
+                if (retention === null) {
+                    return;
+                }
+                running = runLayoutAnimation(ENGINE, { widget, parentWidget }, builder.build()(values), values, () => retention.release());
+            };
+            // eslint-disable-next-line react-hooks/exhaustive-deps
+        }, []);
+        const targetProps = { ...rest };
+        if (entering || exiting || layout || ref) {
+            targetProps.ref = assignHandle;
+        }
+        const Target = component;
+        return _jsx(Target, { ...targetProps });
+    };
+    LayoutAnimated.displayName = `LayoutAnimated(${name})`;
+    return LayoutAnimated;
+};
+//# sourceMappingURL=layout-animation-view.js.map