react-native-windows 0.71.10 → 0.72.0-preview.2

package/Libraries/Pressability/Pressability.js

@@ -112,7 +112,7 @@ export type PressabilityConfig = $ReadOnly<{|
   onLongPress?: ?(event: PressEvent) => mixed,
 
   /**
-   * Called when a press gestute has been triggered.
+   * Called when a press gesture has been triggered.
    */
   onPress?: ?(event: PressEvent) => mixed,
 
@@ -281,6 +281,8 @@ const DEFAULT_PRESS_RECT_OFFSETS = {
 };
 const DEFAULT_MIN_PRESS_DURATION = 130;
 
+const DEFAULT_LONG_PRESS_DEACTIVATION_DISTANCE = 10;
+let longPressDeactivationDistance = DEFAULT_LONG_PRESS_DEACTIVATION_DISTANCE;
 /**
  * Pressability implements press handling capabilities.
  *
@@ -430,6 +432,10 @@ export default class Pressability {
     return this._eventHandlers;
   }
 
+  static setLongPressDeactivationDistance(distance: number): void {
+    longPressDeactivationDistance = distance;
+  }
+
   _createEventHandlers(): EventHandlers {
     const focusEventHandlers = {
       onBlur: (event: BlurEvent): void => {
@@ -508,7 +514,7 @@ export default class Pressability {
         if (this._touchActivatePosition != null) {
           const deltaX = this._touchActivatePosition.pageX - touch.pageX;
           const deltaY = this._touchActivatePosition.pageY - touch.pageY;
-          if (Math.hypot(deltaX, deltaY) > 10) {
+          if (Math.hypot(deltaX, deltaY) > longPressDeactivationDistance) {
             this._cancelLongPressDelayTimeout();
           }
         }
@@ -559,8 +565,8 @@ export default class Pressability {
       ReactNativeFeatureFlags.shouldPressibilityUseW3CPointerEventsForHover()
     ) {
       const hoverPointerEvents = {
-        onPointerEnter: undefined,
-        onPointerLeave: undefined,
+        onPointerEnter: (undefined: void | (PointerEvent => void)),
+        onPointerLeave: (undefined: void | (PointerEvent => void)),
       };
       const {onHoverIn, onHoverOut} = this._config;
       if (onHoverIn != null) {

package/Libraries/Pressability/Pressability.windows.js

@@ -312,6 +312,8 @@ const DEFAULT_PRESS_RECT_OFFSETS = {
 };
 const DEFAULT_MIN_PRESS_DURATION = 130;
 
+const DEFAULT_LONG_PRESS_DEACTIVATION_DISTANCE = 10;
+let longPressDeactivationDistance = DEFAULT_LONG_PRESS_DEACTIVATION_DISTANCE;
 /**
  * Pressability implements press handling capabilities.
  *
@@ -462,6 +464,10 @@ export default class Pressability {
     return this._eventHandlers;
   }
 
+  static setLongPressDeactivationDistance(distance: number): void {
+    longPressDeactivationDistance = distance;
+  }
+
   _createEventHandlers(): EventHandlers {
     const focusEventHandlers = {
       onBlur: (event: BlurEvent): void => {
@@ -493,6 +499,7 @@ export default class Pressability {
 
       onResponderGrant: (event: PressEvent): void => {
         event.persist();
+
         this._cancelPressOutDelayTimeout();
 
         this._responderID = event.currentTarget;
@@ -540,7 +547,7 @@ export default class Pressability {
         if (this._touchActivatePosition != null) {
           const deltaX = this._touchActivatePosition.pageX - touch.pageX;
           const deltaY = this._touchActivatePosition.pageY - touch.pageY;
-          if (Math.hypot(deltaX, deltaY) > 10) {
+          if (Math.hypot(deltaX, deltaY) > longPressDeactivationDistance) {
             this._cancelLongPressDelayTimeout();
           }
         }
@@ -632,8 +639,8 @@ export default class Pressability {
       ReactNativeFeatureFlags.shouldPressibilityUseW3CPointerEventsForHover()
     ) {
       const hoverPointerEvents = {
-        onPointerEnter: undefined,
-        onPointerLeave: undefined,
+        onPointerEnter: (undefined: void | (PointerEvent => void)),
+        onPointerLeave: (undefined: void | (PointerEvent => void)),
       };
       const {onHoverIn, onHoverOut} = this._config;
       if (onHoverIn != null) {
@@ -869,7 +876,7 @@ export default class Pressability {
     const {pageX, pageY, button} = getTouchFromPressEvent(event);
     this._touchActivatePosition = {pageX, pageY};
     this._touchActivateTime = Date.now();
-    if (onPressIn != null && button === 0) {
+    if (onPressIn != null && this._isDefaultPressButton(button)) {
       onPressIn(event);
     }
   }

package/Libraries/ReactNative/AppContainer.js

@@ -32,6 +32,7 @@ type Props = $ReadOnly<{|
 type State = {|
   inspector: ?React.Node,
   devtoolsOverlay: ?React.Node,
+  traceUpdateOverlay: ?React.Node,
   mainKey: number,
   hasError: boolean,
 |};
@@ -40,6 +41,7 @@ class AppContainer extends React.Component<Props, State> {
   state: State = {
     inspector: null,
     devtoolsOverlay: null,
+    traceUpdateOverlay: null,
     mainKey: 1,
     hasError: false,
   };
@@ -75,7 +77,10 @@ class AppContainer extends React.Component<Props, State> {
           const devtoolsOverlay = (
             <DevtoolsOverlay inspectedView={this._mainRef} />
           );
-          this.setState({devtoolsOverlay});
+          const TraceUpdateOverlay =
+            require('../Components/TraceUpdateOverlay/TraceUpdateOverlay').default;
+          const traceUpdateOverlay = <TraceUpdateOverlay />;
+          this.setState({devtoolsOverlay, traceUpdateOverlay});
         }
       }
     }
@@ -127,6 +132,7 @@ class AppContainer extends React.Component<Props, State> {
       <RootTagContext.Provider value={createRootTag(this.props.rootTag)}>
         <View style={styles.appContainer} pointerEvents="box-none">
           {!this.state.hasError && innerView}
+          {this.state.traceUpdateOverlay}
           {this.state.devtoolsOverlay}
           {this.state.inspector}
           {logBox}

package/Libraries/ReactNative/AppRegistry.d.ts

@@ -8,7 +8,7 @@
  */
 
 import type * as React from 'react';
-import type {IPerformanceLogger} from '../Utilities/createPerformanceLogger';
+import type {IPerformanceLogger} from '../Utilities/IPerformanceLogger';
 
 type Task = (taskData: any) => Promise<void>;
 type TaskProvider = () => Task;

package/Libraries/ReactNative/AppRegistry.js

@@ -312,6 +312,7 @@ const AppRegistry = {
           NativeHeadlessJsTaskSupport &&
           reason instanceof HeadlessJsTaskError
         ) {
+          // $FlowFixMe[unused-promise]
           NativeHeadlessJsTaskSupport.notifyTaskRetry(taskId).then(
             retryPosted => {
               if (!retryPosted) {
@@ -340,19 +341,15 @@ const AppRegistry = {
 if (!(global.RN$Bridgeless === true)) {
   BatchedBridge.registerCallableModule('AppRegistry', AppRegistry);
 
-  if (__DEV__) {
-    const LogBoxInspector =
-      require('../LogBox/LogBoxInspectorContainer').default;
-    AppRegistry.registerComponent('LogBox', () => LogBoxInspector);
-  } else {
-    AppRegistry.registerComponent(
-      'LogBox',
-      () =>
-        function NoOp() {
-          return null;
-        },
-    );
-  }
+  AppRegistry.registerComponent('LogBox', () => {
+    if (__DEV__) {
+      return require('../LogBox/LogBoxInspectorContainer').default;
+    } else {
+      return function NoOp() {
+        return null;
+      };
+    }
+  });
 }
 
 module.exports = AppRegistry;

package/Libraries/ReactNative/FabricUIManager.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
  */
 
@@ -19,7 +19,7 @@ import type {
 import type {RootTag} from '../Types/RootTagTypes';
 
 // TODO: type these properly.
-type Node = {...};
+export opaque type Node = {...};
 type NodeSet = Array<Node>;
 type NodeProps = {...};
 type InstanceHandle = {...};
@@ -53,13 +53,29 @@ export type Spec = {|
   +configureNextLayoutAnimation: (
     config: LayoutAnimationConfig,
     callback: () => void, // check what is returned here
-    // This error isn't currently called anywhere, so the `error` object is really not defined
-    // $FlowFixMe[unclear-type]
-    errorCallback: (error: Object) => void,
+    errorCallback: () => void,
   ) => void,
   +sendAccessibilityEvent: (node: Node, eventType: string) => void,
+  +findShadowNodeByTag_DEPRECATED: (reactTag: number) => ?Node,
+  +getBoundingClientRect: (
+    node: Node,
+  ) => [
+    /* x:*/ number,
+    /* y:*/ number,
+    /* width:*/ number,
+    /* height:*/ number,
+  ],
+  +setNativeProps: (node: Node, newProps: NodeProps) => void,
+  +dispatchCommand: (
+    node: Node,
+    commandName: string,
+    args: Array<mixed>,
+  ) => void,
 |};
 
-const FabricUIManager: ?Spec = global.nativeFabricUIManager;
-
-module.exports = FabricUIManager;
+// This is exposed as a getter because apps using the legacy renderer AND
+// Fabric can define the binding lazily. If we evaluated the global and cached
+// it in the module we might be caching an `undefined` value before it is set.
+export function getFabricUIManager(): ?Spec {
+  return global.nativeFabricUIManager;
+}

package/Libraries/ReactNative/NativeUIManager.js

@@ -44,7 +44,7 @@ export interface Spec extends TurboModule {
     commandArgs: ?Array<any>,
   ) => void;
   +measure: (
-    reactTag: ?number,
+    reactTag: number,
     callback: (
       left: number,
       top: number,
@@ -55,7 +55,7 @@ export interface Spec extends TurboModule {
     ) => void,
   ) => void;
   +measureInWindow: (
-    reactTag: ?number,
+    reactTag: number,
     callback: (x: number, y: number, width: number, height: number) => void,
   ) => void;
   +viewIsDescendantOf: (
@@ -64,8 +64,8 @@ export interface Spec extends TurboModule {
     callback: (result: Array<boolean>) => void,
   ) => void;
   +measureLayout: (
-    reactTag: ?number,
-    ancestorReactTag: ?number,
+    reactTag: number,
+    ancestorReactTag: number,
     errorCallback: (error: Object) => void,
     callback: (
       left: number,
@@ -75,7 +75,7 @@ export interface Spec extends TurboModule {
     ) => void,
   ) => void;
   +measureLayoutRelativeToParent: (
-    reactTag: ?number,
+    reactTag: number,
     errorCallback: (error: Object) => void,
     callback: (
       left: number,

package/Libraries/ReactNative/ReactNativeFeatureFlags.js

@@ -4,12 +4,10 @@
  * 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
  */
 
-'use strict';
-
 export type FeatureFlags = {|
   /**
    * Function used to enable / disabled Layout Animations in React Native.
@@ -39,12 +37,14 @@ export type FeatureFlags = {|
    */
   animatedShouldUseSingleOp: () => boolean,
   /**
-   * This feature flag enables an experimental render system that allows
-   * to render react components driven by classes written in C++.
+   * Enables GlobalPerformanceLogger replacement with a WebPerformance API based
+   * implementation
    */
-  enableCppRenderSystem: () => boolean,
-
-  removeListenersOnDetach: () => boolean,
+  isGlobalWebPerformanceLoggerEnabled: () => boolean,
+  /**
+   * Enables access to the host tree in Fabric using DOM-compatible APIs.
+   */
+  enableAccessToHostTreeInFabric: () => boolean,
 |};
 
 const ReactNativeFeatureFlags: FeatureFlags = {
@@ -53,8 +53,8 @@ const ReactNativeFeatureFlags: FeatureFlags = {
   shouldPressibilityUseW3CPointerEventsForHover: () => false,
   animatedShouldDebounceQueueFlush: () => false,
   animatedShouldUseSingleOp: () => false,
-  enableCppRenderSystem: () => false,
-  removeListenersOnDetach: () => false,
+  isGlobalWebPerformanceLoggerEnabled: () => false,
+  enableAccessToHostTreeInFabric: () => false,
 };
 
 module.exports = ReactNativeFeatureFlags;

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");