react-native-windows 0.70.9 → 0.71.0-preview.2

package/Libraries/ReactNative/AppRegistry.js

@@ -8,21 +8,20 @@
  * @format
  */
 
-const BatchedBridge = require('../BatchedBridge/BatchedBridge');
-const BugReporting = require('../BugReporting/BugReporting');
-const ReactNative = require('../Renderer/shims/ReactNative');
-const SceneTracker = require('../Utilities/SceneTracker');
-
-const infoLog = require('../Utilities/infoLog');
-const invariant = require('invariant');
-const renderApplication = require('./renderApplication');
+import type {RootTag} from '../Types/RootTagTypes';
 import type {IPerformanceLogger} from '../Utilities/createPerformanceLogger';
 
-import {coerceDisplayMode} from './DisplayMode';
+import BatchedBridge from '../BatchedBridge/BatchedBridge';
+import BugReporting from '../BugReporting/BugReporting';
 import createPerformanceLogger from '../Utilities/createPerformanceLogger';
-import NativeHeadlessJsTaskSupport from './NativeHeadlessJsTaskSupport';
+import infoLog from '../Utilities/infoLog';
+import SceneTracker from '../Utilities/SceneTracker';
+import {coerceDisplayMode} from './DisplayMode';
 import HeadlessJsTaskError from './HeadlessJsTaskError';
-import type {RootTag} from 'react-native/Libraries/Types/RootTagTypes';
+import NativeHeadlessJsTaskSupport from './NativeHeadlessJsTaskSupport';
+import renderApplication from './renderApplication';
+import {unmountComponentAtNodeAndRemoveContainer} from './RendererProxy';
+import invariant from 'invariant';
 
 type Task = (taskData: any) => Promise<void>;
 export type TaskProvider = () => Task;
