react-native-windows 0.76.2 → 0.77.0-preview.1

package/src/private/featureflags/ReactNativeFeatureFlagsBase.js

@@ -4,7 +4,7 @@
  * 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
+ * @flow strict
  * @format
  */
 
@@ -20,6 +20,12 @@ let overrides: ?ReactNativeFeatureFlagsJsOnlyOverrides;
 
 export type Getter<T> = () => T;
 
+// This defines the types for the overrides object, whose methods also receive
+// the default value as a parameter.
+export type OverridesFor<T> = Partial<{
+  [key in keyof T]: (ReturnType<T[key]>) => ReturnType<T[key]>,
+}>;
+
 function createGetter<T: boolean | number | string>(
   configName: string,
   customValueGetter: Getter<?T>,
@@ -45,7 +51,7 @@ export function createJavaScriptFlagGetter<
     configName,
     () => {
       accessedFeatureFlags.add(configName);
-      return overrides?.[configName]?.();
+      return overrides?.[configName]?.(defaultValue);
     },
     defaultValue,
   );

package/src/private/featureflags/specs/NativeReactNativeFeatureFlags.js

@@ -4,8 +4,8 @@
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
  *
- * @generated SignedSource<<6d4aa48dfdd3b78ac5f0f8e70eb3895f>>
- * @flow strict-local
+ * @generated SignedSource<<4caaf5dbaa68614ce53c8aecbd512df8>>
+ * @flow strict
  */
 
 /**
@@ -15,7 +15,7 @@
  *   packages/react-native/scripts/featureflags/ReactNativeFeatureFlags.config.js.
  *
  * To regenerate this code, run the following script from the repo root:
- *   yarn featureflags-update
+ *   yarn featureflags --update
  */
 
 import type {TurboModule} from '../../../../Libraries/TurboModule/RCTExport';
