@office-iss/react-native-win32 0.70.2 → 0.71.0-preview.1

package/Libraries/Image/Image.d.ts

@@ -0,0 +1,322 @@
+/**
+ * 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 * as React from 'react';
+import {Constructor} from '../../types/private/Utilities';
+import {AccessibilityProps} from '../Components/View/ViewAccessibility';
+import {Insets} from '../../types/public/Insets';
+import {NativeMethods} from '../../types/public/ReactNativeTypes';
+import {StyleProp} from '../StyleSheet/StyleSheet';
+import {ImageStyle, ViewStyle} from '../StyleSheet/StyleSheetTypes';
+import {LayoutChangeEvent, NativeSyntheticEvent} from '../Types/CoreEventTypes';
+import {ImageResizeMode} from './ImageResizeMode';
+import {ImageRequireSource, ImageURISource} from './ImageSource';
+
+/**
+ * @see ImagePropsIOS.onProgress
+ */
+export interface ImageProgressEventDataIOS {
+  loaded: number;
+  total: number;
+}
+
+export interface ImagePropsIOS {
+  /**
+   * blurRadius: the blur radius of the blur filter added to the image
+   * @platform ios
+   */
+  blurRadius?: number | undefined;
+
+  /**
+   * When the image is resized, the corners of the size specified by capInsets will stay a fixed size,
+   * but the center content and borders of the image will be stretched.
+   * This is useful for creating resizable rounded buttons, shadows, and other resizable assets.
+   * More info on Apple documentation
+   */
+  capInsets?: Insets | undefined;
+
+  /**
+   * Invoked on download progress with {nativeEvent: {loaded, total}}
+   */
+  onProgress?:
+    | ((event: NativeSyntheticEvent<ImageProgressEventDataIOS>) => void)
+    | undefined;
+
+  /**
+   * Invoked when a partial load of the image is complete. The definition of
+   * what constitutes a "partial load" is loader specific though this is meant
+   * for progressive JPEG loads.
+   * @platform ios
+   */
+  onPartialLoad?: (() => void) | undefined;
+}
+
+interface ImagePropsAndroid {
+  /**
+   * 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.
+   */
+  resizeMethod?: 'auto' | 'resize' | 'scale' | undefined;
+
+  /**
+   * Duration of fade in animation in ms. Defaults to 300
+   *
+   * @platform android
+   */
+  fadeDuration?: number | undefined;
+}
+
+/**
+ * @see https://reactnative.dev/docs/image#source
+ */
+export type ImageSourcePropType =
+  | ImageURISource
+  | ImageURISource[]
+  | ImageRequireSource;
+
+export interface ImageLoadEventData {
+  source: {
+    height: number;
+    width: number;
+    uri: string;
+  };
+}
+
+export interface ImageErrorEventData {
+  error: any;
+}
+
+/**
+ * @see https://reactnative.dev/docs/image#resolveassetsource
+ */
+export interface ImageResolvedAssetSource {
+  height: number;
+  width: number;
+  scale: number;
+  uri: string;
+}
+
+/**
+ * @see https://reactnative.dev/docs/image
+ */
+export interface ImagePropsBase
+  extends ImagePropsIOS,
+    ImagePropsAndroid,
+    AccessibilityProps {
+  /**
+   * Used to reference react managed images from native code.
+   */
+  id?: string | undefined;
+
+  /**
+   * onLayout function
+   *
+   * Invoked on mount and layout changes with
+   *
+   * {nativeEvent: { layout: {x, y, width, height} }}.
+   */
+  onLayout?: ((event: LayoutChangeEvent) => void) | undefined;
+
+  /**
+   * Invoked on load error with {nativeEvent: {error}}
+   */
+  onError?:
+    | ((error: NativeSyntheticEvent<ImageErrorEventData>) => void)
+    | undefined;
+
+  /**
+   * Invoked when load completes successfully
+   * { source: { uri, height, width } }.
+   */
+  onLoad?:
+    | ((event: NativeSyntheticEvent<ImageLoadEventData>) => void)
+    | undefined;
+
+  /**
+   * Invoked when load either succeeds or fails
+   */
+  onLoadEnd?: (() => void) | undefined;
+
+  /**
+   * Invoked on load start
+   */
+  onLoadStart?: (() => void) | undefined;
+
+  progressiveRenderingEnabled?: boolean | undefined;
+
+  borderRadius?: number | undefined;
+
+  borderTopLeftRadius?: number | undefined;
+
+  borderTopRightRadius?: number | undefined;
+
+  borderBottomLeftRadius?: number | undefined;
+
+  borderBottomRightRadius?: number | undefined;
+
+  /**
+   * 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.
+   */
+  resizeMode?: ImageResizeMode | undefined;
+
+  /**
+   * 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.
+   *
+   * More details about `resize` and `scale` can be found at http://frescolib.org/docs/resizing-rotating.html.
+   *
+   * @platform android
+   */
+  resizeMethod?: 'auto' | 'resize' | 'scale' | undefined;
+
+  /**
+   * 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).
+   */
+  source: ImageSourcePropType;
+
+  /**
+   * 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?: ImageURISource | undefined;
+
+  /**
+   * A unique identifier for this element to be used in UI Automation testing scripts.
+   */
+  testID?: string | undefined;
+
+  /**
+   * Used to reference react managed images from native code.
+   */
+  nativeID?: string | undefined;
+
+  /**
+   * A static image to display while downloading the final image off the network.
+   */
+  defaultSource?: ImageURISource | number | undefined;
+
+  /**
+   * The text that's read by the screen reader when the user interacts with
+   * the image.
+   *
+   * See https://reactnative.dev/docs/image#alt
+   */
+  alt?: string | undefined;
+}
+
+export interface ImageProps extends ImagePropsBase {
+  /**
+   *
+   * Style
+   */
+  style?: StyleProp<ImageStyle> | undefined;
+}
+
+declare class ImageComponent extends React.Component<ImageProps> {}
+declare const ImageBase: Constructor<NativeMethods> & typeof ImageComponent;
+export class Image extends ImageBase {
+  static getSize(
+    uri: string,
+    success: (width: number, height: number) => void,
+    failure?: (error: any) => void,
+  ): any;
+  static getSizeWithHeaders(
+    uri: string,
+    headers: {[index: string]: string},
+    success: (width: number, height: number) => void,
+    failure?: (error: any) => void,
+  ): any;
+  static prefetch(url: string): Promise<boolean>;
+  static prefetchWithMetadata(
+    url: string,
+    queryRootName: string,
+    rootTag?: number,
+  ): Promise<boolean>;
+  static abortPrefetch?(requestId: number): void;
+  static queryCache?(
+    urls: string[],
+  ): Promise<{[url: string]: 'memory' | 'disk' | 'disk/memory'}>;
+
+  /**
+   * @see https://reactnative.dev/docs/image#resolveassetsource
+   */
+  static resolveAssetSource(
+    source: ImageSourcePropType,
+  ): ImageResolvedAssetSource;
+}
+
+export interface ImageBackgroundProps extends ImagePropsBase {
+  children?: React.ReactNode;
+  imageStyle?: StyleProp<ImageStyle> | undefined;
+  style?: StyleProp<ViewStyle> | undefined;
+  imageRef?(image: Image): void;
+}
+
+declare class ImageBackgroundComponent extends React.Component<ImageBackgroundProps> {}
+declare const ImageBackgroundBase: Constructor<NativeMethods> &
+  typeof ImageBackgroundComponent;
+export class ImageBackground extends ImageBackgroundBase {
+  resizeMode: ImageResizeMode;
+  getSize(
+    uri: string,
+    success: (width: number, height: number) => void,
+    failure: (error: any) => void,
+  ): any;
+  prefetch(url: string): any;
+  abortPrefetch?(requestId: number): void;
+  queryCache?(
+    urls: string[],
+  ): Promise<{[url: string]: 'memory' | 'disk' | 'disk/memory'}>;
+}