@@ -250,9 +249,7 @@ const AppRegistry = {
    * See https://reactnative.dev/docs/appregistry#unmountapplicationcomponentatroottag
    */
   unmountApplicationComponentAtRootTag(rootTag: RootTag): void {
-    // NOTE: RootTag type
-    // $FlowFixMe[incompatible-call] RootTag: RootTag is incompatible with number, needs an updated synced version of the ReactNativeTypes.js file
-    ReactNative.unmountComponentAtNodeAndRemoveContainer(rootTag);
+    unmountComponentAtNodeAndRemoveContainer(rootTag);
   },
 
   /**

package/Libraries/ReactNative/BridgelessUIManager.js

@@ -10,8 +10,9 @@
 
 'use strict';
 
-import type {RootTag} from 'react-native/Libraries/Types/RootTagTypes';
-import {unstable_hasComponent} from 'react-native/Libraries/NativeComponent/NativeComponentRegistryUnstable';
+import type {RootTag} from '../Types/RootTagTypes';
+
+import {unstable_hasComponent} from '../NativeComponent/NativeComponentRegistryUnstable';
 
 const errorMessageForMethod = (methodName: string): string =>
   "[ReactNative Architecture][JS] '" +
@@ -146,7 +147,7 @@ module.exports = {
       errorMessageForMethod('setLayoutAnimationEnabledExperimental'),
     );
   },
-  // Please use AccessibilityInfo.sendAccessibilityEvent_unstable instead.
+  // Please use AccessibilityInfo.sendAccessibilityEvent instead.
   // See SetAccessibilityFocusExample in AccessibilityExample.js for a migration example.
   sendAccessibilityEvent: (reactTag: ?number, eventType: number): void =>
     console.error(errorMessageForMethod('sendAccessibilityEvent')),

package/Libraries/ReactNative/FabricUIManager.js

@@ -11,12 +11,12 @@
 'use strict';
 
 import type {
-  MeasureOnSuccessCallback,
+  LayoutAnimationConfig,
   MeasureInWindowOnSuccessCallback,
   MeasureLayoutOnSuccessCallback,
-  LayoutAnimationConfig,
+  MeasureOnSuccessCallback,
 } from '../Renderer/shims/ReactNativeTypes';
-import type {RootTag} from 'react-native/Libraries/Types/RootTagTypes';
+import type {RootTag} from '../Types/RootTagTypes';
 
 // TODO: type these properly.
 type Node = {...};

package/Libraries/ReactNative/I18nManager.d.ts

@@ -0,0 +1,25 @@
+/**
+ * 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.
+ *
+ * @format
+ */
+
+export interface I18nManagerStatic {
+  getConstants: () => {
+    isRTL: boolean;
+    doLeftAndRightSwapInRTL: boolean;
+    localeIdentifier?: string | null | undefined;
+  };
+  allowRTL: (allowRTL: boolean) => void;
+  forceRTL: (forceRTL: boolean) => void;
+  swapLeftAndRightInRTL: (swapLeftAndRight: boolean) => void;
+  isRTL: boolean;
+  doLeftAndRightSwapInRTL: boolean;
+}
+
+/** https://reactnative.dev/blog/2016/08/19/right-to-left-support-for-react-native-apps */
+export const I18nManager: I18nManagerStatic;
+export type I18nManager = I18nManagerStatic;

package/Libraries/ReactNative/NativeHeadlessJsTaskSupport.js

@@ -9,6 +9,7 @@
  */
 
 import type {TurboModule} from '../TurboModule/RCTExport';
+
 import * as TurboModuleRegistry from '../TurboModule/TurboModuleRegistry';
 
 export interface Spec extends TurboModule {

package/Libraries/ReactNative/NativeI18nManager.js

@@ -9,6 +9,7 @@
  */
 
 import type {TurboModule} from '../TurboModule/RCTExport';
+
 import * as TurboModuleRegistry from '../TurboModule/TurboModuleRegistry';
 
 export interface Spec extends TurboModule {

package/Libraries/ReactNative/NativeUIManager.js

@@ -10,6 +10,7 @@
 
 import type {RootTag} from '../TurboModule/RCTExport';
 import type {TurboModule} from '../TurboModule/RCTExport';
+
 import * as TurboModuleRegistry from '../TurboModule/TurboModuleRegistry';
 
 export interface Spec extends TurboModule {

package/Libraries/ReactNative/PaperUIManager.js

@@ -8,7 +8,7 @@
  * @format
  */
 
-import type {RootTag} from 'react-native/Libraries/Types/RootTagTypes';
+import type {RootTag} from '../Types/RootTagTypes';
 
 import NativeUIManager from './NativeUIManager';
 
@@ -19,7 +19,7 @@ const UIManagerProperties = require('./UIManagerProperties');
 
 const viewManagerConfigs: {[string]: any | null} = {};
 
-const triedLoadingConfig = new Set();
+const triedLoadingConfig = new Set<string>();
 
 let NativeUIManagerConstants = {};
 let isNativeUIManagerConstantsSet = false;

package/Libraries/ReactNative/PaperUIManager.windows.js

@@ -18,7 +18,7 @@ import NativeUIManager from './NativeUIManager';
 
 const viewManagerConfigs: {[string]: any | null} = {};
 
-const triedLoadingConfig = new Set();
+const triedLoadingConfig = new Set<string>();
 
 let NativeUIManagerConstants = {};
 let isNativeUIManagerConstantsSet = false;

package/Libraries/ReactNative/ReactNativeFeatureFlags.js

@@ -38,6 +38,13 @@ export type FeatureFlags = {|
    * traffic.
    */
   animatedShouldUseSingleOp: () => boolean,
+  /**
+   * This feature flag enables an experimental render system that allows
+   * to render react components driven by classes written in C++.
+   */
+  enableCppRenderSystem: () => boolean,
+
+  removeListenersOnDetach: () => boolean,
 |};
 
 const ReactNativeFeatureFlags: FeatureFlags = {
@@ -46,6 +53,8 @@ const ReactNativeFeatureFlags: FeatureFlags = {
   shouldPressibilityUseW3CPointerEventsForHover: () => false,
   animatedShouldDebounceQueueFlush: () => false,
   animatedShouldUseSingleOp: () => false,
+  enableCppRenderSystem: () => false,
+  removeListenersOnDetach: () => false,
 };
 
 module.exports = ReactNativeFeatureFlags;

package/Libraries/ReactNative/RendererImplementation.js

@@ -0,0 +1,112 @@
+/**
+ * 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.
+ *
+ * @format
+ * @flow strict-local
+ */
+
+import type {HostComponent} from '../Renderer/shims/ReactNativeTypes';
+import type {Element, ElementRef, ElementType} from 'react';
+
+import {type RootTag} from './RootTag';
+
+export function renderElement({
+  element,
+  rootTag,
+  useFabric,
+  useConcurrentRoot,
+}: {
+  element: Element<ElementType>,
+  rootTag: number,
+  useFabric: boolean,
+  useConcurrentRoot: boolean,
+}): void {
+  if (useFabric) {
+    require('../Renderer/shims/ReactFabric').render(
+      element,
+      rootTag,
+      null,
+      useConcurrentRoot,
+    );
+  } else {
+    require('../Renderer/shims/ReactNative').render(element, rootTag);
+  }
+}
+
+export function findHostInstance_DEPRECATED<TElementType: ElementType>(
+  componentOrHandle: ?(ElementRef<TElementType> | number),
+): ?ElementRef<HostComponent<mixed>> {
+  return require('../Renderer/shims/ReactNative').findHostInstance_DEPRECATED(
+    componentOrHandle,
+  );
+}
+
+export function findNodeHandle<TElementType: ElementType>(
+  componentOrHandle: ?(ElementRef<TElementType> | number),
+): ?number {
+  return require('../Renderer/shims/ReactNative').findNodeHandle(
+    componentOrHandle,
+  );
+}
+
+export function dispatchCommand(
+  handle: ElementRef<HostComponent<mixed>>,
+  command: string,
+  args: Array<mixed>,
+): void {
+  if (global.RN$Bridgeless === true) {
+    // Note: this function has the same implementation in the legacy and new renderer.
+    // However, evaluating the old renderer comes with some side effects.
+    return require('../Renderer/shims/ReactFabric').dispatchCommand(
+      handle,
+      command,
+      args,
+    );
+  } else {
+    return require('../Renderer/shims/ReactNative').dispatchCommand(
+      handle,
+      command,
+      args,
+    );
+  }
+}
+
+export function sendAccessibilityEvent(
+  handle: ElementRef<HostComponent<mixed>>,
+  eventType: string,
+): void {
+  return require('../Renderer/shims/ReactNative').sendAccessibilityEvent(
+    handle,
+    eventType,
+  );
+}
+
+/**
+ * This method is used by AppRegistry to unmount a root when using the old
+ * React Native renderer (Paper).
+ */
+export function unmountComponentAtNodeAndRemoveContainer(rootTag: RootTag) {
+  // $FlowExpectedError[incompatible-type] rootTag is an opaque type so we can't really cast it as is.
+  const rootTagAsNumber: number = rootTag;
+  require('../Renderer/shims/ReactNative').unmountComponentAtNodeAndRemoveContainer(
+    rootTagAsNumber,
+  );
+}
+
+export function unstable_batchedUpdates<T>(
+  fn: T => void,
+  bookkeeping: T,
+): void {
+  // This doesn't actually do anything when batching updates for a Fabric root.
+  return require('../Renderer/shims/ReactNative').unstable_batchedUpdates(
+    fn,
+    bookkeeping,
+  );
+}
+
+export function isProfilingRenderer(): boolean {
+  return Boolean(__DEV__);
+}

package/Libraries/ReactNative/RendererProxy.d.ts

@@ -0,0 +1,20 @@
+/**
+ * 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.
+ *
+ * @format
+ */
+
+import type * as React from 'react';
+
+export type NodeHandle = number;
+
+export function findNodeHandle(
+  componentOrHandle:
+    | null
+    | number
+    | React.Component<any, any>
+    | React.ComponentClass<any>,
+): null | NodeHandle;

package/Libraries/ReactNative/RendererProxy.js

@@ -0,0 +1,26 @@
+/**
+ * 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.
+ *
+ * @format
+ * @flow strict-local
+ */
+
+/**
+ * This module exists to allow apps to select their renderer implementation
+ * (e.g.: Fabric-only, Paper-only) without having to pull all the renderer
+ * implementations into their app bundle, which affects app size.
+ *
+ * By default, the setup will be:
+ *   -> RendererProxy
+ *     -> RendererImplementation (which uses Fabric or Paper depending on a flag at runtime)
+ *
+ * But this will allow a setup like this without duplicating logic:
+ *   -> RendererProxy (fork)
+ *     -> RendererImplementation (which uses Fabric or Paper depending on a flag at runtime)
+ *     or -> OtherImplementation (which uses Fabric only)
+ */
+
+export * from './RendererImplementation';

package/Libraries/ReactNative/RootTag.js

@@ -10,7 +10,6 @@
 
 import * as React from 'react';
 
-// TODO: Make this into an opaque type.
 export opaque type RootTag = number;
 
 export const RootTagContext: React$Context<RootTag> =

package/Libraries/ReactNative/UIManager.d.ts

@@ -0,0 +1,157 @@
+/**
+ * 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.
+ *
+ * @format
+ */
+
+import type * as React from 'react';
+import {
+  MeasureInWindowOnSuccessCallback,
+  MeasureLayoutOnSuccessCallback,
+  MeasureOnSuccessCallback,
+} from '../../types/public/ReactNativeTypes';
+
+export interface UIManagerStatic {
+  /**
+   * Capture an image of the screen, window or an individual view. The image
+   * will be stored in a temporary file that will only exist for as long as the
+   * app is running.
+   *
+   * The `view` argument can be the literal string `window` if you want to
+   * capture the entire window, or it can be a reference to a specific
+   * React Native component.
+   *
+   * The `options` argument may include:
+   * - width/height (number) - the width and height of the image to capture.
+   * - format (string) - either 'png' or 'jpeg'. Defaults to 'png'.
+   * - quality (number) - the quality when using jpeg. 0.0 - 1.0 (default).
+   *
+   * Returns a Promise<string> (tempFilePath)
+   * @platform ios
+   */
+  takeSnapshot: (
+    view?: 'window' | React.ReactElement | number,
+    options?: {
+      width?: number | undefined;
+      height?: number | undefined;
+      format?: 'png' | 'jpeg' | undefined;
+      quality?: number | undefined;
+    },
+  ) => Promise<string>;
+
+  /**
+   * Determines the location on screen, width, and height of the given view and
+   * returns the values via an async callback. If successful, the callback will
+   * be called with the following arguments:
+   *
+   *  - x
+   *  - y
+   *  - width
+   *  - height
+   *  - pageX
+   *  - pageY
+   *
+   * Note that these measurements are not available until after the rendering
+   * has been completed in native. If you need the measurements as soon as
+   * possible, consider using the [`onLayout`
+   * prop](docs/view.html#onlayout) instead.
+   *
+   * @deprecated Use `ref.measure` instead.
+   */
+  measure(node: number, callback: MeasureOnSuccessCallback): void;
+
+  /**
+   * Determines the location of the given view in the window and returns the
+   * values via an async callback. If the React root view is embedded in
+   * another native view, this will give you the absolute coordinates. If
+   * successful, the callback will be called with the following
+   * arguments:
+   *
+   *  - x
+   *  - y
+   *  - width
+   *  - height
+   *
+   * Note that these measurements are not available until after the rendering
+   * has been completed in native.
+   *
+   * @deprecated Use `ref.measureInWindow` instead.
+   */
+  measureInWindow(
+    node: number,
+    callback: MeasureInWindowOnSuccessCallback,
+  ): void;
+
+  /**
+   * Like [`measure()`](#measure), but measures the view relative an ancestor,
+   * specified as `relativeToNativeNode`. This means that the returned x, y
+   * are relative to the origin x, y of the ancestor view.
+   *
+   * As always, to obtain a native node handle for a component, you can use
+   * `React.findNodeHandle(component)`.
+   *
+   * @deprecated Use `ref.measureLayout` instead.
+   */
+  measureLayout(
+    node: number,
+    relativeToNativeNode: number,
+    onFail: () => void /* currently unused */,
+    onSuccess: MeasureLayoutOnSuccessCallback,
+  ): void;
+
+  /**
+   * Automatically animates views to their new positions when the
+   * next layout happens.
+   *
+   * A common way to use this API is to call it before calling `setState`.
+   *
+   * Note that in order to get this to work on **Android** you need to set the following flags via `UIManager`:
+   *
+   *     UIManager.setLayoutAnimationEnabledExperimental && UIManager.setLayoutAnimationEnabledExperimental(true);
+   */
+  setLayoutAnimationEnabledExperimental(value: boolean): void;
+
+  /**
+   * Used to display an Android PopupMenu. If a menu item is pressed, the success callback will
+   * be called with the following arguments:
+   *
+   *  - item - the menu item.
+   *  - index - index of the pressed item in array. Returns `undefined` if cancelled.
+   *
+   * To obtain a native node handle for a component, you can use
+   * `React.findNodeHandle(component)`.
+   *
+   * Note that this works only on Android
+   */
+  showPopupMenu(
+    node: number,
+    items: string[],
+    error: () => void /* currently unused */,
+    success: (item: string, index: number | undefined) => void,
+  ): void;
+
+  getViewManagerConfig: (name: string) => {
+    Commands: {[key: string]: number};
+  };
+
+  hasViewManagerConfig: (name: string) => boolean;
+
+  /**
+   * Used to call a native view method from JavaScript
+   *
+   * reactTag - Id of react view.
+   * commandID - Id of the native method that should be called.
+   * commandArgs - Args of the native method that we can pass from JS to native.
+   */
+  dispatchViewManagerCommand: (
+    reactTag: number | null,
+    commandID: number | string,
+    commandArgs?: Array<any>,
+  ) => void;
+}
+
+export const UIManager: UIManagerStatic;
+export type UIManager = UIManagerStatic;

package/Libraries/ReactNative/UIManager.js

@@ -8,8 +8,8 @@
  * @format
  */
 
+import type {RootTag} from '../Types/RootTagTypes';
 import type {Spec} from './NativeUIManager';
-import type {RootTag} from 'react-native/Libraries/Types/RootTagTypes';
 
 export interface UIManagerJSInterface extends Spec {
   +getViewManagerConfig: (viewManagerName: string) => Object;

package/Libraries/ReactNative/getCachedComponentWithDebugName.js

@@ -26,6 +26,7 @@ export default function getCachedComponentWithDisplayName(
     ComponentWithDisplayName = ({
       children,
     }: $TEMPORARY$object<{children: Node}>) => children;
+    // $FlowFixMe[prop-missing]
     ComponentWithDisplayName.displayName = displayName;
     cache.set(displayName, ComponentWithDisplayName);
   }

package/Libraries/ReactNative/renderApplication.js

@@ -8,20 +8,26 @@
  * @flow
  */
 
-const AppContainer = require('./AppContainer');
-import GlobalPerformanceLogger from '../Utilities/GlobalPerformanceLogger';
 import type {IPerformanceLogger} from '../Utilities/createPerformanceLogger';
+
+import GlobalPerformanceLogger from '../Utilities/GlobalPerformanceLogger';
 import PerformanceLoggerContext from '../Utilities/PerformanceLoggerContext';
-import type {DisplayModeType} from './DisplayMode';
+import AppContainer from './AppContainer';
+import DisplayMode, {type DisplayModeType} from './DisplayMode';
 import getCachedComponentWithDebugName from './getCachedComponentWithDebugName';
-const React = require('react');
-
-const invariant = require('invariant');
+import * as Renderer from './RendererProxy';
+import invariant from 'invariant';
+import * as React from 'react';
 
 // require BackHandler so it sets the default handler that exits the app if no listeners respond
-require('../Utilities/BackHandler');
+import '../Utilities/BackHandler';
 
-function renderApplication<Props: Object>(
+type OffscreenType = React.AbstractComponent<{
+  mode: 'visible' | 'hidden',
+  children: React.Node,
+}>;
+
+export default function renderApplication<Props: Object>(
   RootComponent: React.ComponentType<Props>,
   initialProps: Props,
   rootTag: any,
@@ -33,6 +39,7 @@ function renderApplication<Props: Object>(
   debugName?: string,
   displayMode?: ?DisplayModeType,
   useConcurrentRoot?: boolean,
+  useOffscreen?: boolean,
 ) {
   invariant(rootTag, 'Expect to have a valid rootTag, instead got ', rootTag);
 
@@ -63,23 +70,34 @@ function renderApplication<Props: Object>(
     );
   }
 
+  if (useOffscreen && displayMode != null) {
+    // $FlowFixMe[incompatible-type]
+    // $FlowFixMe[prop-missing]
+    const Offscreen: OffscreenType = React.unstable_Offscreen;
+
+    renderable = (
+      <Offscreen
+        mode={displayMode === DisplayMode.VISIBLE ? 'visible' : 'hidden'}>
+        {renderable}
+      </Offscreen>
+    );
+  }
+
   performanceLogger.startTimespan('renderApplication_React_render');
   performanceLogger.setExtra(
     'usedReactConcurrentRoot',
     useConcurrentRoot ? '1' : '0',
   );
   performanceLogger.setExtra('usedReactFabric', fabric ? '1' : '0');
-  if (fabric) {
-    require('../Renderer/shims/ReactFabric').render(
-      renderable,
-      rootTag,
-      null,
-      useConcurrentRoot,
-    );
-  } else {
-    require('../Renderer/shims/ReactNative').render(renderable, rootTag);
-  }
+  performanceLogger.setExtra(
+    'usedReactProfiler',
+    Renderer.isProfilingRenderer(),
+  );
+  Renderer.renderElement({
+    element: renderable,
+    rootTag,
+    useFabric: Boolean(fabric),
+    useConcurrentRoot: Boolean(useConcurrentRoot),
+  });
   performanceLogger.stopTimespan('renderApplication_React_render');
 }
-
-module.exports = renderApplication;

package/Libraries/ReactNative/requireNativeComponent.d.ts

@@ -0,0 +1,23 @@
+/**
+ * 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.
+ *
+ * @format
+ */
+
+import {HostComponent} from '../../types/public//ReactNativeTypes';
+
+/**
+ * Creates values that can be used like React components which represent native
+ * view managers. You should create JavaScript modules that wrap these values so
+ * that the results are memoized. Example:
+ *
+ *   const View = requireNativeComponent('RCTView');
+ *
+ * The concrete return type of `requireNativeComponent` is a string, but the declared type is
+ * `HostComponent` because TypeScript assumes anonymous JSX intrinsics (e.g. a `string`) not
+ * to have any props.
+ */
+export function requireNativeComponent<T>(viewName: string): HostComponent<T>;

package/Libraries/ReactNative/requireNativeComponent.js

@@ -10,11 +10,11 @@
 
 'use strict';
 
+import type {HostComponent} from '../Renderer/shims/ReactNativeTypes';
+
 const createReactNativeComponentClass = require('../Renderer/shims/createReactNativeComponentClass');
 const getNativeComponentAttributes = require('./getNativeComponentAttributes');
 
-import type {HostComponent} from '../Renderer/shims/ReactNativeTypes';
-
 /**
  * Creates values that can be used like React components which represent native
  * view managers. You should create JavaScript modules that wrap these values so