@@ -24,53 +24,51 @@ import * as TurboModuleRegistry from '../../../../Libraries/TurboModule/TurboMod
 
 export interface Spec extends TurboModule {
   +commonTestFlag?: () => boolean;
-  +allowRecursiveCommitsWithSynchronousMountOnAndroid?: () => boolean;
-  +batchRenderingUpdatesInEventLoop?: () => boolean;
+  +commonTestFlagWithoutNativeImplementation?: () => boolean;
   +completeReactInstanceCreationOnBgThreadOnAndroid?: () => boolean;
-  +destroyFabricSurfacesInReactInstanceManager?: () => boolean;
+  +disableEventLoopOnBridgeless?: () => boolean;
+  +disableMountItemReorderingAndroid?: () => boolean;
   +enableAlignItemsBaselineOnFabricIOS?: () => boolean;
-  +enableAndroidMixBlendModeProp?: () => boolean;
-  +enableBackgroundStyleApplicator?: () => boolean;
-  +enableCleanTextInputYogaNode?: () => boolean;
+  +enableAndroidLineHeightCentering?: () => boolean;
+  +enableBridgelessArchitecture?: () => boolean;
+  +enableCppPropsIteratorSetter?: () => boolean;
+  +enableDeletionOfUnmountedViews?: () => boolean;
   +enableEagerRootViewAttachment?: () => boolean;
   +enableEventEmitterRetentionDuringGesturesOnAndroid?: () => boolean;
   +enableFabricLogs?: () => boolean;
+  +enableFabricRenderer?: () => boolean;
   +enableFabricRendererExclusively?: () => boolean;
+  +enableFixForViewCommandRace?: () => boolean;
   +enableGranularShadowTreeStateReconciliation?: () => boolean;
   +enableIOSViewClipToPaddingBox?: () => boolean;
+  +enableLayoutAnimationsOnAndroid?: () => boolean;
   +enableLayoutAnimationsOnIOS?: () => boolean;
   +enableLongTaskAPI?: () => boolean;
-  +enableMicrotasks?: () => boolean;
+  +enableNewBackgroundAndBorderDrawables?: () => boolean;
+  +enablePreciseSchedulingForPremountItemsOnAndroid?: () => boolean;
   +enablePropsUpdateReconciliationAndroid?: () => boolean;
   +enableReportEventPaintTime?: () => boolean;
   +enableSynchronousStateUpdates?: () => boolean;
   +enableUIConsistency?: () => boolean;
   +enableViewRecycling?: () => boolean;
   +excludeYogaFromRawProps?: () => boolean;
-  +fetchImagesInViewPreallocation?: () => boolean;
-  +fixIncorrectScrollViewStateUpdateOnAndroid?: () => boolean;
   +fixMappingOfEventPrioritiesBetweenFabricAndReact?: () => boolean;
-  +fixMissedFabricStateUpdatesOnAndroid?: () => boolean;
   +fixMountingCoordinatorReportedPendingTransactionsOnAndroid?: () => boolean;
-  +forceBatchingMountItemsOnAndroid?: () => boolean;
   +fuseboxEnabledDebug?: () => boolean;
   +fuseboxEnabledRelease?: () => boolean;
   +initEagerTurboModulesOnNativeModulesQueueAndroid?: () => boolean;
   +lazyAnimationCallbacks?: () => boolean;
   +loadVectorDrawablesOnImages?: () => boolean;
-  +setAndroidLayoutDirection?: () => boolean;
   +traceTurboModulePromiseRejectionsOnAndroid?: () => boolean;
+  +useAlwaysAvailableJSErrorHandling?: () => boolean;
   +useFabricInterop?: () => boolean;
   +useImmediateExecutorInAndroidBridgeless?: () => boolean;
-  +useModernRuntimeScheduler?: () => boolean;
   +useNativeViewConfigsInBridgelessMode?: () => boolean;
-  +useNewReactImageViewBackgroundDrawing?: () => boolean;
   +useOptimisedViewPreallocationOnAndroid?: () => boolean;
   +useOptimizedEventBatchingOnAndroid?: () => boolean;
   +useRuntimeShadowNodeReferenceUpdate?: () => boolean;
-  +useRuntimeShadowNodeReferenceUpdateOnLayout?: () => boolean;
-  +useStateAlignmentMechanism?: () => boolean;
   +useTurboModuleInterop?: () => boolean;
+  +useTurboModules?: () => boolean;
 }
 
 const NativeReactNativeFeatureFlags: ?Spec = TurboModuleRegistry.get<Spec>(

package/src/private/fusebox/specs/NativeReactDevToolsRuntimeSettingsModule.js

@@ -0,0 +1,34 @@
+/**
+ * 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
+ * @oncall react_native
+ */
+
+import type {TurboModule} from '../../../../Libraries/TurboModule/RCTExport';
+
+import * as TurboModuleRegistry from '../../../../Libraries/TurboModule/TurboModuleRegistry';
+
+export type ReloadAndProfileConfig = {
+  shouldReloadAndProfile: boolean,
+  recordChangeDescriptions: boolean,
+};
+
+// Linter doesn't speak Flow's `Partial` type
+export type PartialReloadAndProfileConfig = {
+  shouldReloadAndProfile?: boolean,
+  recordChangeDescriptions?: boolean,
+};
+
+export interface Spec extends TurboModule {
+  +setReloadAndProfileConfig: (config: PartialReloadAndProfileConfig) => void;
+  +getReloadAndProfileConfig: () => ReloadAndProfileConfig;
+}
+
+export default (TurboModuleRegistry.get<Spec>(
+  'ReactDevToolsRuntimeSettingsModule',
+): ?Spec);

package/src/private/setup/setUpDOM.js

@@ -8,8 +8,7 @@
  * @format
  */
 
-import DOMRect from '../webapis/dom/geometry/DOMRect';
-import DOMRectReadOnly from '../webapis/dom/geometry/DOMRectReadOnly';
+import {polyfillGlobal} from '../../../Libraries/Utilities/PolyfillFunctions';
 
 let initialized = false;
 
@@ -20,9 +19,18 @@ export default function setUpDOM() {
 
   initialized = true;
 
-  // $FlowExpectedError[cannot-write] The global isn't writable anywhere but here, where we define it
-  global.DOMRect = DOMRect;
+  polyfillGlobal(
+    'DOMRect',
+    () => require('../webapis/dom/geometry/DOMRect').default,
+  );
 
-  // $FlowExpectedError[cannot-write] The global isn't writable anywhere but here, where we define it
-  global.DOMRectReadOnly = DOMRectReadOnly;
+  polyfillGlobal(
+    'DOMRectReadOnly',
+    () => require('../webapis/dom/geometry/DOMRectReadOnly').default,
+  );
+
+  polyfillGlobal(
+    'NodeList',
+    () => require('../webapis/dom/oldstylecollections/NodeList').default,
+  );
 }

package/src/private/setup/setUpMutationObserver.js

@@ -23,4 +23,9 @@ export default function setUpMutationObserver() {
     'MutationObserver',
     () => require('../webapis/mutationobserver/MutationObserver').default,
   );
+
+  polyfillGlobal(
+    'MutationRecord',
+    () => require('../webapis/mutationobserver/MutationRecord').default,
+  );
 }