package/Libraries/Image/Image.flow.js

@@ -0,0 +1,64 @@
+/**
+ * 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
+ * @format
+ */
+
+import type {RootTag} from '../Types/RootTagTypes';
+import type {ResolvedAssetSource} from './AssetSourceResolver';
+import type {ImageProps as ImagePropsType} from './ImageProps';
+
+import ImageViewNativeComponent from './ImageViewNativeComponent';
+import TextInlineImageNativeComponent from './TextInlineImageNativeComponent';
+import * as React from 'react';
+
+type ImageComponentStaticsIOS = $ReadOnly<{|
+  getSize: (
+    uri: string,
+    success: (width: number, height: number) => void,
+    failure?: (error: any) => void,
+  ) => void,
+
+  getSizeWithHeaders(
+    uri: string,
+    headers: {[string]: string, ...},
+    success: (width: number, height: number) => void,
+    failure?: (error: any) => void,
+  ): any,
+
+  prefetch(url: string): any,
+
+  prefetchWithMetadata(
+    url: string,
+    queryRootName: string,
+    rootTag?: ?RootTag,
+  ): any,
+
+  queryCache(
+    urls: Array<string>,
+  ): Promise<{[string]: 'memory' | 'disk' | 'disk/memory', ...}>,
+
+  resolveAssetSource(source: any): ?ResolvedAssetSource,
+|}>;
+
+type ImageComponentStaticsAndroid = {
+  ...ImageComponentStaticsIOS,
+  abortPrefetch(requestId: number): void,
+};
+
+export type ImageAndroid = React.AbstractComponent<
+  ImagePropsType,
+  | React.ElementRef<typeof TextInlineImageNativeComponent>
+  | React.ElementRef<typeof ImageViewNativeComponent>,
+> &
+  ImageComponentStaticsAndroid;
+
+export type ImageIOS = React.AbstractComponent<
+  ImagePropsType,
+  React.ElementRef<typeof ImageViewNativeComponent>,
+> &
+  ImageComponentStaticsIOS;

