Set global Dimensions when creating Fantom roots (#59350)

Summary:
Pull Request resolved: #59350

Set global `Dimensions` from each new Fantom root's viewport size, pixel ratio and font scale. Restore the latest surviving root when a root is destroyed, use the root defaults before creating a root and after destroying the last one, and warn when active roots have conflicting metrics. Pass each root's `fontScale` to native layout.

Changelog: [Internal]

Reviewed By: christophpurrer

Differential Revision: D126645992

fbshipit-source-id: e1ab5bcb85fa2f3bf8d7cfd5a44ddbd9c8941cfe

Author: rubennorte

packages/react-native/src/private/testing/fantom/specs/NativeFantom.js

@@ -78,6 +78,7 @@ interface Spec extends TurboModule {
     viewportWidth: number,
     viewportHeight: number,
     devicePixelRatio: number,
+    fontScale: number,
     viewportOffsetX?: number,
     viewportOffsetY?: number,
   ) => RootTag;

private/react-native-fantom/__docs__/README.md

@@ -92,6 +92,13 @@ describe('My feature', () => {
 });
 ```
 
+Creating a root sets global `Dimensions` for both `window` and `screen` from its
+`viewportWidth`, `viewportHeight`, `devicePixelRatio`, and optional `fontScale`
+(default `1`). `useWindowDimensions()` and `PixelRatio` report the new root's
+values. If another root is still alive with different display metrics, Fantom
+applies the new values and emits a warning. Call `root.destroy()` when a root is
+no longer needed.
+
 For a full API reference, please see the [inline documentation](../src/index.js)
 defined for the methods in the `@react-native/fantom` [module](../src/index.js).
 

private/react-native-fantom/src/__tests__/Fantom-itest.js

@@ -320,6 +320,8 @@ describe('Fantom', () => {
           viewportOffsetY: 102,
         },
       );
+      rootWithDefaults.destroy();
+      rootWithCustomWidthAndHeight.destroy();
     });
 
     it('throws when trying to render a root outside of a task', () => {

private/react-native-fantom/src/__tests__/FantomDimensions-itest.js

@@ -0,0 +1,201 @@
+/**
+ * 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
+ */
+
+/* global console: writable */
+
+import '@react-native/fantom/src/setUpDefaultReactNativeEnvironment';
+
+import type {Root, RootConfig} from '@react-native/fantom';
+
+import * as Fantom from '@react-native/fantom';
+import * as React from 'react';
+import {Dimensions, PixelRatio, View, useWindowDimensions} from 'react-native';
+
+let roots: Array<Root>;
+let originalConsole: typeof console;
+let warn: JestMockFn<Array<unknown>, void>;
+
+beforeEach(() => {
+  roots = [];
+  originalConsole = console;
+  warn = jest.fn();
+  console = Object.create(originalConsole, {warn: {value: warn}});
+});
+
+afterEach(() => {
+  for (const root of roots) {
+    Fantom.runTask(() => root.render(<></>));
+    root.destroy();
+  }
+  console = originalConsole;
+});
+
+function createRoot(config?: RootConfig): Root {
+  const root = Fantom.createRoot(config);
+  roots.push(root);
+  return root;
+}
+
+component WindowMetrics() {
+  const {width, height, scale, fontScale} = useWindowDimensions();
+  return <View testID={`${width}x${height}@${scale}:${fontScale}`} />;
+}
+
+it('uses root defaults before any root is created', () => {
+  for (const dimension of ['window', 'screen']) {
+    const metrics = Dimensions.get(dimension);
+    expect(metrics.width).toBe(390);
+    expect(metrics.height).toBe(844);
+    expect(metrics.scale).toBe(3);
+    expect(metrics.fontScale).toBe(1);
+  }
+  expect(PixelRatio.get()).toBe(3);
+  expect(PixelRatio.getFontScale()).toBe(1);
+});
+
+it('sets default window and screen metrics', () => {
+  createRoot();
+  for (const dimension of ['window', 'screen']) {
+    const metrics = Dimensions.get(dimension);
+    expect(metrics.width).toBe(390);
+    expect(metrics.height).toBe(844);
+    expect(metrics.scale).toBe(3);
+    expect(metrics.fontScale).toBe(1);
+  }
+});
+
+it('sets custom viewport, pixel ratio, and font scale', () => {
+  createRoot({
+    viewportWidth: 640,
+    viewportHeight: 480,
+    devicePixelRatio: 2,
+    fontScale: 1.5,
+  });
+  for (const dimension of ['window', 'screen']) {
+    const metrics = Dimensions.get(dimension);
+    expect(metrics.width).toBe(640);
+    expect(metrics.height).toBe(480);
+    expect(metrics.scale).toBe(2);
+    expect(metrics.fontScale).toBe(1.5);
+  }
+  expect(PixelRatio.get()).toBe(2);
+  expect(PixelRatio.getFontScale()).toBe(1.5);
+});
+
+it('does not warn for matching metrics, including different viewport offsets', () => {
+  createRoot();
+  createRoot({viewportOffsetX: 20, viewportOffsetY: 90});
+  expect(warn).not.toHaveBeenCalled();
+});
+
+const conflictingConfigs: Array<[string, RootConfig]> = [
+  ['width', {viewportWidth: 402}],
+  ['height', {viewportHeight: 874}],
+  ['pixel ratio', {devicePixelRatio: 2}],
+  ['font scale', {fontScale: 1.5}],
+];
+
+for (const [name, config] of conflictingConfigs) {
+  it(`warns and applies new metrics when an active root has a different ${name}`, () => {
+    createRoot();
+    createRoot(config);
+    expect(warn).toHaveBeenCalledTimes(1);
+    expect(warn.mock.calls[0][0]).toContain('another active root');
+    const metrics = Dimensions.get('window');
+    expect(metrics.width).toBe(config.viewportWidth ?? 390);
+    expect(metrics.height).toBe(config.viewportHeight ?? 844);
+    expect(metrics.scale).toBe(config.devicePixelRatio ?? 3);
+    expect(metrics.fontScale).toBe(config.fontScale ?? 1);
+  });
+}
+
+it('checks all active roots, including one that differs from the latest root', () => {
+  createRoot();
+  createRoot({viewportWidth: 640});
+  createRoot({viewportWidth: 640});
+  expect(warn).toHaveBeenCalledTimes(2);
+  expect(Dimensions.get('window').width).toBe(640);
+});
+
+it('does not warn for a destroyed root', () => {
+  const first = createRoot();
+  first.destroy();
+  roots.shift();
+  createRoot({viewportWidth: 640});
+  expect(warn).not.toHaveBeenCalled();
+});
+
+it('restores the latest surviving root and then defaults when all roots are destroyed', () => {
+  const first = createRoot();
+  const second = createRoot({
+    viewportWidth: 640,
+    viewportHeight: 480,
+    devicePixelRatio: 2,
+    fontScale: 1.5,
+  });
+  const third = createRoot({viewportWidth: 900});
+  third.destroy();
+  roots.pop();
+  for (const dimension of ['window', 'screen']) {
+    const metrics = Dimensions.get(dimension);
+    expect(metrics.width).toBe(640);
+    expect(metrics.height).toBe(480);
+    expect(metrics.scale).toBe(2);
+    expect(metrics.fontScale).toBe(1.5);
+  }
+  first.destroy();
+  roots.shift();
+  for (const dimension of ['window', 'screen']) {
+    const metrics = Dimensions.get(dimension);
+    expect(metrics.width).toBe(640);
+    expect(metrics.height).toBe(480);
+    expect(metrics.scale).toBe(2);
+    expect(metrics.fontScale).toBe(1.5);
+  }
+  second.destroy();
+  roots.pop();
+  for (const dimension of ['window', 'screen']) {
+    const metrics = Dimensions.get(dimension);
+    expect(metrics.width).toBe(390);
+    expect(metrics.height).toBe(844);
+    expect(metrics.scale).toBe(3);
+    expect(metrics.fontScale).toBe(1);
+  }
+  expect(PixelRatio.get()).toBe(3);
+  expect(PixelRatio.getFontScale()).toBe(1);
+});
+
+it('notifies mounted components when another root changes the metrics', () => {
+  const first = createRoot();
+  Fantom.runTask(() => first.render(<WindowMetrics />));
+  expect(first.getRenderedOutput({props: ['testID']}).toJSX()).toEqual(
+    <rn-view testID="390x844@3:1" />,
+  );
+  const second = createRoot({
+    viewportWidth: 640,
+    viewportHeight: 480,
+    devicePixelRatio: 2,
+    fontScale: 1.5,
+  });
+  Fantom.runTask(() => second.render(<WindowMetrics />));
+  expect(warn).toHaveBeenCalledTimes(1);
+  for (const root of [first, second]) {
+    expect(root.getRenderedOutput({props: ['testID']}).toJSX()).toEqual(
+      <rn-view testID="640x480@2:1.5" />,
+    );
+  }
+  Fantom.runTask(() => second.render(<></>));
+  second.destroy();
+  roots.pop();
+  Fantom.runWorkLoop();
+  expect(first.getRenderedOutput({props: ['testID']}).toJSX()).toEqual(
+    <rn-view testID="390x844@3:1" />,
+  );
+});

private/react-native-fantom/src/index.js

@@ -8,6 +8,7 @@
  * @format
  */
 
+import type {DisplayMetrics} from '../../../packages/react-native/Libraries/Utilities/Dimensions';
 import type {HostPlatform} from './Constants';
 import type {
   FantomRenderedOutput,
@@ -22,7 +23,7 @@ import NativeFantom, {
 import * as Benchmark from './Benchmark';
 import {getConstants} from './Constants';
 import getFantomRenderedOutput from './getFantomRenderedOutput';
-import {LogBox} from 'react-native';
+import {Dimensions, LogBox} from 'react-native';
 import {
   getInternalInstanceHandleFromPublicInstance,
   getNodeFromPublicInstance,
@@ -43,6 +44,7 @@ export type RootConfig = {
   viewportWidth?: number,
   viewportHeight?: number,
   devicePixelRatio?: number,
+  fontScale?: number,
   viewportOffsetX?: number,
   viewportOffsetY?: number,
 };
@@ -63,6 +65,52 @@ export function getHostPlatform(): HostPlatform {
 const DEFAULT_VIEWPORT_WIDTH = 390;
 const DEFAULT_VIEWPORT_HEIGHT = 844;
 const DEFAULT_DEVICE_PIXEL_RATIO = 3;
+const DEFAULT_FONT_SCALE = 1;
+const activeRootDisplayMetrics = new Map<RootTag, DisplayMetrics>();
+
+function setDefaultDisplayMetrics(): void {
+  const displayMetrics = {
+    width: DEFAULT_VIEWPORT_WIDTH,
+    height: DEFAULT_VIEWPORT_HEIGHT,
+    scale: DEFAULT_DEVICE_PIXEL_RATIO,
+    fontScale: DEFAULT_FONT_SCALE,
+  };
+  Dimensions.set({window: displayMetrics, screen: displayMetrics});
+}
+
+setDefaultDisplayMetrics();
+
+function pushDimensions(
+  surfaceId: RootTag,
+  displayMetrics: DisplayMetrics,
+): void {
+  activeRootDisplayMetrics.set(surfaceId, displayMetrics);
+  Dimensions.set({window: displayMetrics, screen: displayMetrics});
+  for (const metrics of activeRootDisplayMetrics.values()) {
+    if (
+      metrics.width !== displayMetrics.width ||
+      metrics.height !== displayMetrics.height ||
+      metrics.scale !== displayMetrics.scale ||
+      metrics.fontScale !== displayMetrics.fontScale
+    ) {
+      console.warn(
+        'Fantom.createRoot() updated global Dimensions while another active root has different display metrics. Dimensions and PixelRatio now reflect the new root.',
+        {existingRoot: metrics, newRoot: displayMetrics},
+      );
+      break;
+    }
+  }
+}
+
+function popDimensions(surfaceId: RootTag): void {
+  activeRootDisplayMetrics.delete(surfaceId);
+  const displayMetrics = Array.from(activeRootDisplayMetrics.values()).pop();
+  if (displayMetrics != null) {
+    Dimensions.set({window: displayMetrics, screen: displayMetrics});
+  } else {
+    setDefaultDisplayMetrics();
+  }
+}
 
 class Root {
   #surfaceId: RootTag;
@@ -71,23 +119,33 @@ class Root {
   #viewportOffsetX: number;
   #viewportOffsetY: number;
   #devicePixelRatio: number;
+  #fontScale: number;
   #document: ?Document;
 
   constructor(config?: RootConfig) {
     this.#viewportWidth = config?.viewportWidth ?? DEFAULT_VIEWPORT_WIDTH;
     this.#viewportHeight = config?.viewportHeight ?? DEFAULT_VIEWPORT_HEIGHT;
     this.#devicePixelRatio =
       config?.devicePixelRatio ?? DEFAULT_DEVICE_PIXEL_RATIO;
+    this.#fontScale = config?.fontScale ?? DEFAULT_FONT_SCALE;
     this.#viewportOffsetX = config?.viewportOffsetX ?? 0;
     this.#viewportOffsetY = config?.viewportOffsetY ?? 0;
 
     this.#surfaceId = NativeFantom.startSurface(
       this.#viewportWidth,
       this.#viewportHeight,
       this.#devicePixelRatio,
+      this.#fontScale,
       this.#viewportOffsetX,
       this.#viewportOffsetY,
     );
+
+    pushDimensions(this.#surfaceId, {
+      width: this.#viewportWidth,
+      height: this.#viewportHeight,
+      scale: this.#devicePixelRatio,
+      fontScale: this.#fontScale,
+    });
   }
 
   // $FlowExpectedError[unsafe-getters-setters]
@@ -128,6 +186,7 @@ class Root {
   destroy() {
     // TODO: check for leaks.
     NativeFantom.stopSurface(this.#surfaceId);
+    popDimensions(this.#surfaceId);
     NativeFantom.flushMessageQueue();
     this.#document = null;
   }

private/react-native-fantom/tester/src/NativeFantom.cpp

@@ -36,6 +36,7 @@ SurfaceId NativeFantom::startSurface(
     double viewportWidth,
     double viewportHeight,
     double devicePixelRatio,
+    double fontScale,
     double viewportOffsetX,
     double viewportOffsetY) {
   SurfaceId surfaceId = nextSurfaceId_;
@@ -46,6 +47,7 @@ SurfaceId NativeFantom::startSurface(
       static_cast<float>(viewportHeight),
       surfaceId,
       static_cast<float>(devicePixelRatio),
+      static_cast<float>(fontScale),
       static_cast<float>(viewportOffsetX),
       static_cast<float>(viewportOffsetY));
   return surfaceId;

private/react-native-fantom/tester/src/NativeFantom.h

@@ -82,6 +82,7 @@ class NativeFantom : public NativeFantomCxxSpec<NativeFantom> {
       double viewportWidth,
       double viewportHeight,
       double devicePixelRatio,
+      double fontScale,
       double viewportOffsetX,
       double viewportOffsetY);
 

private/react-native-fantom/tester/src/TesterAppDelegate.cpp

@@ -270,6 +270,7 @@ void TesterAppDelegate::startSurface(
     float heightDp,
     SurfaceId surfaceId,
     float pointScaleFactor,
+    float fontScale,
     float offsetX,
     float offsetY) {
   Size extentsDp{static_cast<Float>(widthDp), static_cast<Float>(heightDp)};
@@ -281,6 +282,7 @@ void TesterAppDelegate::startSurface(
 
   LayoutContext layoutContext{
       .pointScaleFactor = pointScaleFactor,
+      .fontSizeMultiplier = fontScale,
       .viewportOffset = {.x = offsetX, .y = offsetY},
   };