package/src/private/specs/components/AndroidHorizontalScrollContentViewNativeComponent.js

@@ -23,4 +23,5 @@ type NativeType = HostComponent<NativeProps>;
 
 export default (codegenNativeComponent<NativeProps>(
   'AndroidHorizontalScrollContentView',
+  {interfaceOnly: true},
 ): NativeType);

package/src/private/specs/components/RCTModalHostViewNativeComponent.js

@@ -58,6 +58,14 @@ type NativeProps = $ReadOnly<{|
    */
   statusBarTranslucent?: WithDefault<boolean, false>,
 
+  /**
+   * The `navigationBarTranslucent` prop determines whether your modal should go under
+   * the system navigationbar.
+   *
+   * See https://reactnative.dev/docs/modal#navigationBarTranslucent
+   */
+  navigationBarTranslucent?: WithDefault<boolean, false>,
+
   /**
    * The `hardwareAccelerated` prop controls whether to force hardware
    * acceleration for the underlying window.

package/src/private/specs/modules/NativeAccessibilityInfo.js

@@ -16,6 +16,12 @@ export interface Spec extends TurboModule {
   +isReduceMotionEnabled: (
     onSuccess: (isReduceMotionEnabled: boolean) => void,
   ) => void;
+  +isInvertColorsEnabled?: (
+    onSuccess: (isInvertColorsEnabled: boolean) => void,
+  ) => void;
+  +isHighTextContrastEnabled?: (
+    onSuccess: (isHighTextContrastEnabled: boolean) => void,
+  ) => void;
   +isTouchExplorationEnabled: (
     onSuccess: (isScreenReaderEnabled: boolean) => void,
   ) => void;
@@ -28,6 +34,9 @@ export interface Spec extends TurboModule {
     mSec: number,
     onSuccess: (recommendedTimeoutMillis: number) => void,
   ) => void;
+  +isGrayscaleEnabled?: (
+    onSuccess: (isGrayscaleEnabled: boolean) => void,
+  ) => void;
 }
 
 export default (TurboModuleRegistry.get<Spec>('AccessibilityInfo'): ?Spec);

package/src/private/specs/modules/NativeAccessibilityManager.js

@@ -29,6 +29,10 @@ export interface Spec extends TurboModule {
     onSuccess: (isReduceMotionEnabled: boolean) => void,
     onError: (error: Object) => void,
   ) => void;
+  +getCurrentDarkerSystemColorsState?: (
+    onSuccess: (isDarkerSystemColorsEnabled: boolean) => void,
+    onError: (error: Object) => void,
+  ) => void;
   +getCurrentPrefersCrossFadeTransitionsState?: (
     onSuccess: (prefersCrossFadeTransitions: boolean) => void,
     onError: (error: Object) => void,

package/src/private/specs/modules/NativeActionSheetManager.js

@@ -24,6 +24,7 @@ export interface Spec extends TurboModule {
       +anchor?: ?number,
       +tintColor?: ?number,
       +cancelButtonTintColor?: ?number,
+      +disabledButtonTintColor?: ?number,
       +userInterfaceStyle?: ?string,
       +disabledButtonIndices?: Array<number>,
     |},
@@ -37,6 +38,7 @@ export interface Spec extends TurboModule {
       +anchor?: ?number,
       +tintColor?: ?number,
       +cancelButtonTintColor?: ?number,
+      +disabledButtonTintColor?: ?number,
       +excludedActivityTypes?: ?Array<string>,
       +userInterfaceStyle?: ?string,
     |},

package/src/private/specs/modules/NativeAppearance.js

@@ -12,21 +12,15 @@ import type {TurboModule} from '../../../../Libraries/TurboModule/RCTExport';
 
 import * as TurboModuleRegistry from '../../../../Libraries/TurboModule/TurboModuleRegistry';
 
-export type ColorSchemeName = 'light' | 'dark';
+export type ColorSchemeName = 'light' | 'dark' | 'unspecified';
 
 export type AppearancePreferences = {
-  // TODO: (hramos) T52919652 Use ?ColorSchemeName once codegen supports union
-  // types.
-  /* 'light' | 'dark' */
-  colorScheme?: ?string,
+  colorScheme?: ?ColorSchemeName,
 };
 
 export interface Spec extends TurboModule {
-  // TODO: (hramos) T52919652 Use ?ColorSchemeName once codegen supports union
-  // types.
-  /* 'light' | 'dark' */
-  +getColorScheme: () => ?string;
-  +setColorScheme: (colorScheme: string) => void;
+  +getColorScheme: () => ?ColorSchemeName;
+  +setColorScheme: (colorScheme: ColorSchemeName) => void;
 
   // RCTEventEmitter
   +addListener: (eventName: string) => void;

package/src/private/specs/modules/NativeExceptionsManager.js

@@ -47,11 +47,6 @@ export interface Spec extends TurboModule {
     exceptionId: number,
   ) => void;
   +reportException?: (data: ExceptionData) => void;
-  +updateExceptionMessage: (
-    message: string,
-    stack: Array<StackFrame>,
-    exceptionId: number,
-  ) => void;
   // TODO(T53311281): This is a noop on iOS now. Implement it.
   +dismissRedbox?: () => void;
 }
