react-native-windows 0.82.3 → 0.83.0-preview.1

package/Libraries/NativeComponent/NativeComponentRegistry.d.ts

@@ -0,0 +1,98 @@
+/**
+ * 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 {HostComponent} from '../../types/public/ReactNativeTypes';
+import * as React from 'react';
+
+/**
+ * Configures a function that is called to determine whether a given component
+ * should be registered using reflection of the native component at runtime.
+ *
+ * The provider should return null if the native component is unavailable in
+ * the current environment.
+ */
+export function setRuntimeConfigProvider(
+  runtimeConfigProvider: (name: string) => {
+    native: boolean;
+    verify: boolean;
+  } | null,
+): void;
+
+/**
+ * Gets a `NativeComponent` that can be rendered by React Native.
+ *
+ * The supplied `viewConfigProvider` may or may not be invoked and utilized,
+ * depending on how `setRuntimeConfigProvider` is configured.
+ */
+export function get<Config extends object>(
+  name: string,
+  viewConfigProvider: () => PartialViewConfig,
+): HostComponent<Config>;
+
+/**
+ * Same as `NativeComponentRegistry.get(...)`, except this will check either
+ * the `setRuntimeConfigProvider` configuration or use native reflection (slow)
+ * to determine whether this native component is available.
+ *
+ * If the native component is not available, a stub component is returned. Note
+ * that the return value of this is not `HostComponent` because the returned
+ * component instance is not guaranteed to have native methods.
+ */
+export function getWithFallback_DEPRECATED<Config extends object>(
+  name: string,
+  viewConfigProvider: () => PartialViewConfig,
+): React.ComponentType<Config>;
+
+/**
+ * Unstable API. Do not use!
+ *
+ * This method returns if there is a StaticViewConfig registered for the
+ * component name received as a parameter.
+ */
+export function unstable_hasStaticViewConfig(name: string): boolean;
+
+type AttributeType<T, V> =
+  | true
+  | {
+      readonly diff?: ((arg1: T, arg2: T) => boolean) | undefined;
+      readonly process?: ((arg1: V) => T) | undefined;
+    };
+type AnyAttributeType = AttributeType<any, any>;
+type AttributeConfiguration = {
+  readonly [propName: string]: AnyAttributeType | void;
+  readonly style?:
+    | {
+        readonly [propName: string]: AnyAttributeType;
+      }
+    | undefined;
+};
+
+type PartialViewConfig = Readonly<{
+  bubblingEventTypes?:
+    | {
+        readonly [eventName: string]: {
+          readonly phasedRegistrationNames: {
+            readonly bubbled: string;
+            readonly captured: string;
+            readonly skipBubbling?: boolean | undefined;
+          };
+        };
+      }
+    | undefined;
+  directEventTypes?:
+    | {
+        readonly [eventName: string]: {
+          readonly registrationName: string;
+        };
+      }
+    | undefined;
+  supportsRawText?: boolean | undefined;
+  uiViewClassName: string;
+  validAttributes?: AttributeConfiguration | undefined;
+}>;

package/Libraries/NativeComponent/NativeComponentRegistry.js

@@ -129,11 +129,13 @@ export function getWithFallback_DEPRECATED<Config: {...}>(
     // `getRuntimeConfig == null` when static view configs are disabled
     // If `setRuntimeConfigProvider` is not configured, use native reflection.
     if (hasNativeViewConfig(name)) {
+      /* $FlowFixMe[incompatible-type] Extra ref prop */
       return get<Config>(name, viewConfigProvider);
     }
   } else {
     // If there is no runtime config, then the native component is unavailable.
     if (getRuntimeConfig(name) != null) {
+      /* $FlowFixMe[incompatible-type] Extra ref prop */
       return get<Config>(name, viewConfigProvider);
     }
   }

package/Libraries/NativeComponent/NativeComponentRegistryUnstable.js

@@ -23,7 +23,9 @@ export function unstable_hasComponent(name: string): boolean {
       hasNativeComponent = global.__nativeComponentRegistry__hasComponent(name);
       componentNameToExists.set(name, hasNativeComponent);
     } else {
-      throw `unstable_hasComponent('${name}'): Global function is not registered`;
+      throw new Error(
+        `unstable_hasComponent('${name}'): Global function is not registered`,
+      );
     }
   }
   return hasNativeComponent;

package/Libraries/NativeComponent/ViewConfigIgnore.windows.js

