@office-iss/react-native-win32 0.0.0-canary.284 → 0.0.0-canary.286

package/Libraries/Core/ReactNativeVersionCheck.js

@@ -21,7 +21,7 @@ const ReactNativeVersion = require('./ReactNativeVersion');
  * implementations for other platforms (ex: Windows) may override this module
  * and rely on its existence as a separate module.
  */
-const checkVersions = function checkVersions(): void {
+export function checkVersions(): void {
   const nativeVersion = Platform.constants.reactNativeVersion;
   if (
     ReactNativeVersion.version.major !== nativeVersion.major ||
@@ -37,7 +37,7 @@ const checkVersions = function checkVersions(): void {
         '`watchman watch-del-all && npx react-native start --reset-cache`.',
     );
   }
-};
+}
 
 function _formatVersion(
   version: (typeof Platform)['constants']['reactNativeVersion'],
@@ -48,5 +48,3 @@ function _formatVersion(
     (version.prerelease != undefined ? `-${version.prerelease}` : '')
   );
 }
-
-module.exports = {checkVersions};

package/Libraries/Core/ReactNativeVersionCheck.win32.js

@@ -21,7 +21,7 @@ const ReactNativeVersion = require('./ReactNativeVersion');
  * implementations for other platforms (ex: Windows) may override this module
  * and rely on its existence as a separate module.
  */
-const checkVersions = function checkVersions(): void {
+export function checkVersions(): void {
   const nativeVersion = Platform.constants.reactNativeVersion;
   if (
     ReactNativeVersion.version.major !== nativeVersion.major ||
@@ -39,7 +39,7 @@ const checkVersions = function checkVersions(): void {
         '`watchman watch-del-all && npx @react-native-community/cli start --reset-cache`.',
     );
   }
-};
+}
 
 function _formatVersion(
   version: (typeof Platform)['constants']['reactNativeVersion'],
@@ -50,5 +50,3 @@ function _formatVersion(
     (version.prerelease != undefined ? `-${version.prerelease}` : '')
   );
 }
-
-module.exports = {checkVersions};

package/Libraries/Core/SegmentFetcher/NativeSegmentFetcher.js

@@ -8,6 +8,6 @@
  * @format
  */
 
-export * from '../../../src/private/specs/modules/NativeSegmentFetcher';
-import NativeSegmentFetcher from '../../../src/private/specs/modules/NativeSegmentFetcher';
+export * from '../../../src/private/specs_DEPRECATED/modules/NativeSegmentFetcher';
+import NativeSegmentFetcher from '../../../src/private/specs_DEPRECATED/modules/NativeSegmentFetcher';
 export default NativeSegmentFetcher;

package/Libraries/Core/Timers/JSTimers.js

@@ -36,6 +36,7 @@ const IDLE_CALLBACK_FRAME_DEADLINE = 1;
 const callbacks: Array<?Function> = [];
 const types: Array<?JSTimerType> = [];
 const timerIDs: Array<?number> = [];
+const freeIdxs: Array<number> = [];
 let reactNativeMicrotasks: Array<number> = [];
 let requestIdleCallbacks: Array<number> = [];
 const requestIdleCallbackTimeouts: {[number]: number, ...} = {};
