@office-iss/react-native-win32 0.71.5 → 0.72.0-preview.2

package/Libraries/ReactNative/UIManager.js

@@ -11,6 +11,9 @@
 import type {RootTag} from '../Types/RootTagTypes';
 import type {Spec} from './NativeUIManager';
 
+import {getFabricUIManager} from './FabricUIManager';
+import nullthrows from 'nullthrows';
+
 export interface UIManagerJSInterface extends Spec {
   +getViewManagerConfig: (viewManagerName: string) => Object;
   +hasViewManagerConfig: (viewManagerName: string) => boolean;
@@ -31,9 +34,173 @@ export interface UIManagerJSInterface extends Spec {
   ) => void;
 }
 
-const UIManager: UIManagerJSInterface =
+function isFabricReactTag(reactTag: number): boolean {
+  // React reserves even numbers for Fabric.
+  return reactTag % 2 === 0;
+}
+
+const UIManagerImpl: UIManagerJSInterface =
   global.RN$Bridgeless === true
     ? require('./BridgelessUIManager')
     : require('./PaperUIManager');
 
+// $FlowFixMe[cannot-spread-interface]
+const UIManager = {
+  ...UIManagerImpl,
+  measure(
+    reactTag: number,
+    callback: (
+      left: number,
+      top: number,
+      width: number,
+      height: number,
+      pageX: number,
+      pageY: number,
+    ) => void,
+  ): void {
+    if (isFabricReactTag(reactTag)) {
+      const FabricUIManager = nullthrows(getFabricUIManager());
+      const shadowNode =
+        FabricUIManager.findShadowNodeByTag_DEPRECATED(reactTag);
+      if (shadowNode) {
+        FabricUIManager.measure(shadowNode, callback);
+      } else {
+        console.warn(`measure cannot find view with tag #${reactTag}`);
+        // $FlowFixMe[incompatible-call]
+        callback();
+      }
+    } else {
+      // Paper
+      UIManagerImpl.measure(reactTag, callback);
+    }
+  },
+
+  measureInWindow(
+    reactTag: number,
+    callback: (
+      left: number,
+      top: number,
+      width: number,
+      height: number,
+    ) => void,
+  ): void {
+    if (isFabricReactTag(reactTag)) {
+      const FabricUIManager = nullthrows(getFabricUIManager());
+      const shadowNode =
+        FabricUIManager.findShadowNodeByTag_DEPRECATED(reactTag);
+      if (shadowNode) {
+        FabricUIManager.measureInWindow(shadowNode, callback);
+      } else {
+        console.warn(`measure cannot find view with tag #${reactTag}`);
+        // $FlowFixMe[incompatible-call]
+        callback();
+      }
+    } else {
+      // Paper
+      UIManagerImpl.measureInWindow(reactTag, callback);
+    }
+  },
+
+  measureLayout(
+    reactTag: number,
+    ancestorReactTag: number,
+    errorCallback: (error: Object) => void,
+    callback: (
+      left: number,
+      top: number,
+      width: number,
+      height: number,
+    ) => void,
+  ): void {
+    if (isFabricReactTag(reactTag)) {
+      const FabricUIManager = nullthrows(getFabricUIManager());
+      const shadowNode =
+        FabricUIManager.findShadowNodeByTag_DEPRECATED(reactTag);
+      const ancestorShadowNode =
+        FabricUIManager.findShadowNodeByTag_DEPRECATED(ancestorReactTag);
+
+      if (!shadowNode || !ancestorShadowNode) {
+        return;
+      }
+
+      FabricUIManager.measureLayout(
+        shadowNode,
+        ancestorShadowNode,
+        errorCallback,
+        callback,
+      );
+    } else {
+      // Paper
+      UIManagerImpl.measureLayout(
+        reactTag,
+        ancestorReactTag,
+        errorCallback,
+        callback,
+      );
+    }
+  },
+
+  measureLayoutRelativeToParent(
+    reactTag: number,
+    errorCallback: (error: Object) => void,
+    callback: (
+      left: number,
+      top: number,
+      width: number,
+      height: number,
+    ) => void,
+  ): void {
+    if (isFabricReactTag(reactTag)) {
+      console.warn(
+        'RCTUIManager.measureLayoutRelativeToParent method is deprecated and it will not be implemented in newer versions of RN (Fabric) - T47686450',
+      );
+      const FabricUIManager = nullthrows(getFabricUIManager());
+      const shadowNode =
+        FabricUIManager.findShadowNodeByTag_DEPRECATED(reactTag);
+      if (shadowNode) {
+        FabricUIManager.measure(
+          shadowNode,
+          (left, top, width, height, pageX, pageY) => {
+            callback(left, top, width, height);
+          },
+        );
+      }
+    } else {
+      // Paper
+      UIManagerImpl.measureLayoutRelativeToParent(
+        reactTag,
+        errorCallback,
+        callback,
+      );
+    }
+  },
+
+  dispatchViewManagerCommand(
+    reactTag: number,
+    commandName: number | string,
+    commandArgs: any[],
+  ) {
+    if (isFabricReactTag(reactTag)) {
+      const FabricUIManager = nullthrows(getFabricUIManager());
+      const shadowNode =
+        FabricUIManager.findShadowNodeByTag_DEPRECATED(reactTag);
+      if (shadowNode) {
+        // Transform the accidental CommandID into a CommandName which is the stringified number.
+        // The interop layer knows how to convert this number into the right method name.
+        // Stringify a string is a no-op, so it's safe.
+        commandName = `${commandName}`;
+        FabricUIManager.dispatchCommand(shadowNode, commandName, commandArgs);
+      }
+    } else {
+      UIManagerImpl.dispatchViewManagerCommand(
+        reactTag,
+        // We have some legacy components that are actually already using strings. ¯\_(ツ)_/¯
+        // $FlowFixMe[incompatible-call]
+        commandName,
+        commandArgs,
+      );
+    }
+  },
+};
+
 module.exports = UIManager;