@@ -0,0 +1,45 @@
+/**
+ * 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
+ */
+
+const ignoredViewConfigProps = new WeakSet < { ...} > ();
+
+/**
+ * Decorates ViewConfig values that are dynamically injected by the library,
+ * react-native-gesture-handler. (T45765076)
+ */
+export function DynamicallyInjectedByGestureHandler<T: {... }> (object: T): T {
+  ignoredViewConfigProps.add(object);
+  return object;
+}
+
+/**
+ * On iOS, ViewManager event declarations generate {eventName}: true entries
+ * in ViewConfig valueAttributes. These entries aren't generated for Android.
+ * This annotation allows Static ViewConfigs to insert these entries into
+ * iOS but not Android.
+ *
+ * In the future, we want to remove this platform-inconsistency. We want
+ * to set RN$ViewConfigEventValidAttributesDisabled = true server-side,
+ * so that iOS does not generate validAttributes from event props in iOS RCTViewManager,
+ * since Android does not generate validAttributes from events props in Android ViewManager.
+ *
+ * TODO(T110872225): Remove this logic, after achieving platform-consistency
+ */
+export function ConditionallyIgnoredEventHandlers<
+  const T: { +[name: string]: true },
+> (value: T): T | void {
+  return value;
+}
+
+export function isIgnored(value: mixed): boolean {
+  if (typeof value === 'object' && value != null) {
+    return ignoredViewConfigProps.has(value);
+  }
+  return false;
+}

package/Libraries/Network/RCTNetworking.android.js

@@ -77,12 +77,14 @@ const RCTNetworking = {
       }));
     }
     const requestId = generateRequestId();