@@ -47,11 +48,11 @@ let hasEmittedTimeDriftWarning = false;
 
 // Returns a free index if one is available, and the next consecutive index otherwise.
 function _getFreeIndex(): number {
-  let freeIndex = timerIDs.indexOf(null);
-  if (freeIndex === -1) {
-    freeIndex = timerIDs.length;
+  const freeIdx = freeIdxs.pop();
+  if (freeIdx === undefined) {
+    return timerIDs.length;
   }
-  return freeIndex;
+  return freeIdx;
 }
 
 function _allocateCallback(func: Function, type: JSTimerType): number {
@@ -171,6 +172,7 @@ function _clearIndex(i: number) {
   timerIDs[i] = null;
   callbacks[i] = null;
   types[i] = null;
+  freeIdxs.push(i);
 }
 
 function _freeCallback(timerID: number) {
@@ -484,4 +486,4 @@ BatchedBridge.setReactNativeMicrotasksCallback(
   JSTimers.callReactNativeMicrotasks,
 );
 
-module.exports = ExportedJSTimers;
+export default ExportedJSTimers;

package/Libraries/Core/Timers/NativeTiming.js

@@ -8,6 +8,6 @@
  * @format
  */
 
-export * from '../../../src/private/specs/modules/NativeTiming';
-import NativeTiming from '../../../src/private/specs/modules/NativeTiming';
+export * from '../../../src/private/specs_DEPRECATED/modules/NativeTiming';
+import NativeTiming from '../../../src/private/specs_DEPRECATED/modules/NativeTiming';
 export default NativeTiming;

package/Libraries/Core/Timers/immediateShim.js

@@ -21,7 +21,7 @@ const clearedImmediates: Set<number> = new Set();
  * @param {function} func Callback to be invoked before the end of the
  * current JavaScript execution loop.
  */
-function setImmediate(callback: Function, ...args: any): number {
+export function setImmediate(callback: Function, ...args: any): number {
   if (arguments.length < 1) {
     throw new TypeError(
       'setImmediate must be called with at least one argument (a function to call)',
@@ -56,13 +56,6 @@ function setImmediate(callback: Function, ...args: any): number {
 /**
  * @param {number} immediateID The ID of the immediate to be clearred.
  */
-function clearImmediate(immediateID: number) {
+export function clearImmediate(immediateID: number) {
   clearedImmediates.add(immediateID);
 }
-
-const immediateShim = {
-  setImmediate: setImmediate,
-  clearImmediate: clearImmediate,
-};
-
-module.exports = immediateShim;

package/Libraries/Core/setUpBatchedBridge.js

@@ -14,22 +14,27 @@ import registerModule from './registerCallableModule';
 
 registerModule('Systrace', () => require('../Performance/Systrace'));
 if (!(global.RN$Bridgeless === true)) {
-  registerModule('JSTimers', () => require('./Timers/JSTimers'));
+  registerModule('JSTimers', () => require('./Timers/JSTimers').default);
 }
-registerModule('RCTLog', () => require('../Utilities/RCTLog'));
+registerModule('RCTLog', () => require('../Utilities/RCTLog').default);
 registerModule(
   'RCTDeviceEventEmitter',
   () => require('../EventEmitter/RCTDeviceEventEmitter').default,
 );
-registerModule('RCTNativeAppEventEmitter', () =>
-  require('../EventEmitter/RCTNativeAppEventEmitter'),
+registerModule(
+  'RCTNativeAppEventEmitter',
+  () => require('../EventEmitter/RCTNativeAppEventEmitter').default,
 );
-registerModule('GlobalPerformanceLogger', () =>
-  require('../Utilities/GlobalPerformanceLogger'),
+registerModule(
+  'GlobalPerformanceLogger',
+  () => require('../Utilities/GlobalPerformanceLogger').default,
 );
 
 if (__DEV__) {
-  registerModule('HMRClient', () => require('../Utilities/HMRClient'));
+  registerModule('HMRClient', () => require('../Utilities/HMRClient').default);
 } else {
-  registerModule('HMRClient', () => require('../Utilities/HMRClientProdShim'));
+  registerModule(
+    'HMRClient',
+    () => require('../Utilities/HMRClientProdShim').default,
+  );
 }

package/Libraries/Core/setUpDeveloperTools.js

@@ -17,32 +17,11 @@ declare var console: {[string]: $FlowFixMe};
  * You can use this module directly, or just require InitializeCore.
  */
 if (__DEV__) {
-  // Set up inspector
-  const JSInspector = require('../JSInspector/JSInspector');
-  JSInspector.registerAgent(require('../JSInspector/NetworkAgent'));
-
-  // Note we can't check if console is "native" because it would appear "native" in JSC and Hermes.
-  // We also can't check any properties that don't exist in the Chrome worker environment.
-  // So we check a navigator property that's set to a particular value ("Netscape") in all real browsers.
-  const isLikelyARealBrowser =
-    global.navigator != null &&
-    /*              _
-     *             | |
-     *   _ __   ___| |_ ___  ___ __ _ _ __   ___
-     *  | '_ \ / _ \ __/ __|/ __/ _` | '_ \ / _ \
-     *  | | | |  __/ |_\__ \ (_| (_| | |_) |  __/
-     *  |_| |_|\___|\__|___/\___\__,_| .__/ \___|
-     *                               | |
-     *                               |_|
-     */
-    global.navigator.appName === 'Netscape'; // Any real browser
-
   if (!Platform.isTesting) {
-    const HMRClient = require('../Utilities/HMRClient');
+    const HMRClient = require('../Utilities/HMRClient').default;
 
-    if (global.__FUSEBOX_HAS_FULL_CONSOLE_SUPPORT__) {
-      HMRClient.unstable_notifyFuseboxConsoleEnabled();
-    } else if (console._isPolyfilled) {
+    // TODO(T214991636): Remove legacy Metro log forwarding
+    if (console._isPolyfilled) {
       // We assume full control over the console and send JavaScript logs to Metro.
       [
         'trace',
@@ -61,21 +40,11 @@ if (__DEV__) {
           originalFunction.apply(console, args);
         };
       });
-    } else {
-      // We assume the environment has a real rich console (like Chrome), and don't hijack it to log to Metro.
-      // It's likely the developer is using rich console to debug anyway, and hijacking it would
-      // lose the filenames in console.log calls: https://github.com/facebook/react-native/issues/26788.
-      HMRClient.log('log', [
-        `JavaScript logs will appear in your ${
-          isLikelyARealBrowser ? 'browser' : 'environment'
-        } console`,
-      ]);
     }
   }
 
   require('./setUpReactRefresh');
 
-  global[
-    `${global.__METRO_GLOBAL_PREFIX__ ?? ''}__loadBundleAsync`
-  ] = require('./Devtools/loadBundleFromServer');
+  global[`${global.__METRO_GLOBAL_PREFIX__ ?? ''}__loadBundleAsync`] =
+    require('./Devtools/loadBundleFromServer').default;
 }

package/Libraries/Core/setUpErrorHandling.js

@@ -10,17 +10,12 @@
 
 'use strict';
 
-if (__DEV__) {
-  // React DevTools need to be set up before the console.error patch.
-  require('./setUpReactDevTools');
-}
-
 if (global.RN$useAlwaysAvailableJSErrorHandling !== true) {
   /**
    * Sets up the console and exception handling (redbox) for React Native.
    * You can use this module directly, or just require InitializeCore.
    */
-  const ExceptionsManager = require('./ExceptionsManager');
+  const ExceptionsManager = require('./ExceptionsManager').default;
   ExceptionsManager.installConsoleErrorReporter();
 
   // Set up error handler

package/Libraries/Core/setUpReactDevTools.js

@@ -13,6 +13,22 @@
 import type {Domain} from '../../src/private/debugging/setUpFuseboxReactDevToolsDispatcher';
 import type {Spec as NativeReactDevToolsRuntimeSettingsModuleSpec} from '../../src/private/fusebox/specs/NativeReactDevToolsRuntimeSettingsModule';
 
+if (__DEV__) {
+  if (typeof global.queueMicrotask !== 'function') {
+    console.error(
+      'queueMicrotask should exist before setting up React DevTools.',
+    );
+  }
+
+  // Keep in sync with ExceptionsManager/installConsoleErrorReporter
+  // $FlowExpectedError[prop-missing]
+  if (console._errorOriginal != null) {
+    console.error(
+      'ExceptionsManager should be set up after React DevTools to avoid console.error arguments mutation',
+    );
+  }
+}
+
 if (__DEV__) {
   // Register dispatcher on global, which can be used later by Chrome DevTools frontend
   require('../../src/private/debugging/setUpFuseboxReactDevToolsDispatcher');
@@ -54,8 +70,9 @@ if (__DEV__) {
   const reactDevToolsFuseboxGlobalBindingName =
     fuseboxReactDevToolsDispatcher.BINDING_NAME;
 
-  const ReactNativeStyleAttributes = require('../Components/View/ReactNativeStyleAttributes');
-  const resolveRNStyle = require('../StyleSheet/flattenStyle');
+  const ReactNativeStyleAttributes =
+    require('../Components/View/ReactNativeStyleAttributes').default;
+  const resolveRNStyle = require('../StyleSheet/flattenStyle').default;
 
   function handleReactDevToolsSettingsUpdate(settings: Object) {
     reactDevToolsSettingsManager.setGlobalHookSettings(
@@ -115,7 +132,7 @@ if (__DEV__) {
     // TODO(t12832058) This check is broken
     if (!window.document) {
       const AppState = require('../AppState/AppState').default;
-      const getDevServer = require('./Devtools/getDevServer');
+      const getDevServer = require('./Devtools/getDevServer').default;
 
       // Don't steal the DevTools from currently active app.
       // Note: if you add any AppState subscriptions to this file,
@@ -139,7 +156,7 @@ if (__DEV__) {
           ? window.__REACT_DEVTOOLS_PORT__
           : 8097;
 
-      const WebSocket = require('../WebSocket/WebSocket');
+      const WebSocket = require('../WebSocket/WebSocket').default;
       ws = new WebSocket('ws://' + host + ':' + port);
       ws.addEventListener('close', event => {
         isWebSocketOpen = false;
@@ -192,7 +209,8 @@ if (__DEV__) {
   );
 
   // 3. Fallback to attempting to connect WS-based RDT frontend
-  const RCTNativeAppEventEmitter = require('../EventEmitter/RCTNativeAppEventEmitter');
+  const RCTNativeAppEventEmitter =
+    require('../EventEmitter/RCTNativeAppEventEmitter').default;
   RCTNativeAppEventEmitter.addListener(
     'RCTDevMenuShown',
     connectToWSBasedReactDevToolsFrontend,

package/Libraries/Core/setUpReactRefresh.js

@@ -11,7 +11,7 @@
 'use strict';
 
 if (__DEV__) {
-  const DevSettings = require('../Utilities/DevSettings');
+  const DevSettings = require('../Utilities/DevSettings').default;
 
   if (typeof DevSettings.reload !== 'function') {
     throw new Error('Could not find the reload() implementation.');

package/Libraries/Core/setUpTimers.js

@@ -20,20 +20,6 @@ if (__DEV__) {
 
 // In bridgeless mode, timers are host functions installed from cpp.
 if (global.RN$Bridgeless === true) {
-  polyfillGlobal(
-    'requestIdleCallback',
-    () =>
-      require('../../src/private/webapis/idlecallbacks/specs/NativeIdleCallbacks')
-        .default.requestIdleCallback,
-  );
-
-  polyfillGlobal(
-    'cancelIdleCallback',
-    () =>
-      require('../../src/private/webapis/idlecallbacks/specs/NativeIdleCallbacks')
-        .default.cancelIdleCallback,
-  );
-
   // 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
@@ -57,6 +43,20 @@ if (global.RN$Bridgeless === true) {
     '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.
@@ -73,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');
@@ -95,10 +95,10 @@ if (global.RN$Bridgeless === true) {
   // Note that in bridgeless mode, immediate APIs are installed from cpp.
   polyfillGlobal(
     'setImmediate',
-    () => require('./Timers/JSTimers').queueReactNativeMicrotask,
+    () => require('./Timers/JSTimers').default.queueReactNativeMicrotask,
   );
   polyfillGlobal(
     'clearImmediate',
-    () => require('./Timers/JSTimers').clearReactNativeMicrotask,
+    () => require('./Timers/JSTimers').default.clearReactNativeMicrotask,
   );
 }

package/Libraries/Core/setUpXHR.js

@@ -18,14 +18,17 @@ 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('WebSocket', () => require('../WebSocket/WebSocket').default);
 polyfillGlobal('Blob', () => require('../Blob/Blob').default);
 polyfillGlobal('File', () => require('../Blob/File').default);
 polyfillGlobal('FileReader', () => require('../Blob/FileReader').default);

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/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

@@ -23,7 +23,7 @@ type RCTDeviceEventDefinitions = {[name: string]: Array<any>};
  *
  * 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,
@@ -34,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

@@ -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

@@ -12,7 +12,9 @@
 
 import type {PackagerAsset} from '@react-native/assets-registry/registry';
 
-module.exports = require('@react-native/assets-registry/registry') as {
+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

@@ -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,6 +133,7 @@ let BaseImage: AbstractImageAndroid = React.forwardRef(
       width: undefined,
       height: undefined,
     };
+    const defaultSource = resolveAssetSource(props.defaultSource);
     const loadingIndicatorSource = resolveAssetSource(
       props.loadingIndicatorSource,
     );
@@ -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.win32.js

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

package/Libraries/Image/ImageBackground.js

@@ -103,4 +103,4 @@ class ImageBackground extends React.Component<ImageBackgroundProps> {
   }
 }
 
-module.exports = ImageBackground;
+export default ImageBackground;

package/Libraries/Image/ImageProps.js

@@ -17,13 +17,16 @@ import type {
   ImageStyleProp,
   ViewStyleProp,
 } from '../StyleSheet/StyleSheet';
-import type {LayoutEvent, SyntheticEvent} from '../Types/CoreEventTypes';
+import type {
+  LayoutChangeEvent,
+  NativeSyntheticEvent,
+} from '../Types/CoreEventTypes';
 import typeof Image from './Image';
 import type {ImageResizeMode} from './ImageResizeMode';
 import type {ImageSource} from './ImageSource';
 import type {ElementRef, Node, RefSetter} from 'react';
 
-export type ImageLoadEvent = SyntheticEvent<
+export type ImageLoadEvent = NativeSyntheticEvent<
   $ReadOnly<{
     source: $ReadOnly<{
       width: number,
@@ -52,7 +55,7 @@ type IOSImageProps = $ReadOnly<{
    * See https://reactnative.dev/docs/image#onprogress
    */
   onProgress?: ?(
-    event: SyntheticEvent<$ReadOnly<{loaded: number, total: number}>>,
+    event: NativeSyntheticEvent<$ReadOnly<{loaded: number, total: number}>>,
   ) => void,
 }>;
 
@@ -163,7 +166,7 @@ export type ImageProps = $ReadOnly<{
    * See https://reactnative.dev/docs/image#onerror
    */
   onError?: ?(
-    event: SyntheticEvent<
+    event: NativeSyntheticEvent<
       $ReadOnly<{
         error: string,
       }>,
@@ -177,7 +180,7 @@ export type ImageProps = $ReadOnly<{
    * See https://reactnative.dev/docs/image#onlayout
    */
 
-  onLayout?: ?(event: LayoutEvent) => mixed,
+  onLayout?: ?(event: LayoutChangeEvent) => mixed,
 
   /**
    * Invoked when load completes successfully.