package/Libraries/Image/Image.ios.js

@@ -8,21 +8,21 @@
  * @format
  */
 
-import * as React from 'react';
-import StyleSheet from '../StyleSheet/StyleSheet';
-
-import ImageInjection from './ImageInjection';
-import ImageAnalyticsTagContext from './ImageAnalyticsTagContext';
-import flattenStyle from '../StyleSheet/flattenStyle';
-import resolveAssetSource from './resolveAssetSource';
-
-import type {ImageProps as ImagePropsType} from './ImageProps';
-
 import type {ImageStyleProp} from '../StyleSheet/StyleSheet';
-import NativeImageLoaderIOS from './NativeImageLoaderIOS';
+import type {RootTag} from '../Types/RootTagTypes';
+import type {ImageIOS} from './Image.flow';
+import type {ImageProps as ImagePropsType} from './ImageProps';
 
+import flattenStyle from '../StyleSheet/flattenStyle';
+import StyleSheet from '../StyleSheet/StyleSheet';
+import ImageAnalyticsTagContext from './ImageAnalyticsTagContext';
+import ImageInjection from './ImageInjection';
+import {getImageSourcesFromImageProps} from './ImageSourceUtils';
+import {convertObjectFitToResizeMode} from './ImageUtils';
 import ImageViewNativeComponent from './ImageViewNativeComponent';