+    const devToolsRequestId =
+      global.__NETWORK_REPORTER__?.createDevToolsRequestId();
     NativeNetworkingAndroid.sendRequest(
       method,
       url,
       requestId,
       convertHeadersMapToArray(headers),
-      {...body, trackingName},
+      {...body, trackingName, devToolsRequestId},
       responseType,
       incrementalUpdates,
       timeout,

package/Libraries/Network/RCTNetworking.ios.js

@@ -40,6 +40,8 @@ const RCTNetworking = {
     withCredentials: boolean,
   ) {
     const body = convertRequestBody(data);
+    const devToolsRequestId =
+      global.__NETWORK_REPORTER__?.createDevToolsRequestId();
     NativeNetworkingIOS.sendRequest(
       {
         method,
@@ -50,6 +52,7 @@ const RCTNetworking = {
         incrementalUpdates,
         timeout,
         withCredentials,
+        unstable_devToolsRequestId: devToolsRequestId,
       },
       callback,
     );

package/Libraries/Network/RCTNetworking.windows.js

@@ -40,6 +40,8 @@ const RCTNetworking = {
     withCredentials: boolean,
   ) {
     const body = convertRequestBody(data);
+    const devToolsRequestId =
+      global.__NETWORK_REPORTER__?.createDevToolsRequestId();
     NativeNetworkingIOS.sendRequest(
       {
         method,
@@ -50,6 +52,7 @@ const RCTNetworking = {
         incrementalUpdates,
         timeout,
         withCredentials,
+        unstable_devToolsRequestId: devToolsRequestId,
       },
       callback,
     );

package/Libraries/Network/XMLHttpRequest.js

@@ -14,7 +14,6 @@ import type {
   EventCallback,
   EventListener,
 } from '../../src/private/webapis/dom/events/EventTarget';
-import type Performance from '../../src/private/webapis/performance/Performance';
 import type {IPerformanceLogger} from '../Utilities/createPerformanceLogger';
 
 import Event from '../../src/private/webapis/dom/events/Event';
@@ -34,13 +33,7 @@ const RCTNetworking = require('./RCTNetworking').default;
 const base64 = require('base64-js');
 const invariant = require('invariant');
 
-const PERFORMANCE_TRACK_NAME = 'Network (JS-initiated only)';
-const PERFORMANCE_TRACK_GROUP = 'Chrome DevTools Temp Compat';
-
-declare var performance: Performance;
-
 const DEBUG_NETWORK_SEND_DELAY: false = false; // Set to a number of milliseconds when debugging
-const LABEL_FOR_MISSING_URL_FOR_PROFILING = 'Unknown URL';
 
 export type NativeResponseType = 'base64' | 'blob' | 'text';
 export type ResponseType =
@@ -141,7 +134,6 @@ class XMLHttpRequest extends EventTarget {
   static DONE: number = DONE;
 
   static _interceptor: ?XHRInterceptor = null;
-  static _profiling: boolean = false;
 
   UNSENT: number = UNSENT;
   OPENED: number = OPENED;
@@ -182,10 +174,6 @@ class XMLHttpRequest extends EventTarget {
     XMLHttpRequest._interceptor = interceptor;
   }
 
-  static enableProfiling(enableProfiling: boolean): void {
-    XMLHttpRequest._profiling = enableProfiling;
-  }
-
   constructor() {
     super();
     this._reset();
@@ -389,23 +377,12 @@ class XMLHttpRequest extends EventTarget {
       return;
     }
 
-    const start = XMLHttpRequest._profiling ? performance.now() : undefined;
-
     if (!this._response) {
       this._response = responseText;
     } else {
       this._response += responseText;
     }
 
-    if (XMLHttpRequest._profiling) {
-      console.timeStamp(
-        'Incremental Data: ' + this._getMeasureURL(),
-        start,
-        undefined,
-        PERFORMANCE_TRACK_NAME,
-        PERFORMANCE_TRACK_GROUP,
-      );
-    }
     XMLHttpRequest._interceptor &&
       XMLHttpRequest._interceptor.dataReceived(requestId, responseText);
 
@@ -450,16 +427,7 @@ class XMLHttpRequest extends EventTarget {
       this._clearSubscriptions();
       this._requestId = null;
       this.setReadyState(this.DONE);
-      if (XMLHttpRequest._profiling && this._startTime != null) {
-        const start = this._startTime;
-        console.timeStamp(
-          this._getMeasureURL(),
-          start,
-          undefined,
-          PERFORMANCE_TRACK_NAME,
-          PERFORMANCE_TRACK_GROUP,
-        );
-      }
+
       if (error) {
         XMLHttpRequest._interceptor &&
           XMLHttpRequest._interceptor.loadingFailed(requestId, error);
@@ -649,8 +617,6 @@ class XMLHttpRequest extends EventTarget {
         this._url,
         this._headers,
         data,
-        /* $FlowFixMe(>=0.78.0 site=react_native_android_fb) This issue was found
-         * when making Flow check .android.js files. */
         nativeResponseType,
         incrementalEvents,
         this.timeout,
@@ -731,12 +697,6 @@ class XMLHttpRequest extends EventTarget {
     super.addEventListener(type, listener);
   }
 
-  _getMeasureURL(): string {
-    return (
-      this._trackingName ?? this._url ?? LABEL_FOR_MISSING_URL_FOR_PROFILING
-    );
-  }
-
   /*
    * `on<event>` event handling (without JS prototype magic).
    */

package/Libraries/Pressability/usePressability.js

@@ -8,15 +8,26 @@
  * @format
  */
 
+import * as ReactNativeFeatureFlags from '../../src/private/featureflags/ReactNativeFeatureFlags';
 import Pressability, {
   type EventHandlers,
   type PressabilityConfig,
 } from './Pressability';
-import {useEffect, useRef} from 'react';
+import {useEffect, useInsertionEffect, useRef} from 'react';
 
 declare function usePressability(config: PressabilityConfig): EventHandlers;
 declare function usePressability(config: null | void): null | EventHandlers;
 
+// Experiments with using `useInsertionEffect` instead of `useEffect`, which
+// changes whether `Pressability` is configured or reset when inm a hidden
+// Activity. With `useInsertionEffect`, `Pressability` behaves more like a
+// platform control (e.g. Pointer Events), especially with respect to events
+// like focus and blur.
+const useConfigurationEffect =
+  ReactNativeFeatureFlags.configurePressabilityDuringInsertion()
+    ? useInsertionEffect
+    : useEffect;
+
 /**
  * Creates a persistent instance of `Pressability` that automatically configures
  * itself and resets. Accepts null `config` to support lazy initialization. Once
@@ -40,7 +51,7 @@ export default function usePressability(
 
   // On the initial mount, this is a no-op. On updates, `pressability` will be
   // re-configured to use the new configuration.
-  useEffect(() => {
+  useConfigurationEffect(() => {
     if (config != null && pressability != null) {
       pressability.configure(config);
     }
@@ -48,7 +59,7 @@ export default function usePressability(
 
   // On unmount, reset pending state and timers inside `pressability`. This is
   // a separate effect because we do not want to reset when `config` changes.
-  useEffect(() => {
+  useConfigurationEffect(() => {
     if (pressability != null) {
       return () => {
         pressability.reset();

package/Libraries/ReactNative/PaperUIManager.windows.js

@@ -101,12 +101,12 @@ const UIManagerJS: UIManagerJSInterface = {
 for (const propName of Object.getOwnPropertyNames(
   Object.getPrototypeOf(NativeUIManager),
 )) {
-  // $FlowFixMe
+  // $FlowFixMe[incompatible-type]
   UIManagerJS[propName] = NativeUIManager[propName];
 }
 // Windows]
 
-/* $FlowFixMe(>=0.123.0 site=react_native_fb) This comment suppresses an error
+/* $FlowFixMe[cannot-write] (>=0.123.0 site=react_native_fb) This comment suppresses an error
  * found when Flow v0.123.0 was deployed. To see the error, delete this comment
  * and run Flow. */
 //const UIManagerJS = {
@@ -199,7 +199,7 @@ if (!global.nativeCallSyncHook) {
             `Accessing view manager configs directly off UIManager via UIManager['${viewManagerName}'] ` +
               `is no longer supported. Use UIManager.getViewManagerConfig('${viewManagerName}') instead.`,
           );
-          // $FlowFixMe
+          // $FlowFixMe[incompatible-return]
           return UIManagerJS.getViewManagerConfig(viewManagerName);
         },
       });

package/Libraries/ReactNative/ReactFabricPublicInstance/ReactFabricPublicInstance.js

@@ -13,124 +13,62 @@
  * instances and get some data from them (like their instance handle / fiber).
  */
 
-import type ReactNativeDocumentT from '../../../src/private/webapis/dom/nodes/ReactNativeDocument';
-import typeof * as ReactNativeDocumentModuleT from '../../../src/private/webapis/dom/nodes/ReactNativeDocument';
-import type ReactNativeElementT from '../../../src/private/webapis/dom/nodes/ReactNativeElement';
-import type ReadOnlyTextT from '../../../src/private/webapis/dom/nodes/ReadOnlyText';
-import typeof * as RendererProxyT from '../../ReactNative/RendererProxy';
 import type {
   InternalInstanceHandle,
   Node,
   ViewConfig,
 } from '../../Renderer/shims/ReactNativeTypes';
 import type {RootTag} from '../RootTag';
-import type ReactFabricHostComponentT from './ReactFabricHostComponent';
 
-import * as ReactNativeFeatureFlags from '../../../src/private/featureflags/ReactNativeFeatureFlags';
+import ReactNativeDocument, {
+  createReactNativeDocument,
+} from '../../../src/private/webapis/dom/nodes/ReactNativeDocument';
+import ReactNativeElement from '../../../src/private/webapis/dom/nodes/ReactNativeElement';
+import ReadOnlyText from '../../../src/private/webapis/dom/nodes/ReadOnlyText';
+import * as RendererProxy from '../../ReactNative/RendererProxy';
 
 export opaque type PublicRootInstance = mixed;
 
-// Lazy loaded to avoid evaluating the module when using the legacy renderer.
-let ReactNativeDocumentModuleObject: ?ReactNativeDocumentModuleT;
-let ReactFabricHostComponentClass: Class<ReactFabricHostComponentT>;
-let ReactNativeElementClass: Class<ReactNativeElementT>;
-let ReadOnlyTextClass: Class<ReadOnlyTextT>;
-let RendererProxy: RendererProxyT;
-
-function getReactNativeDocumentModule(): ReactNativeDocumentModuleT {
-  if (ReactNativeDocumentModuleObject == null) {
-    // We initialize this lazily to avoid a require cycle.
-    ReactNativeDocumentModuleObject = require('../../../src/private/webapis/dom/nodes/ReactNativeDocument');
-  }
-
-  return ReactNativeDocumentModuleObject;
-}
-
-function getReactNativeElementClass(): Class<ReactNativeElementT> {
-  if (ReactNativeElementClass == null) {
-    ReactNativeElementClass =
-      require('../../../src/private/webapis/dom/nodes/ReactNativeElement').default;
-  }
-  return ReactNativeElementClass;
-}
-
-function getReactFabricHostComponentClass(): Class<ReactFabricHostComponentT> {
-  if (ReactFabricHostComponentClass == null) {
-    ReactFabricHostComponentClass =
-      require('./ReactFabricHostComponent').default;
-  }
-  return ReactFabricHostComponentClass;
-}
-
-function getReadOnlyTextClass(): Class<ReadOnlyTextT> {
-  if (ReadOnlyTextClass == null) {
-    ReadOnlyTextClass =
-      require('../../../src/private/webapis/dom/nodes/ReadOnlyText').default;
-  }
-  return ReadOnlyTextClass;
-}
-
 export function createPublicRootInstance(rootTag: RootTag): PublicRootInstance {
-  if (ReactNativeFeatureFlags.enableAccessToHostTreeInFabric()) {
-    const ReactNativeDocumentModule = getReactNativeDocumentModule();
-
-    // $FlowExpectedError[incompatible-return]
-    return ReactNativeDocumentModule.createReactNativeDocument(rootTag);
-  }
-
   // $FlowExpectedError[incompatible-return]
-  return null;
+  return createReactNativeDocument(rootTag);
 }
 
 export function createPublicInstance(
   tag: number,
   viewConfig: ViewConfig,
   internalInstanceHandle: InternalInstanceHandle,
-  ownerDocument: ReactNativeDocumentT,
-): ReactFabricHostComponentT | ReactNativeElementT {
-  if (ReactNativeFeatureFlags.enableAccessToHostTreeInFabric()) {
-    const ReactNativeElement = getReactNativeElementClass();
-    return new ReactNativeElement(
-      tag,
-      viewConfig,
-      internalInstanceHandle,
-      ownerDocument,
-    );
-  } else {
-    const ReactFabricHostComponent = getReactFabricHostComponentClass();
-    return new ReactFabricHostComponent(
-      tag,
-      viewConfig,
-      internalInstanceHandle,
-    );
-  }
+  ownerDocument: ReactNativeDocument,
+): ReactNativeElement {
+  return new ReactNativeElement(
+    tag,
+    viewConfig,
+    internalInstanceHandle,
+    ownerDocument,
+  );
 }
 
 export function createPublicTextInstance(
   internalInstanceHandle: InternalInstanceHandle,
-  ownerDocument: ReactNativeDocumentT,
-): ReadOnlyTextT {
-  const ReadOnlyText = getReadOnlyTextClass();
+  ownerDocument: ReactNativeDocument,
+): ReadOnlyText {
   return new ReadOnlyText(internalInstanceHandle, ownerDocument);
 }
 
 export function getNativeTagFromPublicInstance(
-  publicInstance: ReactFabricHostComponentT | ReactNativeElementT,
+  publicInstance: ReactNativeElement,
 ): number {
   return publicInstance.__nativeTag;
 }
 
 export function getNodeFromPublicInstance(
-  publicInstance: ReactFabricHostComponentT | ReactNativeElementT,
+  publicInstance: ReactNativeElement,
 ): ?Node {
   // Avoid loading ReactFabric if using an instance from the legacy renderer.
   if (publicInstance.__internalInstanceHandle == null) {
     return null;
   }
 
-  if (RendererProxy == null) {
-    RendererProxy = require('../../ReactNative/RendererProxy');
-  }
   return RendererProxy.getNodeFromInternalInstanceHandle(
     // $FlowExpectedError[incompatible-type] __internalInstanceHandle is always an InternalInstanceHandle from React when we get here.
     publicInstance.__internalInstanceHandle,
@@ -138,7 +76,7 @@ export function getNodeFromPublicInstance(
 }
 
 export function getInternalInstanceHandleFromPublicInstance(
-  publicInstance: ReactFabricHostComponentT | ReactNativeElementT,
+  publicInstance: ReactNativeElement,
 ): InternalInstanceHandle {
   // TODO(T174762768): Remove this once OSS versions of renderers will be synced.
   // $FlowExpectedError[prop-missing] Keeping this for backwards-compatibility with the renderers versions in open source.

package/Libraries/ReactNative/getNativeComponentAttributes.js

@@ -17,6 +17,12 @@ const ReactNativeStyleAttributes =
 const resolveAssetSource = require('../Image/resolveAssetSource').default;
 const processBackgroundImage =
   require('../StyleSheet/processBackgroundImage').default;
+const processBackgroundPosition =
+  require('../StyleSheet/processBackgroundPosition').default;
+const processBackgroundRepeat =
+  require('../StyleSheet/processBackgroundRepeat').default;
+const processBackgroundSize =
+  require('../StyleSheet/processBackgroundSize').default;
 const processColor = require('../StyleSheet/processColor').default;
 const processColorArray = require('../StyleSheet/processColorArray').default;
 const processFilter = require('../StyleSheet/processFilter').default;
@@ -203,6 +209,12 @@ function getProcessorForType(typeName: string): ?(nextProp: any) => any {
       return processFilter;
     case 'BackgroundImage':
       return processBackgroundImage;
+    case 'BackgroundPosition':
+      return processBackgroundPosition;
+    case 'BackgroundRepeat':
+      return processBackgroundRepeat;
+    case 'BackgroundSize':
+      return processBackgroundSize;
     case 'ImageSource':
       return resolveAssetSource;
     case 'BoxShadow':