@@ -74,13 +69,6 @@ const ExceptionsManager = {
   ) {
     NativeModule.reportSoftException(message, stack, exceptionId);
   },
-  updateExceptionMessage(
-    message: string,
-    stack: Array<StackFrame>,
-    exceptionId: number,
-  ) {
-    NativeModule.updateExceptionMessage(message, stack, exceptionId);
-  },
   dismissRedbox(): void {
     if (Platform.OS !== 'ios' && NativeModule.dismissRedbox) {
       // TODO(T53311281): This is a noop on iOS now. Implement it.

package/src/private/specs/modules/{NativeDevToolsSettingsManager.js → NativeReactDevToolsSettingsManager.js}

@@ -13,12 +13,10 @@ import type {TurboModule} from '../../../../Libraries/TurboModule/RCTExport';
 import * as TurboModuleRegistry from '../../../../Libraries/TurboModule/TurboModuleRegistry';
 
 export interface Spec extends TurboModule {
-  +setConsolePatchSettings: (newConsolePatchSettings: string) => void;
-  +getConsolePatchSettings: () => ?string;
-  +setProfilingSettings?: (newProfilingSettings: string) => void;
-  +getProfilingSettings?: () => ?string;
+  +setGlobalHookSettings: (settings: string) => void;
+  +getGlobalHookSettings: () => ?string;
 }
 
 export default (TurboModuleRegistry.get<Spec>(
-  'DevToolsSettingsManager',
+  'ReactDevToolsSettingsManager',
 ): ?Spec);

package/src/private/webapis/dom/geometry/DOMRect.js

@@ -14,7 +14,7 @@
  * licensed under [CC-BY-SA 2.5](https://creativecommons.org/licenses/by-sa/2.5/).
  */
 
-import DOMRectReadOnly, {type DOMRectLike} from './DOMRectReadOnly';
+import DOMRectReadOnly, {type DOMRectInit} from './DOMRectReadOnly';
 
 // flowlint unsafe-getters-setters:off
 
@@ -72,7 +72,7 @@ export default class DOMRect extends DOMRectReadOnly {
   /**
    * Creates a new `DOMRect` object with a given location and dimensions.
    */
-  static fromRect(rect?: ?DOMRectLike): DOMRect {
+  static fromRect(rect?: ?DOMRectInit): DOMRect {
     if (!rect) {
       return new DOMRect();
     }

package/src/private/webapis/dom/geometry/DOMRectReadOnly.js

@@ -16,7 +16,7 @@
 
 // flowlint sketchy-null:off, unsafe-getters-setters:off
 
-export interface DOMRectLike {
+export interface DOMRectInit {
   x?: ?number;
   y?: ?number;
   width?: ?number;
@@ -146,7 +146,7 @@ export default class DOMRectReadOnly {
   /**
    * Creates a new `DOMRectReadOnly` object with a given location and dimensions.
    */
-  static fromRect(rect?: ?DOMRectLike): DOMRectReadOnly {
+  static fromRect(rect?: ?DOMRectInit): DOMRectReadOnly {
     if (!rect) {
       return new DOMRectReadOnly();
     }

package/src/private/webapis/dom/nodes/ReactNativeElement.js

@@ -11,7 +11,7 @@
 // flowlint unsafe-getters-setters:off
 
 import type {
-  HostComponent,
+  HostInstance,
   INativeMethods,
   InternalInstanceHandle,
   MeasureInWindowOnSuccessCallback,
@@ -19,7 +19,6 @@ import type {
   MeasureOnSuccessCallback,
   ViewConfig,
 } from '../../../../../Libraries/Renderer/shims/ReactNativeTypes';
-import type {ElementRef} from 'react';
 
 import TextInputState from '../../../../../Libraries/Components/TextInput/TextInputState';
 import {getFabricUIManager} from '../../../../../Libraries/ReactNative/FabricUIManager';
@@ -143,7 +142,7 @@ export default class ReactNativeElement
   }
 
   measureLayout(
-    relativeToNativeNode: number | ElementRef<HostComponent<mixed>>,
+    relativeToNativeNode: number | HostInstance,
     onSuccess: MeasureLayoutOnSuccessCallback,
     onFail?: () => void /* currently unused */,
   ) {

package/src/private/webapis/intersectionobserver/IntersectionObserver.js

@@ -25,6 +25,18 @@ type IntersectionObserverInit = {
   // root?: ReactNativeElement, // This option exists on the Web but it's not currently supported in React Native.
   // rootMargin?: string, // This option exists on the Web but it's not currently supported in React Native.
   threshold?: number | $ReadOnlyArray<number>,
+
+  /**
+   * This is a React Native specific option (not spec compliant) that specifies
+   * ratio threshold(s) of the intersection area to the total `root` area.
+   *
+   * If set, it will either be a singular ratio value between 0-1 (inclusive)
+   * or an array of such ratios.
+   *
+   * Note: If `rn_rootThreshold` is set, and `threshold` is not set,
+   * `threshold` will not default to [0] (as per spec)
+   */
+  rn_rootThreshold?: number | $ReadOnlyArray<number>,
 };
 
 /**
@@ -44,13 +56,16 @@ type IntersectionObserverInit = {
  * elements with the same observer.
  *
  * This implementation only supports the `threshold` option at the moment
- * (`root` and `rootMargin` are not supported).
+ * (`root` and `rootMargin` are not supported) and provides a React Native specific
+ * option `rn_rootThreshold`.
+ *
  */
 export default class IntersectionObserver {
   _callback: IntersectionObserverCallback;
   _thresholds: $ReadOnlyArray<number>;
   _observationTargets: Set<ReactNativeElement> = new Set();
   _intersectionObserverId: ?IntersectionObserverId;
+  _rootThresholds: $ReadOnlyArray<number> | null;
 
   constructor(
     callback: IntersectionObserverCallback,
@@ -83,7 +98,12 @@ export default class IntersectionObserver {
     }
 
     this._callback = callback;
-    this._thresholds = normalizeThresholds(options?.threshold);
+
+    this._rootThresholds = normalizeRootThreshold(options?.rn_rootThreshold);
+    this._thresholds = normalizeThreshold(
+      options?.threshold,
+      this._rootThresholds != null, // only provide default if no rootThreshold
+    );
   }
 
   /**
@@ -115,14 +135,27 @@ export default class IntersectionObserver {
    * A list of thresholds, sorted in increasing numeric order, where each
    * threshold is a ratio of intersection area to bounding box area of an
    * observed target.
-   * Notifications for a target are generated when any of the thresholds are
-   * crossed for that target.
-   * If no value was passed to the constructor, `0` is used.
+   * Notifications for a target are generated when any of the thresholds specified
+   * in `rn_rootThreshold` or `threshold` are crossed for that target.
+   *
+   * If no value was passed to the constructor, and no `rn_rootThreshold`
+   * is set, `0` is used.
    */
   get thresholds(): $ReadOnlyArray<number> {
     return this._thresholds;
   }
 
+  /**
+   * A list of root thresholds, sorted in increasing numeric order, where each
+   * threshold is a ratio of intersection area to bounding box area of the specified
+   * root view, which defaults to the viewport.
+   * Notifications for a target are generated when any of the thresholds specified
+   * in `rn_rootThreshold` or `threshold` are crossed for that target.
+   */
+  get rootThresholds(): $ReadOnlyArray<number> | null {
+    return this._rootThresholds;
+  }
+
   /**
    * Adds an element to the set of target elements being watched by the
    * `IntersectionObserver`.
@@ -131,6 +164,12 @@ export default class IntersectionObserver {
    * To stop observing the element, call `IntersectionObserver.unobserve()`.
    */
   observe(target: ReactNativeElement): void {
+    if (target == null) {
+      throw new TypeError(
+        "Failed to execute 'observe' on 'IntersectionObserver': parameter 1 is null or undefined.",
+      );
+    }
+
     if (!(target instanceof ReactNativeElement)) {
       throw new TypeError(
         "Failed to execute 'observe' on 'IntersectionObserver': parameter 1 is not of type 'ReactNativeElement'.",
@@ -215,32 +254,84 @@ export default class IntersectionObserver {
  * Converts the user defined `threshold` value into an array of sorted valid
  * threshold options for `IntersectionObserver` (double ∈ [0, 1]).
  *
+ * If `defaultEmpty` is true, then defaults to empty array, otherwise [0].
+ *
  * @example
  * normalizeThresholds(0.5);                // → [0.5]
  * normalizeThresholds([1, 0.5, 0]);        // → [0, 0.5, 1]
  * normalizeThresholds(['1', '0.5', '0']);  // → [0, 0.5, 1]
+ * normalizeThresholds(null);               // → [0]
+ * normalizeThresholds([null, null]);       // → [0, 0]
+ *
+ * normalizeThresholds([null], true);       // → [0]
+ * normalizeThresholds(null, true);         // → []
+ * normalizeThresholds([], true);           // → []
  */
-function normalizeThresholds(threshold: mixed): $ReadOnlyArray<number> {
+function normalizeThreshold(
+  threshold: mixed,
+  defaultEmpty: boolean = false,
+): $ReadOnlyArray<number> {
   if (Array.isArray(threshold)) {
     if (threshold.length > 0) {
-      return threshold.map(normalizeThresholdValue).sort();
+      return threshold
+        .map(t => normalizeThresholdValue(t, 'threshold'))
+        .map(t => t ?? 0)
+        .sort();
+    } else if (defaultEmpty) {
+      return [];
     } else {
       return [0];
     }
   }
 
-  return [normalizeThresholdValue(threshold)];
+  const normalized = normalizeThresholdValue(threshold, 'threshold');
+  if (normalized == null) {
+    return defaultEmpty ? [] : [0];
+  }
+
+  return [normalized];
+}
+
+/**
+ * Converts the user defined `rn_rootThreshold` value into an array of sorted valid
+ * threshold options for `IntersectionObserver` (double ∈ [0, 1]).
+ *
+ * If invalid array or null, returns null.
+ *
+ * @example
+ * normalizeRootThreshold(0.5);                 // → [0.5]
+ * normalizeRootThresholds([1, 0.5, 0]);        // → [0, 0.5, 1]
+ * normalizeRootThresholds([null, '0.5', '0']); // → [0, 0.5]
+ * normalizeRootThresholds(null);               // → null
+ * normalizeRootThresholds([null, null]);       // → null
+ */
+function normalizeRootThreshold(
+  rootThreshold: mixed,
+): null | $ReadOnlyArray<number> {
+  if (Array.isArray(rootThreshold)) {
+    const normalizedArr = rootThreshold
+      .map(rt => normalizeThresholdValue(rt, 'rn_rootThreshold'))
+      .filter((rt): rt is number => rt != null)
+      .sort();
+    return normalizedArr.length === 0 ? null : normalizedArr;
+  }
+
+  const normalized = normalizeThresholdValue(rootThreshold, 'rn_rootThreshold');
+  return normalized == null ? null : [normalized];
 }
 
-function normalizeThresholdValue(threshold: mixed): number {
+function normalizeThresholdValue(
+  threshold: mixed,
+  property: string,
+): null | number {
   if (threshold == null) {
-    return 0;
+    return null;
   }
 
   const thresholdAsNumber = Number(threshold);
   if (!Number.isFinite(thresholdAsNumber)) {
     throw new TypeError(
-      "Failed to read the 'threshold' property from 'IntersectionObserverInit': The provided double value is non-finite.",
+      `Failed to read the '${property}' property from 'IntersectionObserverInit': The provided double value is non-finite.`,
     );
   }
 

package/src/private/webapis/intersectionobserver/IntersectionObserverEntry.js

@@ -74,6 +74,32 @@ export default class IntersectionObserverEntry {
     return Math.min(ratio, 1);
   }
 
+  /**
+   * Returns the ratio of the `intersectionRect` to the `boundingRootRect`.
+   */
+  get rn_intersectionRootRatio(): number {
+    const intersectionRect = this.intersectionRect;
+
+    const rootRect = this._nativeEntry.rootRect;
+    const boundingRootRect = new DOMRectReadOnly(
+      rootRect[0],
+      rootRect[1],
+      rootRect[2],
+      rootRect[3],
+    );
+
+    if (boundingRootRect.width === 0 || boundingRootRect.height === 0) {
+      return 0;
+    }
+
+    const ratio =
+      (intersectionRect.width * intersectionRect.height) /
+      (boundingRootRect.width * boundingRootRect.height);
+
+    // Prevent rounding errors from making this value greater than 1.
+    return Math.min(ratio, 1);
+  }
+
   /**
    * Returns a `DOMRectReadOnly` representing the target's visible area.
    */

package/src/private/webapis/intersectionobserver/IntersectionObserverManager.js

@@ -162,6 +162,7 @@ export function observe({
     intersectionObserverId,
     targetShadowNode,
     thresholds: registeredObserver.observer.thresholds,
+    rootThresholds: registeredObserver.observer.rootThresholds,
   });
 
   return true;

package/src/private/webapis/intersectionobserver/specs/NativeIntersectionObserver.js

@@ -26,6 +26,7 @@ export type NativeIntersectionObserverObserveOptions = {
   intersectionObserverId: number,
   targetShadowNode: mixed,
   thresholds: $ReadOnlyArray<number>,
+  rootThresholds?: ?$ReadOnlyArray<number>,
 };
 
 export interface Spec extends TurboModule {