package/Libraries/ReactNative/getCachedComponentWithDebugName.js

@@ -8,9 +8,11 @@
  * @format
  */
 
-import type {AbstractComponent, Node} from 'react';
+import type {AbstractComponent} from 'react';
 
-type NoopComponent = AbstractComponent<{children: Node}>;
+import * as React from 'react';
+
+type NoopComponent = AbstractComponent<{children: React.Node}>;
 
 const cache: Map<
   string, // displayName
@@ -23,9 +25,7 @@ export default function getCachedComponentWithDisplayName(
   let ComponentWithDisplayName = cache.get(displayName);
 
   if (!ComponentWithDisplayName) {
-    ComponentWithDisplayName = ({
-      children,
-    }: $TEMPORARY$object<{children: Node}>) => children;
+    ComponentWithDisplayName = ({children}: {children: React.Node}) => children;
     // $FlowFixMe[prop-missing]
     ComponentWithDisplayName.displayName = displayName;
     cache.set(displayName, ComponentWithDisplayName);

package/Libraries/ReactNative/getNativeComponentAttributes.js

@@ -12,7 +12,7 @@
 
 const ReactNativeStyleAttributes = require('../Components/View/ReactNativeStyleAttributes');
 const resolveAssetSource = require('../Image/resolveAssetSource');
-const processColor = require('../StyleSheet/processColor');
+const processColor = require('../StyleSheet/processColor').default;
 const processColorArray = require('../StyleSheet/processColorArray');
 const insetsDiffer = require('../Utilities/differ/insetsDiffer');
 const matricesDiffer = require('../Utilities/differ/matricesDiffer');

package/Libraries/ReactNative/requireNativeComponent.d.ts

@@ -7,7 +7,7 @@
  * @format
  */
 
-import {HostComponent} from '../../types/public//ReactNativeTypes';
+import {HostComponent} from '../../types/public/ReactNativeTypes';
 
 /**
  * Creates values that can be used like React components which represent native

package/Libraries/ReactNative/requireNativeComponent.js

@@ -29,4 +29,4 @@ const requireNativeComponent = <T>(uiViewClassName: string): HostComponent<T> =>
     getNativeComponentAttributes(uiViewClassName),
   ): any): HostComponent<T>);
 
-module.exports = requireNativeComponent;
+export default requireNativeComponent;

package/Libraries/ReactPrivate/ReactNativePrivateInterface.js

@@ -57,6 +57,7 @@ module.exports = {
     return require('../Utilities/deepFreezeAndThrowOnMutationInDev');
   },
   get flattenStyle(): flattenStyle<DangerouslyImpreciseStyleProp> {
+    // $FlowFixMe[underconstrained-implicit-instantiation]
     return require('../StyleSheet/flattenStyle');
   },
   get ReactFiberErrorDialog(): ReactFiberErrorDialog {

package/Libraries/Renderer/implementations/ReactFabric-dev.js

@@ -3419,6 +3419,23 @@ function mountSafeCallback_NOT_REALLY_SAFE(context, callback) {
     return callback.apply(context, arguments);
   };
 }
+function warnForStyleProps(props, validAttributes) {
+  {
+    for (var key in validAttributes.style) {
+      if (!(validAttributes[key] || props[key] === undefined)) {
+        error(
+          "You are setting the style `{ %s" +
+            ": ... }` as a prop. You " +
+            "should nest it in a style object. " +
+            "E.g. `{ style: { %s" +
+            ": ... } }`",
+          key,
+          key
+        );
+      }
+    }
+  }
+}
 
 // Modules provided by RN:
 var emptyObject = {};
@@ -5100,7 +5117,8 @@ var _nativeFabricUIManage = nativeFabricUIManager,
   FabricDefaultPriority = _nativeFabricUIManage.unstable_DefaultEventPriority,
   FabricDiscretePriority = _nativeFabricUIManage.unstable_DiscreteEventPriority,
   fabricGetCurrentEventPriority =
-    _nativeFabricUIManage.unstable_getCurrentEventPriority;
+    _nativeFabricUIManage.unstable_getCurrentEventPriority,
+  _setNativeProps = _nativeFabricUIManage.setNativeProps;
 var getViewConfigForType =
   ReactNativePrivateInterface.ReactNativeViewConfigRegistry.get; // Counter for uniquely identifying views.
 // % 10 === 1 means it is a rootTag.
@@ -5199,10 +5217,15 @@ var ReactFabricHostComponent = /*#__PURE__*/ (function() {
 
   _proto.setNativeProps = function setNativeProps(nativeProps) {
     {
-      error("Warning: setNativeProps is not currently supported in Fabric");
+      warnForStyleProps(nativeProps, this.viewConfig.validAttributes);
     }
 
-    return;
+    var updatePayload = create(nativeProps, this.viewConfig.validAttributes);
+    var stateNode = this._internalInstanceHandle.stateNode;
+
+    if (stateNode != null && updatePayload != null) {
+      _setNativeProps(stateNode.node, updatePayload);
+    }
   }; // This API (addEventListener, removeEventListener) attempts to adhere to the
   // w3 Level2 Events spec as much as possible, treating HostComponent as a DOM node.
   //

package/Libraries/Renderer/implementations/ReactFabric-prod.js

@@ -1922,6 +1922,7 @@ var _nativeFabricUIManage = nativeFabricUIManager,
   FabricDiscretePriority = _nativeFabricUIManage.unstable_DiscreteEventPriority,
   fabricGetCurrentEventPriority =
     _nativeFabricUIManage.unstable_getCurrentEventPriority,
+  _setNativeProps = _nativeFabricUIManage.setNativeProps,
   getViewConfigForType =
     ReactNativePrivateInterface.ReactNativeViewConfigRegistry.get,
   nextReactTag = 2;
@@ -1979,7 +1980,18 @@ var ReactFabricHostComponent = (function() {
         );
     }
   };
-  _proto.setNativeProps = function() {};
+  _proto.setNativeProps = function(nativeProps) {
+    nativeProps = diffProperties(
+      null,
+      emptyObject,
+      nativeProps,
+      this.viewConfig.validAttributes
+    );
+    var stateNode = this._internalInstanceHandle.stateNode;
+    null != stateNode &&
+      null != nativeProps &&
+      _setNativeProps(stateNode.node, nativeProps);
+  };
   _proto.addEventListener_unstable = function(eventType, listener, options) {
     if ("string" !== typeof eventType)
       throw Error("addEventListener_unstable eventType must be a string");

package/Libraries/Renderer/implementations/ReactFabric-profiling.js

@@ -1981,6 +1981,7 @@ var _nativeFabricUIManage = nativeFabricUIManager,
   FabricDiscretePriority = _nativeFabricUIManage.unstable_DiscreteEventPriority,
   fabricGetCurrentEventPriority =
     _nativeFabricUIManage.unstable_getCurrentEventPriority,
+  _setNativeProps = _nativeFabricUIManage.setNativeProps,
   getViewConfigForType =
     ReactNativePrivateInterface.ReactNativeViewConfigRegistry.get,
   nextReactTag = 2;
@@ -2038,7 +2039,18 @@ var ReactFabricHostComponent = (function() {
         );
     }
   };
-  _proto.setNativeProps = function() {};
+  _proto.setNativeProps = function(nativeProps) {
+    nativeProps = diffProperties(
+      null,
+      emptyObject,
+      nativeProps,
+      this.viewConfig.validAttributes
+    );
+    var stateNode = this._internalInstanceHandle.stateNode;
+    null != stateNode &&
+      null != nativeProps &&
+      _setNativeProps(stateNode.node, nativeProps);
+  };
   _proto.addEventListener_unstable = function(eventType, listener, options) {
     if ("string" !== typeof eventType)
       throw Error("addEventListener_unstable eventType must be a string");

package/Libraries/Renderer/public/ReactFabricPublicInstanceUtils.js

@@ -0,0 +1,38 @@
+/**
+ * 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
+ */
+
+/**
+ * IMPORTANT!!
+ *
+ * This module cannot import `ReactFabric` (directly or indirectly)
+ * because it can be used by apps only using the legacy renderer.
+ * In that case `nativeFabricUIManager` isn't defined and `ReactFabric` throws.
+ */
+
+export function isPublicInstance(maybeInstance: mixed): boolean {
+  return (
+    maybeInstance != null &&
+    // TODO: implement a better check when the instance is defined in the React Native repository.
+    (maybeInstance.__nativeTag != null ||
+      // TODO: remove this check when syncing the new version of the renderer from React to React Native.
+      isLegacyFabricInstance(maybeInstance))
+  );
+}
+
+function isLegacyFabricInstance(maybeInstance: mixed): boolean {
+  /* eslint-disable dot-notation */
+  return (
+    maybeInstance != null &&
+    // $FlowExpectedError[incompatible-use]
+    maybeInstance['_internalInstanceHandle'] != null &&
+    maybeInstance['_internalInstanceHandle'].stateNode != null &&
+    maybeInstance['_internalInstanceHandle'].stateNode.canonical != null
+  );
+}

package/Libraries/Renderer/shims/ReactNativeTypes.js

@@ -6,7 +6,7 @@
  *
  * @noformat
  * @flow strict
- * @generated SignedSource<<d9fed8e0aacc3113ceaf7d8e266300c6>>
+ * @generated SignedSource<<265b342f0d29323bebb711ba0bc882ec>>
  *
  * This file was sync'd from the facebook/react repository.
  */
@@ -51,7 +51,7 @@ export type AttributeConfiguration = $ReadOnly<{
   [propName: string]: AnyAttributeType,
   style: $ReadOnly<{
     [propName: string]: AnyAttributeType,
-    ...,
+    ...
   }>,
   ...
 }>;
@@ -60,7 +60,7 @@ export type PartialAttributeConfiguration = $ReadOnly<{
   [propName: string]: AnyAttributeType,
   style?: $ReadOnly<{
     [propName: string]: AnyAttributeType,
-    ...,
+    ...
   }>,
   ...
 }>;
@@ -79,13 +79,13 @@ export type ViewConfig = $ReadOnly<{
         skipBubbling?: ?boolean,
       }>,
     }>,
-    ...,
+    ...
   }>,
   directEventTypes?: $ReadOnly<{
     [eventName: string]: $ReadOnly<{
       registrationName: string,
     }>,
-    ...,
+    ...
   }>,
   uiViewClassName: string,
   validAttributes: AttributeConfiguration,
@@ -122,7 +122,7 @@ type SecretInternalsType = {
 
 type InspectorDataProps = $ReadOnly<{
   [propName: string]: string,
-  ...,
+  ...
 }>;
 
 type InspectorDataSource = $ReadOnly<{

package/Libraries/Renderer/shims/ReactNativeViewConfigRegistry.js

@@ -6,7 +6,7 @@
  *
  * @noformat
  * @flow strict-local
- * @generated SignedSource<<bda490a01513d4526005c1e029d5ce93>>
+ * @generated SignedSource<<47ba85d7f43c9b591d6804827322d00e>>
  *
  * This file was sync'd from the facebook/react repository.
  */
@@ -25,20 +25,20 @@ const customBubblingEventTypes: {
       skipBubbling?: ?boolean,
     }>,
   }>,
-  ...,
+  ...
 } = {};
 const customDirectEventTypes: {
   [eventName: string]: $ReadOnly<{
     registrationName: string,
   }>,
-  ...,
+  ...
 } = {};
 
 exports.customBubblingEventTypes = customBubblingEventTypes;
 exports.customDirectEventTypes = customDirectEventTypes;
 
-const viewConfigCallbacks = new Map();
-const viewConfigs = new Map();
+const viewConfigCallbacks = new Map<string, ?() => ViewConfig>();
+const viewConfigs = new Map<string, ViewConfig>();
 
 function processEventTypes(viewConfig: ViewConfig): void {
   const {bubblingEventTypes, directEventTypes} = viewConfig;
@@ -78,7 +78,7 @@ function processEventTypes(viewConfig: ViewConfig): void {
  * A callback is provided to load the view config from UIManager.
  * The callback is deferred until the view is actually rendered.
  */
-exports.register = function(name: string, callback: () => ViewConfig): string {
+exports.register = function (name: string, callback: () => ViewConfig): string {
   invariant(
     !viewConfigCallbacks.has(name),
     'Tried to register two views with the same name %s',
@@ -99,7 +99,7 @@ exports.register = function(name: string, callback: () => ViewConfig): string {
  * If this is the first time the view has been used,
  * This configuration will be lazy-loaded from UIManager.
  */
-exports.get = function(name: string): ViewConfig {
+exports.get = function (name: string): ViewConfig {
   let viewConfig;
   if (!viewConfigs.has(name)) {
     const callback = viewConfigCallbacks.get(name);

package/Libraries/Renderer/shims/createReactNativeComponentClass.js

@@ -6,7 +6,7 @@
  *
  * @noformat
  * @flow strict-local
- * @generated SignedSource<<7d3d4090dadea2daa09d92e5e66f6e5d>>
+ * @generated SignedSource<<e5e369f149ed8206141b7a3c2855bb85>>
  *
  * This file was sync'd from the facebook/react repository.
  */
@@ -26,7 +26,7 @@ const {register} = ReactNativeViewConfigRegistry;
  * @param {string} config iOS View configuration.
  * @private
  */
-const createReactNativeComponentClass = function(
+const createReactNativeComponentClass = function (
   name: string,
   callback: () => ViewConfig,
 ): string {

package/Libraries/Share/Share.js

@@ -11,7 +11,7 @@
 import NativeActionSheetManager from '../ActionSheetIOS/NativeActionSheetManager';
 import NativeShareModule from './NativeShareModule';
 
-const processColor = require('../StyleSheet/processColor');
+const processColor = require('../StyleSheet/processColor').default;
 const Platform = require('../Utilities/Platform');
 const invariant = require('invariant');
 

package/Libraries/StyleSheet/PlatformColorValueTypes.ios.js

@@ -78,7 +78,7 @@ export const processColorObject = (
   color: NativeColorValue,
 ): ?NativeColorValue => {
   if ('dynamic' in color && color.dynamic != null) {
-    const processColor = require('./processColor');
+    const processColor = require('./processColor').default;
     const dynamic = color.dynamic;
     const dynamicColor: NativeColorValue = {
       dynamic: {

package/Libraries/StyleSheet/StyleSheet.js

@@ -24,7 +24,7 @@ import type {
 } from './StyleSheetTypes';
 
 const ReactNativeStyleAttributes = require('../Components/View/ReactNativeStyleAttributes');
-const PixelRatio = require('../Utilities/PixelRatio');
+const PixelRatio = require('../Utilities/PixelRatio').default;
 const flatten = require('./flattenStyle');
 
 /**

package/Libraries/StyleSheet/StyleSheet.win32.js

@@ -24,7 +24,7 @@ import type {
 } from './StyleSheetTypes';
 
 const ReactNativeStyleAttributes = require('../Components/View/ReactNativeStyleAttributes');
-const PixelRatio = require('../Utilities/PixelRatio');
+const PixelRatio = require('../Utilities/PixelRatio').default;
 const Platform = require('../Utilities/Platform'); // [Win32]
 const flatten = require('./flattenStyle');