react-native-windows 0.70.8 → 0.71.0-preview.1

package/Libraries/Image/Image.android.js

@@ -8,21 +8,22 @@
  * @format
  */
 
-import ImageViewNativeComponent from './ImageViewNativeComponent';
-import * as React from 'react';
+import type {RootTag} from '../Types/RootTagTypes';
+import type {ImageAndroid} from './Image.flow';
+import type {ImageProps as ImagePropsType} from './ImageProps';
+
+import flattenStyle from '../StyleSheet/flattenStyle';
 import StyleSheet from '../StyleSheet/StyleSheet';
 import TextAncestor from '../Text/TextAncestor';
-import ImageInjection from './ImageInjection';
 import ImageAnalyticsTagContext from './ImageAnalyticsTagContext';
-import flattenStyle from '../StyleSheet/flattenStyle';
-import resolveAssetSource from './resolveAssetSource';
-
+import ImageInjection from './ImageInjection';
+import {getImageSourcesFromImageProps} from './ImageSourceUtils';
+import {convertObjectFitToResizeMode} from './ImageUtils';
+import ImageViewNativeComponent from './ImageViewNativeComponent';
 import NativeImageLoaderAndroid from './NativeImageLoaderAndroid';
-
+import resolveAssetSource from './resolveAssetSource';
 import TextInlineImageNativeComponent from './TextInlineImageNativeComponent';
-
-import type {ImageProps as ImagePropsType} from './ImageProps';
-import type {RootTag} from '../Types/RootTagTypes';
+import * as React from 'react';
 
 let _requestId = 1;
 function generateRequestId() {
@@ -126,25 +127,16 @@ 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) => {
-  let source = resolveAssetSource(props.source);
+  let source = getImageSourcesFromImageProps(props) || {
+    uri: undefined,
+    width: undefined,
+    height: undefined,
+  };
   const defaultSource = resolveAssetSource(props.defaultSource);
   const loadingIndicatorSource = resolveAssetSource(
     props.loadingIndicatorSource,
   );
 
-  if (source) {
-    const uri = source.uri;
-    if (uri === '') {
-      console.warn('source.uri should not be an empty string');
-    }
-  }
-
-  if (props.src) {
-    console.warn(
-      'The <Image> component requires a `source` property rather than `src`.',
-    );
-  }
-
   if (props.children) {
     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.',
@@ -157,37 +149,58 @@ const BaseImage = (props: ImagePropsType, forwardedRef) => {
     );
   }
 
-  if (source && !source.uri && !Array.isArray(source)) {
-    source = null;
-  }
-
   let style;
   let sources;
-  if (source?.uri != null) {
-    const {width, height} = source;
-    style = flattenStyle([{width, height}, styles.base, props.style]);
-    sources = [{uri: source.uri}];
-  } else {
+  if (Array.isArray(source)) {
     style = flattenStyle([styles.base, props.style]);
     sources = source;
+  } else {
+    const {width = props.width, height = props.height, uri} = source;
+    style = flattenStyle([{width, height}, styles.base, props.style]);
+    sources = [source];
+
+    if (uri === '') {
+      console.warn('source.uri should not be an empty string');
+    }
   }
 
+  const {height, width, ...restProps} = props;
   const {onLoadStart, onLoad, onLoadEnd, onError} = props;
   const nativeProps = {
-    ...props,
+    ...restProps,
     style,
     shouldNotifyLoadEvents: !!(onLoadStart || onLoad || onLoadEnd || onError),
     src: sources,
     /* $FlowFixMe(>=0.78.0 site=react_native_android_fb) This issue was found
      * when making Flow check .android.js files. */
-    headers: source?.headers,
+    headers: (source?.[0]?.headers || source?.headers: ?{[string]: string}),
     defaultSrc: defaultSource ? defaultSource.uri : null,
     loadingIndicatorSrc: loadingIndicatorSource
       ? loadingIndicatorSource.uri
       : null,
     ref: forwardedRef,
+    accessibilityLabel:
+      props['aria-label'] ?? props.accessibilityLabel ?? props.alt,
+    accessibilityLabelledBy:
+      props?.['aria-labelledby'] ?? props?.accessibilityLabelledBy,
+    accessible: props.alt !== undefined ? true : props.accessible,
+    accessibilityState: {
+      busy: props['aria-busy'] ?? props.accessibilityState?.busy,
+      checked: props['aria-checked'] ?? props.accessibilityState?.checked,
+      disabled: props['aria-disabled'] ?? props.accessibilityState?.disabled,
+      expanded: props['aria-expanded'] ?? props.accessibilityState?.expanded,
+      selected: props['aria-selected'] ?? props.accessibilityState?.selected,
+    },
   };
 
+  const objectFit =
+    style && style.objectFit
+      ? convertObjectFitToResizeMode(style.objectFit)
+      : null;
+  // $FlowFixMe[prop-missing]
+  const resizeMode =
+    objectFit || props.resizeMode || (style && style.resizeMode) || 'cover';
+
   return (
     <ImageAnalyticsTagContext.Consumer>
       {analyticTag => {
@@ -202,19 +215,23 @@ const BaseImage = (props: ImagePropsType, forwardedRef) => {
           <TextAncestor.Consumer>
             {hasTextAncestor => {
               if (hasTextAncestor) {
-                let src = Array.isArray(sources) ? sources : [sources];
                 return (
                   <TextInlineImageNativeComponent
                     style={style}
-                    resizeMode={props.resizeMode}
+                    resizeMode={resizeMode}
                     headers={nativeProps.headers}
-                    src={src}
+                    src={sources}
                     ref={forwardedRef}
                   />
                 );
               }
 
-              return <ImageViewNativeComponent {...nativePropsWithAnalytics} />;
+              return (
+                <ImageViewNativeComponent
+                  {...nativePropsWithAnalytics}
+                  resizeMode={resizeMode}
+                />
+              );
             }}
           </TextAncestor.Consumer>
         );
@@ -308,15 +325,16 @@ Image.queryCache = queryCache;
  * 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 TextInlineImageNativeComponent>
-  | React.ElementRef<typeof ImageViewNativeComponent>,
-> &
-  ImageComponentStatics);
+module.exports = ((Image: any): ImageAndroid);

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;