Add Fantom integration tests for core public APIs (#57466)

Summary:

Adds Fantom `-itest.js` coverage for maintained, public React Native APIs that were previously untested or thinly tested, driving both the JavaScript logic and the underlying cross-platform C++ through the public `react-native` package surface.

To make JavaScript-driven animations deterministic under the test runner, this also introduces a small timing indirection in `Animated`:

- New module `Animated/AnimationTimingUtils.js` exports `getCurrentAnimationTime` (returns `Date.now()` by default) and `setAnimationTimeProvider` (overrides the time source; pass `null` to restore the default).
- `TimingAnimation`, `SpringAnimation` and `DecayAnimation` now read the current time from `getCurrentAnimationTime()` instead of calling `Date.now()` directly. The default behavior is unchanged.

With this, a test can override the provider with a clock that advances one frame per read, which drives the JS-driver animation at the same cadence as the native frame clock. The spring and decay tests use this to verify the actual animation curve (overshoot for an underdamped spring, exponential deceleration for decay), not just the final value, and to run a single unified code path for both the JS and native drivers.

New test files:
- `Animated/__tests__/SpringAnimation-itest.js`, `DecayAnimation-itest.js`, `AnimatedColor-itest.js`, `AnimatedComposition-itest.js` — spring/decay curve shape (both drivers), `Animated.Color` value semantics, and the composition nodes (`add`/`subtract`/`multiply`/`divide`/`modulo`/`diffClamp`/tracking). `AnimatedFantomTestUtils.js` holds the shared trajectory helper.
- `Components/View/__tests__/View-nativeCSSParsing-itest.js` — string-valued CSS (color functions, transform, gradients) parsed via native CSS parsing.
- `Pressability/__tests__/Pressability-touch-itest.js` — press in/out/press, long press, press delay, and responder termination via touch events and the deterministic timer mock.
- `Interaction/__tests__/PanResponder-itest.js` — grant/move/release/terminate and gesture state across touch sequences.
- `LayoutAnimation/__tests__/LayoutAnimation-itest.js` — `configureNext`/`create`/presets applying the resulting layout.
- `Network/__tests__/Network-itest.js` — synchronous `XMLHttpRequest` lifecycle and validation.

Extended test files:
- `Components/TextInput/__tests__/TextInput-itest.js` — `onSelectionChange`/`onSubmitEditing`/`onKeyPress`/`onEndEditing` events.
- `Lists/__tests__/FlatList-itest.js` — `onViewableItemsChanged` across all `viewabilityConfig` options (`itemVisiblePercentThreshold`, `viewAreaCoveragePercentThreshold`, `minimumViewTime`, `waitForInteraction`).
- `Text/__tests__/Text-itest.js` — `letterSpacing`, `lineHeight`, and `fontVariant` styles.

The runtime behavior of `Animated` is unchanged; the new timing indirection defaults to `Date.now()`.

Changelog:
[Internal]

Differential Revision: D110784436

Author: rubennorte

packages/react-native/Libraries/Animated/AnimationTimingUtils.js

@@ -0,0 +1,39 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @flow strict-local
+ * @format
+ */
+
+'use strict';
+
+export type AnimationTimeProvider = () => number;
+
+const defaultAnimationTimeProvider: AnimationTimeProvider = () => Date.now();
+
+let animationTimeProvider: AnimationTimeProvider = defaultAnimationTimeProvider;
+
+/**
+ * Returns the current time, in milliseconds, used to drive JavaScript-based
+ * animations (timing, spring and decay).
+ *
+ * Defaults to `Date.now()`. The value can be overridden with
+ * `setAnimationTimeProvider`, e.g. to drive animations from a controlled clock
+ * in tests.
+ */
+export function getCurrentAnimationTime(): number {
+  return animationTimeProvider();
+}
+
+/**
+ * Overrides the time source used by `getCurrentAnimationTime`. Pass `null` to restore
+ * the default `Date.now()`-based provider.
+ */
+export function setAnimationTimeProvider(
+  provider: ?AnimationTimeProvider,
+): void {
+  animationTimeProvider = provider ?? defaultAnimationTimeProvider;
+}

packages/react-native/Libraries/Animated/__tests__/AnimatedColor-itest.js

@@ -0,0 +1,195 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @flow strict-local
+ * @format
+ */
+
+import '@react-native/fantom/src/setUpDefaultReactNativeEnvironment';
+
+import {DRIVERS} from './AnimatedFantomTestUtils';
+import * as Fantom from '@react-native/fantom';
+import * as React from 'react';
+import {Animated} from 'react-native';
+
+// Renders `color` as a View's backgroundColor so it can be observed through the
+// public rendered output rather than private state.
+function renderColor(color: Animated.Color): Fantom.Root {
+  const root = Fantom.createRoot();
+  Fantom.runTask(() => {
+    root.render(
+      <Animated.View style={{width: 10, height: 10, backgroundColor: color}} />,
+    );
+  });
+  return root;
+}
+
+function mountedBackgroundColor(color: Animated.Color): string {
+  return renderColor(color)
+    .getRenderedOutput({props: ['backgroundColor']})
+    .toJSONObject().props.backgroundColor;
+}
+
+describe('Animated.Color', () => {
+  it('defaults to opaque black', () => {
+    expect(mountedBackgroundColor(new Animated.Color())).toBe(
+      'rgba(0, 0, 0, 1)',
+    );
+  });
+
+  it('parses an rgba() string', () => {
+    expect(
+      mountedBackgroundColor(new Animated.Color('rgba(255, 128, 0, 1)')),
+    ).toBe('rgba(255, 128, 0, 1)');
+  });
+
+  it('parses a hex string', () => {
+    expect(mountedBackgroundColor(new Animated.Color('#ff0000'))).toBe(
+      'rgba(255, 0, 0, 1)',
+    );
+  });
+
+  it('accepts an rgba object', () => {
+    // The rendered color quantizes alpha to 8 bits (0.5 -> 128/255).
+    expect(
+      mountedBackgroundColor(new Animated.Color({r: 10, g: 20, b: 30, a: 0.5})),
+    ).toBe('rgba(10, 20, 30, 0.501961)');
+  });
+
+  it('accepts individual AnimatedValues for each channel', () => {
+    expect(
+      mountedBackgroundColor(
+        new Animated.Color({
+          r: new Animated.Value(1),
+          g: new Animated.Value(2),
+          b: new Animated.Value(3),
+          a: new Animated.Value(1),
+        }),
+      ),
+    ).toBe('rgba(1, 2, 3, 1)');
+  });
+
+  it('updates all channels via setValue', () => {
+    const color = new Animated.Color('rgba(0, 0, 0, 1)');
+    const root = renderColor(color);
+
+    Fantom.runTask(() => {
+      color.setValue({r: 5, g: 6, b: 7, a: 1});
+    });
+
+    expect(
+      root.getRenderedOutput({props: ['backgroundColor']}).toJSX(),
+    ).toEqual(<rn-view backgroundColor="rgba(5, 6, 7, 1)" />);
+  });
+
+  it('applies an offset on top of the base value', () => {
+    const color = new Animated.Color({r: 10, g: 10, b: 10, a: 1});
+    const root = renderColor(color);
+
+    // `setOffset` on its own does not flush to a connected view (unlike the
+    // native driver, which does); the following value update flushes the
+    // composed color, which includes the offset (base 20 + offset 5).
+    Fantom.runTask(() => {
+      color.setOffset({r: 5, g: 5, b: 5, a: 0});
+      color.setValue({r: 20, g: 20, b: 20, a: 1});
+    });
+
+    expect(
+      root.getRenderedOutput({props: ['backgroundColor']}).toJSX(),
+    ).toEqual(<rn-view backgroundColor="rgba(25, 25, 25, 1)" />);
+  });
+
+  it('flattenOffset and extractOffset preserve the composed value', () => {
+    const color = new Animated.Color({r: 10, g: 10, b: 10, a: 1});
+    renderColor(color);
+
+    let afterFlatten: string = '';
+    let afterExtract: string = '';
+    Fantom.runTask(() => {
+      color.setOffset({r: 5, g: 5, b: 5, a: 0});
+      // Merges the offset (5) into the base (10) -> base 15, offset 0.
+      color.flattenOffset();
+      color.stopAnimation(value => {
+        afterFlatten = String(value);
+      });
+      // Moves the base (15) into the offset -> base 0, offset 15.
+      color.extractOffset();
+      color.stopAnimation(value => {
+        afterExtract = String(value);
+      });
+    });
+
+    expect(afterFlatten).toBe('rgba(15, 15, 15, 1)');
+    expect(afterExtract).toBe('rgba(15, 15, 15, 1)');
+  });
+
+  it('resetAnimation restores the value and reports it to the callback', () => {
+    const color = new Animated.Color('rgba(1, 2, 3, 1)');
+    renderColor(color);
+
+    let reported: string = '';
+    Fantom.runTask(() => {
+      color.resetAnimation(value => {
+        reported = String(value);
+      });
+    });
+
+    expect(reported).toBe('rgba(1, 2, 3, 1)');
+  });
+
+  it('updates a native-driven color via setValue', () => {
+    const color = new Animated.Color('rgba(0, 0, 0, 1)', {
+      useNativeDriver: true,
+    });
+    renderColor(color);
+
+    // A native-driven color applies via direct manipulation rather than the
+    // committed tree, so observe the value through the animation callback.
+    let reported: string = '';
+    Fantom.runTask(() => {
+      color.setValue({r: 5, g: 6, b: 7, a: 1});
+      color.stopAnimation(value => {
+        reported = String(value);
+      });
+    });
+    Fantom.unstable_produceFramesForDuration(16);
+    Fantom.runWorkLoop();
+
+    expect(reported).toBe('rgba(5, 6, 7, 1)');
+  });
+
+  for (const {name, useNativeDriver} of DRIVERS) {
+    it(`animates to a target color (${name})`, () => {
+      const color = new Animated.Color('rgba(255, 0, 0, 1)');
+      const root = renderColor(color);
+
+      expect(
+        root.getRenderedOutput({props: ['backgroundColor']}).toJSX(),
+      ).toEqual(<rn-view backgroundColor="rgba(255, 0, 0, 1)" />);
+
+      let finished = false;
+      Fantom.runTask(() => {
+        Animated.timing(color, {
+          toValue: {r: 0, g: 0, b: 255, a: 1},
+          duration: 100,
+          useNativeDriver,
+        }).start(result => {
+          finished = result.finished;
+        });
+      });
+
+      Fantom.unstable_produceFramesForDuration(200);
+      Fantom.runWorkLoop();
+
+      // The final driven color is flushed to the committed tree and observed
+      // through the public rendered output.
+      expect(finished).toBe(true);
+      expect(
+        root.getRenderedOutput({props: ['backgroundColor']}).toJSX(),
+      ).toEqual(<rn-view backgroundColor="rgba(0, 0, 255, 1)" />);
+    });
+  }
+});