react-native-windows 0.78.6 → 0.79.0-preview.1

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/AssetSourceResolver.windows.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,
@@ -232,4 +232,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.windows.js

@@ -28,7 +28,6 @@ import {convertObjectFitToResizeMode} from './ImageUtils';
 import ImageViewNativeComponent from './ImageViewNativeComponent';
 import NativeImageLoaderIOS from './NativeImageLoaderIOS';
 import resolveAssetSource from './resolveAssetSource';
-import TextInlineImageNativeComponent from './TextInlineImageNativeComponent';
 import * as React from 'react';
 
 function getSize(
@@ -293,4 +292,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;

package/Libraries/Image/ImageProps.js

@@ -17,23 +17,42 @@ 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 {ImageSource, ImageURISource} from './ImageSource';
 import type {ElementRef, Node, RefSetter} from 'react';
 
-export type ImageLoadEvent = SyntheticEvent<
-  $ReadOnly<{|
-    source: $ReadOnly<{|
-      width: number,
-      height: number,
-      uri: string,
-    |}>,
-  |}>,
+export type ImageSourcePropType = ImageSource;
+
+/**
+ * @see ImagePropsIOS.onProgress
+ */
+export type ImageProgressEventDataIOS = {
+  loaded: number,
+  total: number,
+};
+
+export type ImageErrorEventData = {
+  error: string,
+};
+
+export type ImageLoadEventData = {
+  source: {
+    height: number,
+    width: number,
+    uri: string,
+  },
+};
+
+export type ImageLoadEvent = NativeSyntheticEvent<
+  $ReadOnly<ImageLoadEventData>,
 >;
 
-type IOSImageProps = $ReadOnly<{|
+export type ImagePropsIOS = $ReadOnly<{
   /**
    * A static image to display while loading the image source.
    *
@@ -52,19 +71,42 @@ type IOSImageProps = $ReadOnly<{|
    * See https://reactnative.dev/docs/image#onprogress
    */
   onProgress?: ?(
-    event: SyntheticEvent<$ReadOnly<{|loaded: number, total: number|}>>,
+    event: NativeSyntheticEvent<$ReadOnly<ImageProgressEventDataIOS>>,
   ) => void,
-|}>;
+}>;
 
-type AndroidImageProps = $ReadOnly<{|
-  loadingIndicatorSource?: ?(number | $ReadOnly<{|uri: string|}>),
+export type ImagePropsAndroid = $ReadOnly<{
+  /**
+   * similarly to `source`, this property represents the resource used to render
+   * the loading indicator for the image, displayed until image is ready to be
+   * displayed, typically after when it got downloaded from network.
+   */
+  loadingIndicatorSource?: ?(number | $ReadOnly<ImageURISource>),
   progressiveRenderingEnabled?: ?boolean,
   fadeDuration?: ?number,
 
   /**
-   * The mechanism that should be used to resize the image when the image's
-   * dimensions differ from the image view's dimensions. Defaults to `'auto'`.
-   * See https://reactnative.dev/docs/image#resizemethod-android
+   * The mechanism that should be used to resize the image when the image's dimensions
+   * differ from the image view's dimensions. Defaults to `auto`.
+   *
+   * - `auto`: Use heuristics to pick between `resize` and `scale`.
+   *
+   * - `resize`: A software operation which changes the encoded image in memory before it
+   * gets decoded. This should be used instead of `scale` when the image is much larger
+   * than the view.
+   *
+   * - `scale`: The image gets drawn downscaled or upscaled. Compared to `resize`, `scale` is
+   * faster (usually hardware accelerated) and produces higher quality images. This
+   * should be used if the image is smaller than the view. It should also be used if the
+   * image is slightly bigger than the view.
+   *
+   * - `none`: No sampling is performed and the image is displayed in its full resolution. This
+   * should only be used in rare circumstances because it is considered unsafe as Android will
+   * throw a runtime exception when trying to render images that consume too much memory.
+   *
+   * More details about `resize` and `scale` can be found at http://frescolib.org/docs/resizing-rotating.html.
+   *
+   * @platform android
    */
   resizeMethod?: ?('auto' | 'resize' | 'scale' | 'none'),
 
@@ -76,13 +118,10 @@ type AndroidImageProps = $ReadOnly<{|
    * Defaults to 1.0.
    */
   resizeMultiplier?: ?number,
-|}>;
-
-export type ImageProps = $ReadOnly<{|
-  ...$Diff<ViewProps, $ReadOnly<{|style: ?ViewStyleProp|}>>,
-  ...IOSImageProps,
-  ...AndroidImageProps,
+}>;
 
+export type ImagePropsBase = $ReadOnly<{
+  ...$Diff<ViewProps, $ReadOnly<{style: ?ViewStyleProp}>>,
   /**
    * When true, indicates the image is an accessibility element.
    *
@@ -163,21 +202,20 @@ export type ImageProps = $ReadOnly<{|
    * See https://reactnative.dev/docs/image#onerror
    */
   onError?: ?(
-    event: SyntheticEvent<
-      $ReadOnly<{|
-        error: string,
-      |}>,
-    >,
+    event: NativeSyntheticEvent<$ReadOnly<ImageErrorEventData>>,
   ) => void,
 
   /**
+   * onLayout function
+   *
    * Invoked on mount and layout changes with
-   * `{nativeEvent: {layout: {x, y, width, height}}}`.
+   *
+   * {nativeEvent: { layout: {x, y, width, height} }}.
    *
    * See https://reactnative.dev/docs/image#onlayout
    */
 
-  onLayout?: ?(event: LayoutEvent) => mixed,
+  onLayout?: ?(event: LayoutChangeEvent) => mixed,
 
   /**
    * Invoked when load completes successfully.
@@ -203,15 +241,16 @@ export type ImageProps = $ReadOnly<{|
   /**
    * The image source (either a remote URL or a local file resource).
    *
+   * This prop can also contain several remote URLs, specified together with their width and height and potentially with scale/other URI arguments.
+   * The native side will then choose the best uri to display based on the measured size of the image container.
+   * A cache property can be added to control how networked request interacts with the local cache.
+   *
+   * The currently supported formats are png, jpg, jpeg, bmp, gif, webp (Android only), psd (iOS only).
+   *
    * See https://reactnative.dev/docs/image#source
    */
   source?: ?ImageSource,
 
-  /**
-   * See https://reactnative.dev/docs/image#style
-   */
-  style?: ?ImageStyleProp,
-
   /**
    * A string indicating which referrer to use when fetching the resource.
    * Similar to referrerpolicy from HTML.
@@ -233,6 +272,26 @@ export type ImageProps = $ReadOnly<{|
    * Determines how to resize the image when the frame doesn't match the raw
    * image dimensions.
    *
+   * 'cover': Scale the image uniformly (maintain the image's aspect ratio)
+   * so that both dimensions (width and height) of the image will be equal
+   * to or larger than the corresponding dimension of the view (minus padding).
+   *
+   * 'contain': Scale the image uniformly (maintain the image's aspect ratio)
+   * so that both dimensions (width and height) of the image will be equal to
+   * or less than the corresponding dimension of the view (minus padding).
+   *
+   * 'stretch': Scale width and height independently, This may change the
+   * aspect ratio of the src.
+   *
+   * 'repeat': Repeat the image to cover the frame of the view.
+   * The image will keep it's size and aspect ratio. (iOS only)
+   *
+   * 'center': Scale the image down so that it is completely visible,
+   * if bigger than the area of the view.
+   * The image will not be scaled up.
+   *
+   * 'none': Do not resize the image. The image will be displayed at its intrinsic size.
+   *
    * See https://reactnative.dev/docs/image#resizemode
    */
   resizeMode?: ?ImageResizeMode,
@@ -267,9 +326,20 @@ export type ImageProps = $ReadOnly<{|
    */
   srcSet?: ?string,
   children?: empty,
-|}>;
+}>;
+
+export type ImageProps = $ReadOnly<{
+  ...ImagePropsIOS,
+  ...ImagePropsAndroid,
+  ...ImagePropsBase,
+
+  /**
+   * See https://reactnative.dev/docs/image#style
+   */
+  style?: ?ImageStyleProp,
+}>;
 
-export type ImageBackgroundProps = $ReadOnly<{|
+export type ImageBackgroundProps = $ReadOnly<{
   ...ImageProps,
   children?: Node,
 
@@ -293,4 +363,4 @@ export type ImageBackgroundProps = $ReadOnly<{|
    * See https://reactnative.dev/docs/imagebackground#imageref
    */
   imageRef?: RefSetter<ElementRef<Image>>,
-|}>;
+}>;