react-native-windows 0.70.9 → 0.71.0-preview.2

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.windows.js

@@ -8,24 +8,23 @@
  * @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 {ImageStyleProp} from '../StyleSheet/StyleSheet';
+import type {RootTag} from '../Types/RootTagTypes';
+import type {ImageIOS} from './Image.flow';
+import type {ImageProps as ImagePropsType} from './ImageProps';
 
 import TextAncestor from '../Text/TextAncestor'; // [Windows]
 import invariant from 'invariant'; // [Windows]
-
-import type {ImageProps as ImagePropsType} from './ImageProps';
-
-import type {ImageStyleProp} from '../StyleSheet/StyleSheet';
-import NativeImageLoaderIOS from './NativeImageLoaderIOS';
-
+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,
@@ -108,7 +107,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,
@@ -120,7 +119,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];
 
@@ -129,20 +128,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 (
     // [Windows
@@ -159,7 +180,10 @@ const BaseImage = (props: ImagePropsType, forwardedRef) => {
             {analyticTag => {
               return (
                 <ImageViewNativeComponent
-                  {...props}
+                  accessibilityState={_accessibilityState}
+                  accessibilityLabel={accessibilityLabel}
+                  accessible={props.alt !== undefined ? true : props.accessible}
+                  {...restProps}
                   ref={forwardedRef}
                   style={style}
                   resizeMode={resizeMode}
@@ -251,14 +275,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/ImageBackground.js

@@ -10,14 +10,15 @@
 
 'use strict';
 
-import Image from './Image';
-import * as React from 'react';
-import StyleSheet from '../StyleSheet/StyleSheet';
-import flattenStyle from '../StyleSheet/flattenStyle';
-import View from '../Components/View/View';
+import type {ViewProps} from '../Components/View/ViewPropTypes';
 import type {HostComponent} from '../Renderer/shims/ReactNativeTypes';
 import type {ImageBackgroundProps} from './ImageProps';
-import type {ViewProps} from '../Components/View/ViewPropTypes';
+
+import View from '../Components/View/View';
+import flattenStyle from '../StyleSheet/flattenStyle';
+import StyleSheet from '../StyleSheet/StyleSheet';
+import Image from './Image';
+import * as React from 'react';
 
 /**
  * Very simple drop-in replacement for <Image> which supports nesting views.
@@ -66,15 +67,25 @@ class ImageBackground extends React.Component<ImageBackgroundProps> {
   };
 
   render(): React.Node {
-    const {children, style, imageStyle, imageRef, ...props} = this.props;
+    const {
+      children,
+      style,
+      imageStyle,
+      imageRef,
+      importantForAccessibility,
+      ...props
+    } = this.props;
+
     const flattenedStyle = flattenStyle(style);
     return (
       <View
         accessibilityIgnoresInvertColors={true}
+        importantForAccessibility={importantForAccessibility}
         style={style}
         ref={this._captureRef}>
         <Image
           {...props}
+          importantForAccessibility={importantForAccessibility}
           style={[
             StyleSheet.absoluteFill,
             {

package/Libraries/Image/ImageInjection.js

@@ -8,10 +8,11 @@
  * @flow
  */
 
-import * as React from 'react';
 import type {ImageProps as ImagePropsType} from './ImageProps';
+
 import ImageViewNativeComponent from './ImageViewNativeComponent';
 import TextInlineImageNativeComponent from './TextInlineImageNativeComponent';
+import * as React from 'react';
 
 export default {
   unstable_createImageComponent: (null: ?(

package/Libraries/Image/ImageProps.js

@@ -10,13 +10,17 @@
 
 'use strict';
 
-import type {SyntheticEvent, LayoutEvent} from '../Types/CoreEventTypes';
+import type {ViewProps} from '../Components/View/ViewPropTypes';
 import type {EdgeInsetsProp} from '../StyleSheet/EdgeInsetsPropType';
+import type {
+  ColorValue,
+  ImageStyleProp,
+  ViewStyleProp,
+} from '../StyleSheet/StyleSheet';
+import type {LayoutEvent, SyntheticEvent} from '../Types/CoreEventTypes';
+import typeof Image from './Image';
 import type {ImageSource} from './ImageSource';
-import type {ViewStyleProp, ImageStyleProp} from '../StyleSheet/StyleSheet';
-import type {ViewProps} from '../Components/View/ViewPropTypes';
 import type {Node, Ref} from 'react';
-import typeof Image from './Image';
 
 export type ImageLoadEvent = SyntheticEvent<
   $ReadOnly<{|
@@ -82,6 +86,26 @@ export type ImageProps = {|
    */
   accessibilityLabel?: ?Stringish,
 
+  /**
+   * Alias for accessibilityLabel
+   * See https://reactnative.dev/docs/image#accessibilitylabel
+   */
+  'aria-label'?: ?Stringish,
+
+  /**
+   * Reperesents the nativeID of the associated label. When the assistive technology focuses on the component with this props.
+   *
+   * @platform android
+   */
+  'aria-labelledby'?: ?string,
+  /**
+   * The text that's read by the screen reader when the user interacts with
+   * the image.
+   *
+   * See https://reactnative.dev/docs/image#alt
+   */
+  alt?: ?Stringish,
+
   /**
    * blurRadius: the blur radius of the blur filter added to the image
    *
@@ -94,6 +118,28 @@ export type ImageProps = {|
    */
   capInsets?: ?EdgeInsetsProp,
 
+  /**
+   * Adds the CORS related header to the request.
+   * Similar to crossorigin from HTML.
+   *
+   * See https://reactnative.dev/docs/image#crossorigin
+   */
+  crossOrigin?: ?('anonymous' | 'use-credentials'),
+
+  /**
+   * Height of the image component.
+   *
+   * See https://reactnative.dev/docs/image#height
+   */
+  height?: number,
+
+  /**
+   * Width of the image component.
+   *
+   * See https://reactnative.dev/docs/image#width
+   */
+  width?: number,
+
   /**
    * Invoked on load error with `{nativeEvent: {error}}`.
    *
@@ -154,6 +200,23 @@ export type ImageProps = {|
    */
   style?: ?ImageStyleProp,
 
+  /**
+   * A string indicating which referrer to use when fetching the resource.
+   * Similar to referrerpolicy from HTML.
+   *
+   * See https://reactnative.dev/docs/image#referrerpolicy
+   */
+  referrerPolicy?: ?(
+    | 'no-referrer'
+    | 'no-referrer-when-downgrade'
+    | 'origin'
+    | 'origin-when-cross-origin'
+    | 'same-origin'
+    | 'strict-origin'
+    | 'strict-origin-when-cross-origin'
+    | 'unsafe-url'
+  ),
+
   /**
    * Determines how to resize the image when the frame doesn't match the raw
    * image dimensions.
@@ -170,7 +233,27 @@ export type ImageProps = {|
    */
   testID?: ?string,
 
-  src?: empty,
+  /**
+   * Changes the color of all the non-transparent pixels to the tintColor.
+   *
+   * See https://reactnative.dev/docs/image#tintcolor
+   */
+  tintColor?: ColorValue,
+
+  /**
+   * A string representing the resource identifier for the image. Similar to
+   * src from HTML.
+   *
+   * See https://reactnative.dev/docs/image#src
+   */
+  src?: ?string,
+
+  /**
+   * Similar to srcset from HTML.
+   *
+   * See https://reactnative.dev/docs/image#srcset
+   */
+  srcSet?: ?string,
   children?: empty,
 |};
 

package/Libraries/Image/ImageResizeMode.d.ts

@@ -0,0 +1,49 @@
+/**
+ * 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
+ */
+
+export type ImageResizeMode =
+  | 'cover'
+  | 'contain'
+  | 'stretch'
+  | 'repeat'
+  | 'center';
+
+/**
+ * @see ImageResizeMode.js
+ */
+export interface ImageResizeModeStatic {
+  /**
+   * contain - The image will be resized such that it will be completely
+   * visible, contained within the frame of the View.
+   */
+  contain: ImageResizeMode;
+  /**
+   * cover - The image will be resized such that the entire area of the view
+   * is covered by the image, potentially clipping parts of the image.
+   */
+  cover: ImageResizeMode;
+  /**
+   * stretch - The image will be stretched to fill the entire frame of the
+   * view without clipping.  This may change the aspect ratio of the image,
+   * distoring it.  Only supported on iOS.
+   */
+  stretch: ImageResizeMode;
+  /**
+   * center - The image will be scaled down such that it is completely visible,
+   * if bigger than the area of the view.
+   * The image will not be scaled up.
+   */
+  center: ImageResizeMode;
+
+  /**
+   * repeat - The image will be repeated to cover the frame of the View. The
+   * image will keep it's size and aspect ratio.
+   */
+  repeat: ImageResizeMode;
+}

package/Libraries/Image/ImageSource.d.ts

@@ -0,0 +1,76 @@
+/**
+ * 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
+ */
+
+/*
+ * @see https://github.com/facebook/react-native/blob/master/Libraries/Image/ImageSource.js
+ */
+export interface ImageURISource {
+  /**
+   * `uri` is a string representing the resource identifier for the image, which
+   * could be an http address, a local file path, or the name of a static image
+   * resource (which should be wrapped in the `require('./path/to/image.png')`
+   * function).
+   */
+  uri?: string | undefined;
+  /**
+   * `bundle` is the iOS asset bundle which the image is included in. This
+   * will default to [NSBundle mainBundle] if not set.
+   * @platform ios
+   */
+  bundle?: string | undefined;
+  /**
+   * `method` is the HTTP Method to use. Defaults to GET if not specified.
+   */
+  method?: string | undefined;
+  /**
+   * `headers` is an object representing the HTTP headers to send along with the
+   * request for a remote image.
+   */
+  headers?: {[key: string]: string} | undefined;
+  /**
+   * `cache` determines how the requests handles potentially cached
+   * responses.
+   *
+   * - `default`: Use the native platforms default strategy. `useProtocolCachePolicy` on iOS.
+   *
+   * - `reload`: The data for the URL will be loaded from the originating source.
+   * No existing cache data should be used to satisfy a URL load request.
+   *
+   * - `force-cache`: The existing cached data will be used to satisfy the request,
+   * regardless of its age or expiration date. If there is no existing data in the cache
+   * corresponding the request, the data is loaded from the originating source.
+   *
+   * - `only-if-cached`: The existing cache data will be used to satisfy a request, regardless of
+   * its age or expiration date. If there is no existing data in the cache corresponding
+   * to a URL load request, no attempt is made to load the data from the originating source,
+   * and the load is considered to have failed.
+   *
+   * @platform ios
+   */
+  cache?: 'default' | 'reload' | 'force-cache' | 'only-if-cached' | undefined;
+  /**
+   * `body` is the HTTP body to send with the request. This must be a valid
+   * UTF-8 string, and will be sent exactly as specified, with no
+   * additional encoding (e.g. URL-escaping or base64) applied.
+   */
+  body?: string | undefined;
+  /**
+   * `width` and `height` can be specified if known at build time, in which case
+   * these will be used to set the default `<Image/>` component dimensions.
+   */
+  width?: number | undefined;
+  height?: number | undefined;
+  /**
+   * `scale` is used to indicate the scale factor of the image. Defaults to 1.0 if
+   * unspecified, meaning that one image pixel equates to one display point / DIP.
+   */
+  scale?: number | undefined;
+}
+
+export type ImageRequireSource = number;

package/Libraries/Image/ImageSourceUtils.js

@@ -0,0 +1,80 @@
+/**
+ * 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
+ */
+
+'use strict';
+
+import type {ResolvedAssetSource} from './AssetSourceResolver';
+import type {ImageProps} from './ImageProps';
+
+import resolveAssetSource from './resolveAssetSource';
+
+/**
+ * A function which returns the appropriate value for image source
+ * by resolving the `source`, `src` and `srcSet` props.
+ */
+export function getImageSourcesFromImageProps(
+  imageProps: ImageProps,
+): ?ResolvedAssetSource | $ReadOnlyArray<{uri: string, ...}> {
+  let source = resolveAssetSource(imageProps.source);
+
+  let sources;
+
+  const {crossOrigin, referrerPolicy, src, srcSet, width, height} = imageProps;
+
+  const headers: {[string]: string} = {};
+  if (crossOrigin === 'use-credentials') {
+    headers['Access-Control-Allow-Credentials'] = 'true';
+  }
+  if (referrerPolicy != null) {
+    headers['Referrer-Policy'] = referrerPolicy;
+  }
+  if (srcSet != null) {
+    const sourceList = [];
+    const srcSetList = srcSet.split(', ');
+    // `src` prop should be used with default scale if `srcSet` does not have 1x scale.
+    let shouldUseSrcForDefaultScale = true;
+    srcSetList.forEach(imageSrc => {
+      const [uri, xScale = '1x'] = imageSrc.split(' ');
+      if (!xScale.endsWith('x')) {
+        console.warn(
+          'The provided format for scale is not supported yet. Please use scales like 1x, 2x, etc.',
+        );
+      } else {
+        const scale = parseInt(xScale.split('x')[0], 10);
+        if (!isNaN(scale)) {
+          // 1x scale is provided in `srcSet` prop so ignore the `src` prop if provided.
+          shouldUseSrcForDefaultScale =
+            scale === 1 ? false : shouldUseSrcForDefaultScale;
+          sourceList.push({headers: headers, scale, uri, width, height});
+        }
+      }
+    });
+
+    if (shouldUseSrcForDefaultScale && src != null) {
+      sourceList.push({
+        headers: headers,
+        scale: 1,
+        uri: src,
+        width,
+        height,
+      });
+    }
+    if (sourceList.length === 0) {
+      console.warn('The provided value for srcSet is not valid.');
+    }
+
+    sources = sourceList;
+  } else if (src != null) {
+    sources = [{uri: src, headers: headers, width, height}];
+  } else {
+    sources = source;
+  }
+  return sources;
+}