-import type {RootTag} from 'react-native/Libraries/Types/RootTagTypes';
+import NativeImageLoaderIOS from './NativeImageLoaderIOS';
+import resolveAssetSource from './resolveAssetSource';
+import * as React from 'react';
 
 function getSize(
   uri: string,
@@ -105,7 +105,7 @@ export type ImageComponentStatics = $ReadOnly<{|
 /* $FlowFixMe[missing-local-annot] The type annotation(s) required by Flow's
  * LTI update could not be added via codemod */
 const BaseImage = (props: ImagePropsType, forwardedRef) => {
-  const source = resolveAssetSource(props.source) || {
+  const source = getImageSourcesFromImageProps(props) || {
     uri: undefined,
     width: undefined,
     height: undefined,
@@ -117,7 +117,7 @@ const BaseImage = (props: ImagePropsType, forwardedRef) => {
     style = flattenStyle([styles.base, props.style]) || {};
     sources = source;
   } else {
-    const {width, height, uri} = source;
+    const {width = props.width, height = props.height, uri} = source;
     style = flattenStyle([{width, height}, styles.base, props.style]) || {};
     sources = [source];
 
@@ -126,27 +126,52 @@ const BaseImage = (props: ImagePropsType, forwardedRef) => {
     }
   }
 
-  const resizeMode = props.resizeMode || style.resizeMode || 'cover';
-  const tintColor = style.tintColor;
-
-  if (props.src != null) {
-    console.warn(
-      'The <Image> component requires a `source` property rather than `src`.',
-    );
-  }
+  const objectFit =
+    // $FlowFixMe[prop-missing]
+    style && style.objectFit
+      ? convertObjectFitToResizeMode(style.objectFit)
+      : null;
+  const resizeMode =
+    // $FlowFixMe[prop-missing]
+    objectFit || props.resizeMode || (style && style.resizeMode) || 'cover';
+  // $FlowFixMe[prop-missing]
+  const tintColor = props.tintColor || style.tintColor;
 
   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.',
     );
   }
+  const {
+    'aria-busy': ariaBusy,
+    'aria-checked': ariaChecked,
+    'aria-disabled': ariaDisabled,
+    'aria-expanded': ariaExpanded,
+    'aria-selected': ariaSelected,
+    height,
+    src,
+    width,
+    ...restProps
+  } = props;
+
+  const _accessibilityState = {
+    busy: ariaBusy ?? props.accessibilityState?.busy,
+    checked: ariaChecked ?? props.accessibilityState?.checked,
+    disabled: ariaDisabled ?? props.accessibilityState?.disabled,
+    expanded: ariaExpanded ?? props.accessibilityState?.expanded,
+    selected: ariaSelected ?? props.accessibilityState?.selected,
+  };
+  const accessibilityLabel = props['aria-label'] ?? props.accessibilityLabel;
 
   return (
     <ImageAnalyticsTagContext.Consumer>
       {analyticTag => {
         return (
           <ImageViewNativeComponent
-            {...props}
+            accessibilityState={_accessibilityState}
+            {...restProps}
+            accessible={props.alt !== undefined ? true : props.accessible}
+            accessibilityLabel={accessibilityLabel ?? props.alt}
             ref={forwardedRef}
             style={style}
             resizeMode={resizeMode}
@@ -235,14 +260,16 @@ Image.queryCache = queryCache;
  * delete this comment and run Flow. */
 Image.resolveAssetSource = resolveAssetSource;
 
+/**
+ * Switch to `deprecated-react-native-prop-types` for compatibility with future
+ * releases. This is deprecated and will be removed in the future.
+ */
+Image.propTypes = require('deprecated-react-native-prop-types').ImagePropTypes;
+
 const styles = StyleSheet.create({
   base: {
     overflow: 'hidden',
   },
 });
 
-module.exports = ((Image: any): React.AbstractComponent<
-  ImagePropsType,
-  React.ElementRef<typeof ImageViewNativeComponent>,
-> &
-  ImageComponentStatics);
+module.exports = ((Image: any): ImageIOS);

package/Libraries/Image/Image.win32.js

@@ -8,14 +8,8 @@
  * @format
  */
 
-import * as React from 'react';
-import StyleSheet from '../StyleSheet/StyleSheet';
-
-import ImageInjection from './ImageInjection';
-import ImageAnalyticsTagContext from './ImageAnalyticsTagContext';
-import flattenStyle from '../StyleSheet/flattenStyle';
-import resolveAssetSource from './resolveAssetSource';
-
+import type {RootTag} from '../Types/RootTagTypes';
+import type {ImageIOS} from './Image.flow';
 import TextAncestor from '../Text/TextAncestor'; // [Windows]
 import invariant from 'invariant'; // [Windows]
 
@@ -24,8 +18,16 @@ import type {ImageProps as ImagePropsType} from './ImageProps';
 import type {ImageStyleProp} from '../StyleSheet/StyleSheet';
 import NativeImageLoaderWin32 from './NativeImageLoaderWin32'; // [Win32] Replace iOS
 
+import flattenStyle from '../StyleSheet/flattenStyle';
+import StyleSheet from '../StyleSheet/StyleSheet';
+import ImageAnalyticsTagContext from './ImageAnalyticsTagContext';
+import ImageInjection from './ImageInjection';
+import {getImageSourcesFromImageProps} from './ImageSourceUtils';
+import {convertObjectFitToResizeMode} from './ImageUtils';
 import ImageViewNativeComponent from './ImageViewNativeComponent';
-import type {RootTag} from 'react-native/Libraries/Types/RootTagTypes';
+import NativeImageLoaderIOS from './NativeImageLoaderIOS';
+import resolveAssetSource from './resolveAssetSource';
+import * as React from 'react';
 
 function getSize(
   uri: string,
@@ -127,7 +129,7 @@ export type ImageComponentStatics = $ReadOnly<{|
 /* $FlowFixMe[missing-local-annot] The type annotation(s) required by Flow's
  * LTI update could not be added via codemod */
 const BaseImage = (props: ImagePropsType, forwardedRef) => {
-  const source = resolveAssetSource(props.source) || {
+  const source = getImageSourcesFromImageProps(props) || {
     uri: undefined,
     width: undefined,
     height: undefined,
@@ -139,7 +141,7 @@ const BaseImage = (props: ImagePropsType, forwardedRef) => {
     style = flattenStyle([styles.base, props.style]) || {};
     sources = source;
   } else {
-    const {width, height, uri} = source;
+    const {width = props.width, height = props.height, uri} = source;
     style = flattenStyle([{width, height}, styles.base, props.style]) || {};
     sources = [source];
 
@@ -148,20 +150,42 @@ const BaseImage = (props: ImagePropsType, forwardedRef) => {
     }
   }
 
-  const resizeMode = props.resizeMode || style.resizeMode || 'cover';
-  const tintColor = style.tintColor;
-
-  if (props.src != null) {
-    console.warn(
-      'The <Image> component requires a `source` property rather than `src`.',
-    );
-  }
+  const objectFit =
+    // $FlowFixMe[prop-missing]
+    style && style.objectFit
+      ? convertObjectFitToResizeMode(style.objectFit)
+      : null;
+  const resizeMode =
+    // $FlowFixMe[prop-missing]
+    objectFit || props.resizeMode || (style && style.resizeMode) || 'cover';
+  // $FlowFixMe[prop-missing]
+  const tintColor = props.tintColor || style.tintColor;
 
   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.',
     );
   }
+  const {
+    'aria-busy': ariaBusy,
+    'aria-checked': ariaChecked,
+    'aria-disabled': ariaDisabled,
+    'aria-expanded': ariaExpanded,
+    'aria-selected': ariaSelected,
+    height,
+    src,
+    width,
+    ...restProps
+  } = props;
+
+  const _accessibilityState = {
+    busy: ariaBusy ?? props.accessibilityState?.busy,
+    checked: ariaChecked ?? props.accessibilityState?.checked,
+    disabled: ariaDisabled ?? props.accessibilityState?.disabled,
+    expanded: ariaExpanded ?? props.accessibilityState?.expanded,
+    selected: ariaSelected ?? props.accessibilityState?.selected,
+  };
+  const accessibilityLabel = props['aria-label'] ?? props.accessibilityLabel;
 
   return (
     // [Win32
@@ -178,7 +202,10 @@ const BaseImage = (props: ImagePropsType, forwardedRef) => {
             {analyticTag => {
               return (
                 <ImageViewNativeComponent
-                  {...props}
+                  {...restProps}
+                  accessibilityState={_accessibilityState}
+                  accessible={props.alt !== undefined ? true : props.accessible}
+                  accessibilityLabel={accessibilityLabel}
                   ref={forwardedRef}
                   style={style}
                   resizeMode={resizeMode}
@@ -270,14 +297,16 @@ Image.queryCache = queryCache;
  * delete this comment and run Flow. */
 Image.resolveAssetSource = resolveAssetSource;
 
+/**
+ * Switch to `deprecated-react-native-prop-types` for compatibility with future
+ * releases. This is deprecated and will be removed in the future.
+ */
+Image.propTypes = require('deprecated-react-native-prop-types').ImagePropTypes;
+
 const styles = StyleSheet.create({
   base: {
     overflow: 'hidden',
   },
 });
 
-module.exports = ((Image: any): React.AbstractComponent<
-  ImagePropsType,
-  React.ElementRef<typeof ImageViewNativeComponent>,
-> &
-  ImageComponentStatics);
+module.exports = ((Image: any): ImageIOS);