@office-iss/react-native-win32 0.78.3 → 0.79.0-preview.1

package/Libraries/Core/setUpTimers.js

@@ -10,9 +10,6 @@
 
 'use strict';
 
-const ReactNativeFeatureFlags = require('../../src/private/featureflags/ReactNativeFeatureFlags');
-const NativeReactNativeFeatureFlags =
-  require('../../src/private/featureflags/specs/NativeReactNativeFeatureFlags').default;
 const {polyfillGlobal} = require('../Utilities/PolyfillFunctions');
 
 if (__DEV__) {
@@ -21,19 +18,46 @@ if (__DEV__) {
   }
 }
 
-const isEventLoopEnabled = (() => {
-  if (NativeReactNativeFeatureFlags == null) {
-    return false;
-  }
+// In bridgeless mode, timers are host functions installed from cpp.
+if (global.RN$Bridgeless === true) {
+  // This is the flag that tells React to use `queueMicrotask` to batch state
+  // updates, instead of using the scheduler to schedule a regular task.
+  // We use a global variable because we don't currently have any other
+  // mechanism to pass feature flags from RN to React in OSS.
+  global.RN$enableMicrotasksInReact = true;
 
-  return (
-    ReactNativeFeatureFlags.enableBridgelessArchitecture() &&
-    !ReactNativeFeatureFlags.disableEventLoopOnBridgeless()
+  polyfillGlobal(
+    'queueMicrotask',
+    () =>
+      require('../../src/private/webapis/microtasks/specs/NativeMicrotasks')
+        .default.queueMicrotask,
   );
-})();
 
-// In bridgeless mode, timers are host functions installed from cpp.
-if (global.RN$Bridgeless !== true) {
+  // We shim the immediate APIs via `queueMicrotask` to maintain the backward
+  // compatibility.
+  polyfillGlobal(
+    'setImmediate',
+    () => require('./Timers/immediateShim').setImmediate,
+  );
+  polyfillGlobal(
+    'clearImmediate',
+    () => require('./Timers/immediateShim').clearImmediate,
+  );
+
+  polyfillGlobal(
+    'requestIdleCallback',
+    () =>
+      require('../../src/private/webapis/idlecallbacks/specs/NativeIdleCallbacks')
+        .default.requestIdleCallback,
+  );
+
+  polyfillGlobal(
+    'cancelIdleCallback',
+    () =>
+      require('../../src/private/webapis/idlecallbacks/specs/NativeIdleCallbacks')
+        .default.cancelIdleCallback,
+  );
+} else {
   /**
    * Set up timers.
    * You can use this module directly, or just require InitializeCore.
@@ -49,7 +73,7 @@ if (global.RN$Bridgeless !== true) {
       | 'setInterval'
       | 'setTimeout',
   ) => {
-    polyfillGlobal(name, () => require('./Timers/JSTimers')[name]);
+    polyfillGlobal(name, () => require('./Timers/JSTimers').default[name]);
   };
   defineLazyTimer('setTimeout');
   defineLazyTimer('clearTimeout');
@@ -59,67 +83,22 @@ if (global.RN$Bridgeless !== true) {
   defineLazyTimer('cancelAnimationFrame');
   defineLazyTimer('requestIdleCallback');
   defineLazyTimer('cancelIdleCallback');
-} else if (isEventLoopEnabled) {
-  polyfillGlobal(
-    'requestIdleCallback',
-    () =>
-      require('../../src/private/webapis/idlecallbacks/specs/NativeIdleCallbacks')
-        .default.requestIdleCallback,
-  );
-
-  polyfillGlobal(
-    'cancelIdleCallback',
-    () =>
-      require('../../src/private/webapis/idlecallbacks/specs/NativeIdleCallbacks')
-        .default.cancelIdleCallback,
-  );
-}
-
-// We need to check if the native module is available before accessing the
-// feature flag, because otherwise the API would throw an error in the legacy
-// architecture in OSS, where the native module isn't available.
-if (isEventLoopEnabled) {
-  // This is the flag that tells React to use `queueMicrotask` to batch state
-  // updates, instead of using the scheduler to schedule a regular task.
-  // We use a global variable because we don't currently have any other
-  // mechanism to pass feature flags from RN to React in OSS.
-  global.RN$enableMicrotasksInReact = true;
 
+  // Polyfill it with promise (regardless it's polyfilled or native) otherwise.
   polyfillGlobal(
     'queueMicrotask',
-    () =>
-      require('../../src/private/webapis/microtasks/specs/NativeMicrotasks')
-        .default.queueMicrotask,
+    () => require('./Timers/queueMicrotask.js').default,
   );
 
-  // We shim the immediate APIs via `queueMicrotask` to maintain the backward
-  // compatibility.
+  // When promise was polyfilled hence is queued to the RN microtask queue,
+  // we polyfill the immediate APIs as aliases to the ReactNativeMicrotask APIs.
+  // Note that in bridgeless mode, immediate APIs are installed from cpp.
   polyfillGlobal(
     'setImmediate',
-    () => require('./Timers/immediateShim').setImmediate,
+    () => require('./Timers/JSTimers').default.queueReactNativeMicrotask,
   );
   polyfillGlobal(
     'clearImmediate',
-    () => require('./Timers/immediateShim').clearImmediate,
-  );
-} else {
-  // Polyfill it with promise (regardless it's polyfilled or native) otherwise.
-  polyfillGlobal(
-    'queueMicrotask',
-    () => require('./Timers/queueMicrotask.js').default,
+    () => require('./Timers/JSTimers').default.clearReactNativeMicrotask,
   );
-
-  // When promise was polyfilled hence is queued to the RN microtask queue,
-  // we polyfill the immediate APIs as aliases to the ReactNativeMicrotask APIs.
-  // Note that in bridgeless mode, immediate APIs are installed from cpp.
-  if (global.RN$Bridgeless !== true) {
-    polyfillGlobal(
-      'setImmediate',
-      () => require('./Timers/JSTimers').queueReactNativeMicrotask,
-    );
-    polyfillGlobal(
-      'clearImmediate',
-      () => require('./Timers/JSTimers').clearReactNativeMicrotask,
-    );
-  }
 }

package/Libraries/Core/setUpXHR.js

@@ -18,19 +18,22 @@ const {polyfillGlobal} = require('../Utilities/PolyfillFunctions');
  *
  * You can use this module directly, or just require InitializeCore.
  */
-polyfillGlobal('XMLHttpRequest', () => require('../Network/XMLHttpRequest'));
-polyfillGlobal('FormData', () => require('../Network/FormData'));
+polyfillGlobal(
+  'XMLHttpRequest',
+  () => require('../Network/XMLHttpRequest').default,
+);
+polyfillGlobal('FormData', () => require('../Network/FormData').default);
 
 polyfillGlobal('fetch', () => require('../Network/fetch').fetch);
 polyfillGlobal('Headers', () => require('../Network/fetch').Headers);
 polyfillGlobal('Request', () => require('../Network/fetch').Request);
 polyfillGlobal('Response', () => require('../Network/fetch').Response);
-polyfillGlobal('WebSocket', () => require('../WebSocket/WebSocket'));
-polyfillGlobal('Blob', () => require('../Blob/Blob'));
-polyfillGlobal('File', () => require('../Blob/File'));
-polyfillGlobal('FileReader', () => require('../Blob/FileReader'));
-polyfillGlobal('URL', () => require('../Blob/URL').URL); // flowlint-line untyped-import:off
-polyfillGlobal('URLSearchParams', () => require('../Blob/URL').URLSearchParams); // flowlint-line untyped-import:off
+polyfillGlobal('WebSocket', () => require('../WebSocket/WebSocket').default);
+polyfillGlobal('Blob', () => require('../Blob/Blob').default);
+polyfillGlobal('File', () => require('../Blob/File').default);
+polyfillGlobal('FileReader', () => require('../Blob/FileReader').default);
+polyfillGlobal('URL', () => require('../Blob/URL').URL);
+polyfillGlobal('URLSearchParams', () => require('../Blob/URL').URLSearchParams);
 polyfillGlobal(
   'AbortController',
   () => require('abort-controller/dist/abort-controller').AbortController, // flowlint-line untyped-import:off

package/Libraries/Debugging/DebuggingOverlayNativeComponent.js

@@ -8,6 +8,6 @@
  * @flow strict-local
  */
 
-export * from '../../src/private/specs/components/DebuggingOverlayNativeComponent';
-import DebuggingOverlayNativeComponent from '../../src/private/specs/components/DebuggingOverlayNativeComponent';
+export * from '../../src/private/specs_DEPRECATED/components/DebuggingOverlayNativeComponent';
+import DebuggingOverlayNativeComponent from '../../src/private/specs_DEPRECATED/components/DebuggingOverlayNativeComponent';
 export default DebuggingOverlayNativeComponent;

package/Libraries/Debugging/DebuggingOverlayRegistry.js

@@ -9,13 +9,13 @@
  * @oncall react_native
  */
 
+import type {HostInstance} from '../../src/private/types/HostInstance';
 import type ReactNativeElement from '../../src/private/webapis/dom/nodes/ReactNativeElement';
 import type ReadOnlyElement from '../../src/private/webapis/dom/nodes/ReadOnlyElement';
 import type {
   AppContainerRootViewRef,
   DebuggingOverlayRef,
 } from '../ReactNative/AppContainer-dev';
-import type {NativeMethods} from '../Renderer/shims/ReactNativeTypes';
 import type {
   InstanceFromReactDevTools,
   ReactDevToolsAgent,
@@ -51,7 +51,7 @@ type ModernNodeUpdate = {
 
 type LegacyNodeUpdate = {
   id: number,
-  instance: NativeMethods,
+  instance: HostInstance,
   color: string,
 };
 
@@ -95,9 +95,11 @@ class DebuggingOverlayRegistry {
 
   #getPublicInstanceFromInstance = (
     instanceHandle: InstanceFromReactDevTools,
-  ): NativeMethods | null => {
+  ): HostInstance | null => {
     // `canonical.publicInstance` => Fabric
+    // $FlowExpectedError[prop-missing]
     if (instanceHandle.canonical?.publicInstance != null) {
+      // $FlowExpectedError[incompatible-return]
       return instanceHandle.canonical?.publicInstance;
     }
 
@@ -108,6 +110,7 @@ class DebuggingOverlayRegistry {
     }
 
     // `instanceHandle` => Legacy renderer
+    // $FlowExpectedError[method-unbinding]
     if (instanceHandle.measure != null) {
       // $FlowFixMe[incompatible-return]
       return instanceHandle;
@@ -134,7 +137,7 @@ class DebuggingOverlayRegistry {
   }
 
   #findLowestParentFromRegistryForInstanceLegacy(
-    instance: NativeMethods,
+    instance: HostInstance,
   ): ?DebuggingOverlayRegistrySubscriberProtocol {
     const candidates: Array<DebuggingOverlayRegistrySubscriberProtocol> = [];
 
@@ -374,7 +377,7 @@ class DebuggingOverlayRegistry {
       require('../../src/private/webapis/dom/nodes/ReactNativeElement').default;
 
     const reactNativeElements: Array<ReactNativeElement> = [];
-    const legacyPublicInstances: Array<NativeMethods> = [];
+    const legacyPublicInstances: Array<HostInstance> = [];
 
     for (const node of nodes) {
       const publicInstance = this.#getPublicInstanceFromInstance(node);
@@ -442,10 +445,10 @@ class DebuggingOverlayRegistry {
   }
 
   // TODO: remove once DOM Node APIs are opt-in by default and Paper is no longer supported.
-  #onHighlightElementsLegacy(elements: Array<NativeMethods>): void {
+  #onHighlightElementsLegacy(elements: Array<HostInstance>): void {
     const parentToElementsMap = new Map<
       DebuggingOverlayRegistrySubscriberProtocol,
-      Array<NativeMethods>,
+      Array<HostInstance>,
     >();
 
     for (const element of elements) {

package/Libraries/EventEmitter/NativeEventEmitter.js

@@ -26,6 +26,9 @@ interface NativeModule {
 
 export type {EventSubscription};
 
+// $FlowFixMe[unclear-type] unclear type of events
+type UnsafeObject = Object;
+
 /**
  * `NativeEventEmitter` is intended for use by Native Modules to emit events to
  * JavaScript listeners. If a `NativeModule` is supplied to the constructor, it
@@ -36,8 +39,11 @@ export type {EventSubscription};
  * This means event names must be globally unique, and it means that call sites
  * can theoretically listen to `RCTDeviceEventEmitter` (although discouraged).
  */
-export default class NativeEventEmitter<TEventToArgsMap: {...}>
-  implements IEventEmitter<TEventToArgsMap>
+export default class NativeEventEmitter<
+  TEventToArgsMap: $ReadOnly<
+    Record<string, $ReadOnlyArray<UnsafeObject>>,
+  > = $ReadOnly<Record<string, $ReadOnlyArray<UnsafeObject>>>,
+> implements IEventEmitter<TEventToArgsMap>
 {
   _nativeModule: ?NativeModule;
 

package/Libraries/EventEmitter/RCTDeviceEventEmitter.js

@@ -14,7 +14,8 @@ import {beginEvent, endEvent} from '../Performance/Systrace';
 import EventEmitter from '../vendor/emitter/EventEmitter';
 
 // FIXME: use typed events
-type RCTDeviceEventDefinitions = $FlowFixMe;
+/* $FlowFixMe[unclear-type] unclear type of events */
+type RCTDeviceEventDefinitions = {[name: string]: Array<any>};
 
 /**
  * Global EventEmitter used by the native platform to emit events to JavaScript.
@@ -22,7 +23,7 @@ type RCTDeviceEventDefinitions = $FlowFixMe;
  *
  * NativeModules that emit events should instead subclass `NativeEventEmitter`.
  */
-class RCTDeviceEventEmitter extends EventEmitter<RCTDeviceEventDefinitions> {
+class RCTDeviceEventEmitterImpl extends EventEmitter<RCTDeviceEventDefinitions> {
   // Add systrace to RCTDeviceEventEmitter.emit method for debugging
   emit<TEvent: $Keys<RCTDeviceEventDefinitions>>(
     eventType: TEvent,
@@ -33,11 +34,12 @@ class RCTDeviceEventEmitter extends EventEmitter<RCTDeviceEventDefinitions> {
     endEvent();
   }
 }
-const instance = new RCTDeviceEventEmitter();
+const RCTDeviceEventEmitter: IEventEmitter<RCTDeviceEventDefinitions> =
+  new RCTDeviceEventEmitterImpl();
 
 Object.defineProperty(global, '__rctDeviceEventEmitter', {
   configurable: true,
-  value: instance,
+  value: RCTDeviceEventEmitter,
 });
 
-export default (instance: IEventEmitter<RCTDeviceEventDefinitions>);
+export default (RCTDeviceEventEmitter: IEventEmitter<RCTDeviceEventDefinitions>);

package/Libraries/EventEmitter/RCTEventEmitter.js

@@ -18,4 +18,4 @@ const RCTEventEmitter = {
   },
 };
 
-module.exports = RCTEventEmitter;
+export default RCTEventEmitter;

package/Libraries/EventEmitter/RCTNativeAppEventEmitter.js

@@ -15,4 +15,4 @@ import RCTDeviceEventEmitter from './RCTDeviceEventEmitter';
  * adding all event listeners directly to RCTNativeAppEventEmitter.
  */
 const RCTNativeAppEventEmitter = RCTDeviceEventEmitter;
-module.exports = RCTNativeAppEventEmitter;
+export default RCTNativeAppEventEmitter;

package/Libraries/EventEmitter/__mocks__/NativeEventEmitter.js

@@ -18,8 +18,9 @@ import RCTDeviceEventEmitter from '../RCTDeviceEventEmitter';
 /**
  * Mock `NativeEventEmitter` to ignore Native Modules.
  */
-export default class NativeEventEmitter<TEventToArgsMap: {...}>
-  implements IEventEmitter<TEventToArgsMap>
+export default class NativeEventEmitter<
+  TEventToArgsMap: $ReadOnly<Record<string, $ReadOnlyArray<mixed>>>,
+> implements IEventEmitter<TEventToArgsMap>
 {
   addListener<TEvent: $Keys<TEventToArgsMap>>(
     eventType: TEvent,

package/Libraries/Events/CustomEvent.js

@@ -11,12 +11,12 @@
 // Make sure global Event is defined
 import EventPolyfill from './EventPolyfill';
 
-type CustomEvent$Options = $ReadOnly<{|
+type CustomEvent$Options = $ReadOnly<{
   bubbles?: boolean,
   cancelable?: boolean,
   composed?: boolean,
   detail?: {...},
-|}>;
+}>;
 
 class CustomEvent extends EventPolyfill {
   detail: ?{...};
@@ -25,7 +25,7 @@ class CustomEvent extends EventPolyfill {
     const {bubbles, cancelable, composed} = options;
     super(typeArg, {bubbles, cancelable, composed});
 
-    this.detail = options.detail; // this would correspond to `NativeEvent` in SyntheticEvent
+    this.detail = options.detail; // this would correspond to `NativeEvent` in NativeSyntheticEvent
   }
 }
 

package/Libraries/Events/EventPolyfill.js

@@ -152,9 +152,9 @@ class EventPolyfill implements IEvent {
   /** @deprecated */
   srcElement: Element; // TODO: nullable
 
-  // React Native-specific: proxy data to a SyntheticEvent when
+  // React Native-specific: proxy data to a NativeSyntheticEvent when
   // certain methods are called.
-  // SyntheticEvent will also have a reference to this instance -
+  // NativeSyntheticEvent will also have a reference to this instance -
   // it is circular - and both classes use this reference to keep
   // data with the other in sync.
   _syntheticEvent: mixed;

package/Libraries/Image/AssetRegistry.js

@@ -10,4 +10,11 @@
 
 'use strict';
 
-module.exports = require('@react-native/assets-registry/registry');
+import type {PackagerAsset} from '@react-native/assets-registry/registry';
+
+const AssetRegistry = require('@react-native/assets-registry/registry') as {
+  registerAsset: (asset: PackagerAsset) => number,
+  getAssetByID: (assetId: number) => PackagerAsset,
+};
+
+module.exports = AssetRegistry;

package/Libraries/Image/AssetSourceResolver.js

@@ -10,13 +10,13 @@
 
 'use strict';
 
-export type ResolvedAssetSource = {|
+export type ResolvedAssetSource = {
   +__packager_asset: boolean,
   +width: ?number,
   +height: ?number,
   +uri: string,
   +scale: number,
-|};
+};
 
 import type {
   AssetDestPathResolver,
@@ -24,7 +24,7 @@ import type {
 } from '@react-native/assets-registry/registry';
 
 const PixelRatio = require('../Utilities/PixelRatio').default;
-const Platform = require('../Utilities/Platform');
+const Platform = require('../Utilities/Platform').default;
 const {pickScale} = require('./AssetUtils');
 const {
   getAndroidResourceFolderName,
@@ -210,4 +210,4 @@ class AssetSourceResolver {
     pickScale;
 }
 
-module.exports = AssetSourceResolver;
+export default AssetSourceResolver;

package/Libraries/Image/Image.android.js

@@ -133,11 +133,12 @@ let BaseImage: AbstractImageAndroid = React.forwardRef(
       width: undefined,
       height: undefined,
     };
+    const defaultSource = resolveAssetSource(props.defaultSource);
     const loadingIndicatorSource = resolveAssetSource(
       props.loadingIndicatorSource,
     );
 
-    if (props.children) {
+    if (props.children != null) {
       throw new Error(
         'The <Image> component cannot contain children. If you want to render content on top of the image, consider using the <ImageBackground> component or absolute positioning.',
       );
@@ -178,6 +179,7 @@ let BaseImage: AbstractImageAndroid = React.forwardRef(
       /* $FlowFixMe(>=0.78.0 site=react_native_android_fb) This issue was found
        * when making Flow check .android.js files. */
       headers: (source?.[0]?.headers || source?.headers: ?{[string]: string}),
+      defaultSource: defaultSource ? defaultSource.uri : null,
       loadingIndicatorSrc: loadingIndicatorSource
         ? loadingIndicatorSource.uri
         : null,
@@ -319,4 +321,4 @@ const styles = StyleSheet.create({
   },
 });
 
-module.exports = Image;
+export default Image;

package/Libraries/Image/Image.ios.js

@@ -249,4 +249,4 @@ const styles = StyleSheet.create({
   },
 });
 
-module.exports = Image;
+export default Image;

package/Libraries/Image/Image.js.flow

@@ -0,0 +1,27 @@
+/**
+ * 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
+ */
+
+import type {Image} from './ImageTypes.flow';
+
+export type {
+  ImageProgressEventDataIOS,
+  ImagePropsIOS,
+  ImagePropsAndroid,
+  ImageSourcePropType,
+  ImageLoadEventData,
+  ImageErrorEventData,
+  ImagePropsBase,
+  ImageProps,
+  ImageBackgroundProps,
+} from './ImageProps';
+
+export type {ImageResolvedAssetSource, ImageSize} from './ImageTypes.flow';
+
+declare export default Image;

package/Libraries/Image/Image.win32.js

@@ -284,4 +284,4 @@ const styles = StyleSheet.create({
   },
 });
 
-module.exports = Image;
+export default Image;

package/Libraries/Image/ImageBackground.js

@@ -8,7 +8,7 @@
  * @format
  */
 
-import type {HostInstance} from '../Renderer/shims/ReactNativeTypes';
+import type {HostInstance} from '../../src/private/types/HostInstance';
 import type {ImageBackgroundProps} from './ImageProps';
 
 import View from '../Components/View/View';
@@ -103,4 +103,4 @@ class ImageBackground extends React.Component<ImageBackgroundProps> {
   }
 }
 
-module.exports = ImageBackground;
+export default ImageBackground;