@office-iss/react-native-win32 0.81.2 → 0.82.0-preview.2

package/Libraries/Image/Image.android.js

@@ -12,8 +12,10 @@ import type {HostInstance} from '../../src/private/types/HostInstance';
 import type {ImageStyleProp} from '../StyleSheet/StyleSheet';
 import type {RootTag} from '../Types/RootTagTypes';
 import type {ImageProps} from './ImageProps';
+import type {ImageSourceHeaders} from './ImageSourceUtils';
 import type {AbstractImageAndroid, ImageAndroid} from './ImageTypes.flow';
 
+import * as ReactNativeFeatureFlags from '../../src/private/featureflags/ReactNativeFeatureFlags';
 import flattenStyle from '../StyleSheet/flattenStyle';
 import StyleSheet from '../StyleSheet/StyleSheet';
 import TextAncestorContext from '../Text/TextAncestorContext';
@@ -31,6 +33,7 @@ import NativeImageLoaderAndroid, {
 import resolveAssetSource from './resolveAssetSource';
 import TextInlineImageNativeComponent from './TextInlineImageNativeComponent';
 import * as React from 'react';
+import {use} from 'react';
 
 let _requestId = 1;
 function generateRequestId() {
@@ -121,6 +124,12 @@ async function queryCache(
   return NativeImageLoaderAndroid.queryCache(urls);
 }
 
+const EMPTY_IMAGE_SOURCE = {
+  uri: undefined,
+  width: undefined,
+  height: undefined,
+};
+
 /**
  * A React component for displaying different types of images,
  * including network images, static resources, temporary local images, and
@@ -128,137 +137,344 @@ async function queryCache(
  *
  * See https://reactnative.dev/docs/image
  */
-let BaseImage: AbstractImageAndroid = ({
-  ref: forwardedRef,
-  ...props
-}: {
-  ref?: React.RefSetter<HostInstance>,
-  ...ImageProps,
-}) => {
-  let source = getImageSourcesFromImageProps(props) || {
-    uri: undefined,
-    width: undefined,
-    height: undefined,
-  };
-  const defaultSource = resolveAssetSource(props.defaultSource);
-  const loadingIndicatorSource = resolveAssetSource(
-    props.loadingIndicatorSource,
-  );
-
-  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.',
-    );
-  }
+let _BaseImage;
+if (ReactNativeFeatureFlags.reduceDefaultPropsInImage()) {
+  let BaseImage: AbstractImageAndroid = ({
+    ref: forwardedRef,
+    alt,
+    accessible,
+    'aria-labelledby': ariaLabelledBy,
+    'aria-busy': ariaBusy,
+    'aria-checked': ariaChecked,
+    'aria-disabled': ariaDisabled,
+    'aria-expanded': ariaExpanded,
+    'aria-hidden': ariaHidden,
+    'aria-label': ariaLabel,
+    'aria-selected': ariaSelected,
+    accessibilityLabel,
+    accessibilityLabelledBy,
+    accessibilityState,
+    defaultSource,
+    loadingIndicatorSource,
+    children,
+    source,
+    src,
+    style,
+    crossOrigin,
+    referrerPolicy,
+    srcSet,
+    onLoadStart,
+    onLoad,
+    onLoadEnd,
+    onError,
+    width,
+    height,
+    resizeMode,
+    ...restProps
+  }: {
+    ref?: React.RefSetter<HostInstance>,
+    ...ImageProps,
+  }) => {
+    let source_ =
+      getImageSourcesFromImageProps({
+        crossOrigin,
+        referrerPolicy,
+        src,
+        srcSet,
+        width,
+        height,
+        source,
+      }) || EMPTY_IMAGE_SOURCE;
+    const defaultSource_ = resolveAssetSource(defaultSource);
+    const loadingIndicatorSource_ = resolveAssetSource(loadingIndicatorSource);
 
-  if (props.defaultSource != null && props.loadingIndicatorSource != null) {
-    throw new Error(
-      'The <Image> component cannot have defaultSource and loadingIndicatorSource at the same time. Please use either defaultSource or loadingIndicatorSource.',
-    );
-  }
+    if (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.',
+      );
+    }
 
-  let style: ImageStyleProp;
-  let sources;
-  if (Array.isArray(source)) {
-    style = [styles.base, props.style];
-    sources = source;
-  } else {
-    const {uri} = source;
-    if (uri === '') {
-      console.warn('source.uri should not be an empty string');
+    if (defaultSource != null && loadingIndicatorSource != null) {
+      throw new Error(
+        'The <Image> component cannot have defaultSource and loadingIndicatorSource at the same time. Please use either defaultSource or loadingIndicatorSource.',
+      );
     }
-    const width = source.width ?? props.width;
-    const height = source.height ?? props.height;
-    style = [{width, height}, styles.base, props.style];
-    sources = [source];
-  }
 
-  const {onLoadStart, onLoad, onLoadEnd, onError} = props;
-  const nativeProps = {
-    ...props,
-    style,
-    shouldNotifyLoadEvents: !!(onLoadStart || onLoad || onLoadEnd || onError),
+    let style_: ImageStyleProp;
+    let sources_;
+    let headers_: ?ImageSourceHeaders;
+    if (Array.isArray(source_)) {
+      style_ = [styles.base, style];
+      sources_ = source_;
+      headers_ = sources_[0].headers;
+    } else {
+      const {uri} = source_;
+      if (uri === '') {
+        console.warn('source.uri should not be an empty string');
+      }
+      const width_ = source_.width ?? width;
+      const height_ = source_.height ?? height;
+      style_ = [{width: width_, height: height_}, styles.base, style];
+      sources_ = [source_];
+    }
+
+    const nativeProps = restProps as {
+      ...React.PropsOf<ImageViewNativeComponent>,
+    };
+
     // Both iOS and C++ sides expect to have "source" prop, whereas on Android it's "src"
     // (for historical reasons). So in the latter case we populate both "src" and "source",
     // in order to have a better alignment between platforms in the future.
-    src: sources,
-    source: sources,
-    /* $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,
-    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,
-    },
+    // TODO: `src` should be eventually removed from the API on Android.
+    nativeProps.src = sources_;
+    nativeProps.source = sources_;
+
+    nativeProps.style = style_;
+
+    if (headers_ != null) {
+      nativeProps.headers = headers_;
+    }
+
+    if (onLoadStart != null) {
+      nativeProps.shouldNotifyLoadEvents = true;
+      nativeProps.onLoadStart = onLoadStart;
+    }
+
+    if (onLoad != null) {
+      nativeProps.shouldNotifyLoadEvents = true;
+      nativeProps.onLoad = onLoad;
+    }
+
+    if (onLoadEnd != null) {
+      nativeProps.shouldNotifyLoadEvents = true;
+      nativeProps.onLoadEnd = onLoadEnd;
+    }
+
+    if (onError != null) {
+      nativeProps.shouldNotifyLoadEvents = true;
+      nativeProps.onError = onError;
+    }
+
+    if (defaultSource_ != null && defaultSource_.uri != null) {
+      nativeProps.defaultSource = defaultSource_.uri;
+    }
+
+    if (
+      loadingIndicatorSource_ != null &&
+      loadingIndicatorSource_.uri != null
+    ) {
+      nativeProps.loadingIndicatorSrc = loadingIndicatorSource_.uri;
+    }
+
+    if (ariaLabel != null) {
+      nativeProps.accessibilityLabel = ariaLabel;
+    } else if (accessibilityLabel != null) {
+      nativeProps.accessibilityLabel = accessibilityLabel;
+    } else if (alt != null) {
+      nativeProps.accessibilityLabel = alt;
+    }
+
+    if (ariaLabelledBy != null) {
+      nativeProps.accessibilityLabelledBy = ariaLabelledBy;
+    } else if (accessibilityLabelledBy != null) {
+      nativeProps.accessibilityLabelledBy = accessibilityLabelledBy;
+    }
+
+    if (alt != null) {
+      nativeProps.accessible = true;
+    } else if (accessible != null) {
+      nativeProps.accessible = accessible;
+    }
+
+    if (
+      accessibilityState != null ||
+      ariaBusy != null ||
+      ariaChecked != null ||
+      ariaDisabled != null ||
+      ariaExpanded != null ||
+      ariaSelected != null
+    ) {
+      nativeProps.accessibilityState = {
+        busy: ariaBusy ?? accessibilityState?.busy,
+        checked: ariaChecked ?? accessibilityState?.checked,
+        disabled: ariaDisabled ?? accessibilityState?.disabled,
+        expanded: ariaExpanded ?? accessibilityState?.expanded,
+        selected: ariaSelected ?? accessibilityState?.selected,
+      };
+    }
+
+    if (ariaHidden === true) {
+      nativeProps.importantForAccessibility = 'no-hide-descendants';
+    }
+
+    const flattenedStyle_ = flattenStyle<ImageStyleProp>(style);
+    const objectFit_ = convertObjectFitToResizeMode(flattenedStyle_?.objectFit);
+    const resizeMode_ =
+      objectFit_ || resizeMode || flattenedStyle_?.resizeMode || 'cover';
+    nativeProps.resizeMode = resizeMode_;
+
+    const actualRef = useWrapRefWithImageAttachedCallbacks(forwardedRef);
+
+    const hasTextAncestor = use(TextAncestorContext);
+    const analyticTag = use(ImageAnalyticsTagContext);
+    if (analyticTag !== null) {
+      nativeProps.internal_analyticTag = analyticTag;
+    }
+
+    return hasTextAncestor ? (
+      <TextInlineImageNativeComponent
+        // $FlowFixMe[incompatible-type]
+        style={style_}
+        resizeMode={resizeMode_}
+        headers={headers_}
+        src={sources_}
+        ref={actualRef}
+      />
+    ) : (
+      <ImageViewNativeComponent {...nativeProps} ref={actualRef} />
+    );
   };
 
-  const flattenedStyle = flattenStyle<ImageStyleProp>(style);
-  const objectFit = convertObjectFitToResizeMode(flattenedStyle?.objectFit);
-  const resizeMode =
-    objectFit || props.resizeMode || flattenedStyle?.resizeMode || 'cover';
-
-  const actualRef = useWrapRefWithImageAttachedCallbacks(forwardedRef);
-
-  return (
-    <ImageAnalyticsTagContext.Consumer>
-      {analyticTag => {
-        const nativePropsWithAnalytics =
-          analyticTag !== null
-            ? {
-                ...nativeProps,
-                internal_analyticTag: analyticTag,
-              }
-            : nativeProps;
-        return (
-          <TextAncestorContext.Consumer>
-            {hasTextAncestor => {
-              if (hasTextAncestor) {
+  _BaseImage = BaseImage;
+} else {
+  let BaseImage: AbstractImageAndroid = ({
+    ref: forwardedRef,
+    ...props
+  }: {
+    ref?: React.RefSetter<HostInstance>,
+    ...ImageProps,
+  }) => {
+    let source = getImageSourcesFromImageProps(props) || {
+      uri: undefined,
+      width: undefined,
+      height: undefined,
+    };
+    const defaultSource = resolveAssetSource(props.defaultSource);
+    const loadingIndicatorSource = resolveAssetSource(
+      props.loadingIndicatorSource,
+    );
+
+    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.',
+      );
+    }
+
+    if (props.defaultSource != null && props.loadingIndicatorSource != null) {
+      throw new Error(
+        'The <Image> component cannot have defaultSource and loadingIndicatorSource at the same time. Please use either defaultSource or loadingIndicatorSource.',
+      );
+    }
+
+    let style: ImageStyleProp;
+    let sources;
+    if (Array.isArray(source)) {
+      style = [styles.base, props.style];
+      sources = source;
+    } else {
+      const {uri} = source;
+      if (uri === '') {
+        console.warn('source.uri should not be an empty string');
+      }
+      const width = source.width ?? props.width;
+      const height = source.height ?? props.height;
+      style = [{width, height}, styles.base, props.style];
+      sources = [source];
+    }
+
+    const {onLoadStart, onLoad, onLoadEnd, onError} = props;
+    const nativeProps = {
+      ...props,
+      style,
+      shouldNotifyLoadEvents: !!(onLoadStart || onLoad || onLoadEnd || onError),
+      // Both iOS and C++ sides expect to have "source" prop, whereas on Android it's "src"
+      // (for historical reasons). So in the latter case we populate both "src" and "source",
+      // in order to have a better alignment between platforms in the future.
+      src: sources,
+      source: sources,
+      /* $FlowFixMe[prop-missing](>=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,
+      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,
+      },
+      importantForAccessibility:
+        props['aria-hidden'] === true
+          ? ('no-hide-descendants' as const)
+          : props.importantForAccessibility,
+    };
+
+    const flattenedStyle = flattenStyle<ImageStyleProp>(style);
+    const objectFit = convertObjectFitToResizeMode(flattenedStyle?.objectFit);
+    const resizeMode =
+      objectFit || props.resizeMode || flattenedStyle?.resizeMode || 'cover';
+
+    const actualRef = useWrapRefWithImageAttachedCallbacks(forwardedRef);
+
+    return (
+      <ImageAnalyticsTagContext.Consumer>
+        {analyticTag => {
+          const nativePropsWithAnalytics =
+            analyticTag !== null
+              ? {
+                  ...nativeProps,
+                  internal_analyticTag: analyticTag,
+                }
+              : nativeProps;
+          return (
+            <TextAncestorContext.Consumer>
+              {hasTextAncestor => {
+                if (hasTextAncestor) {
+                  return (
+                    <TextInlineImageNativeComponent
+                      // $FlowFixMe[incompatible-type]
+                      style={style}
+                      resizeMode={resizeMode}
+                      headers={nativeProps.headers}
+                      src={sources}
+                      ref={actualRef}
+                    />
+                  );
+                }
+
                 return (
-                  <TextInlineImageNativeComponent
-                    // $FlowFixMe[incompatible-type]
-                    style={style}
+                  <ImageViewNativeComponent
+                    {...nativePropsWithAnalytics}
                     resizeMode={resizeMode}
-                    headers={nativeProps.headers}
-                    src={sources}
                     ref={actualRef}
                   />
                 );
-              }
-
-              return (
-                <ImageViewNativeComponent
-                  {...nativePropsWithAnalytics}
-                  resizeMode={resizeMode}
-                  ref={actualRef}
-                />
-              );
-            }}
-          </TextAncestorContext.Consumer>
-        );
-      }}
-    </ImageAnalyticsTagContext.Consumer>
-  );
-};
+              }}
+            </TextAncestorContext.Consumer>
+          );
+        }}
+      </ImageAnalyticsTagContext.Consumer>
+    );
+  };
+
+  _BaseImage = BaseImage;
+}
 
 const imageComponentDecorator = unstable_getImageComponentDecorator();
 if (imageComponentDecorator != null) {
-  BaseImage = imageComponentDecorator(BaseImage);
+  _BaseImage = imageComponentDecorator(_BaseImage);
 }
 
 // $FlowExpectedError[incompatible-type] Eventually we need to move these functions from statics of the component to exports in the module.
-const Image: ImageAndroid = BaseImage;
+const Image: ImageAndroid = _BaseImage;
 
 Image.displayName = 'Image';
 

package/Libraries/Image/Image.ios.js

@@ -153,6 +153,7 @@ let BaseImage: AbstractImageIOS = ({
     'aria-disabled': ariaDisabled,
     'aria-expanded': ariaExpanded,
     'aria-selected': ariaSelected,
+    'aria-hidden': ariaHidden,
     src,
     ...restProps
   } = props;
@@ -164,6 +165,10 @@ let BaseImage: AbstractImageIOS = ({
     expanded: ariaExpanded ?? props.accessibilityState?.expanded,
     selected: ariaSelected ?? props.accessibilityState?.selected,
   };
+
+  // In order for `aria-hidden` to work on iOS we must set `accessible` to false (`accessibilityElementsHidden` is not enough).
+  const accessible =
+    ariaHidden !== true && (props.alt !== undefined ? true : props.accessible);
   const accessibilityLabel = props['aria-label'] ?? props.accessibilityLabel;
 
   const actualRef = useWrapRefWithImageAttachedCallbacks(forwardedRef);
@@ -175,7 +180,7 @@ let BaseImage: AbstractImageIOS = ({
           <ImageViewNativeComponent
             accessibilityState={_accessibilityState}
             {...restProps}
-            accessible={props.alt !== undefined ? true : props.accessible}
+            accessible={accessible}
             accessibilityLabel={accessibilityLabel ?? props.alt}
             ref={actualRef}
             style={style}

package/Libraries/Image/Image.win32.js

@@ -172,6 +172,7 @@ let BaseImage: AbstractImageIOS = ({
     'aria-multiselectable': ariaMultiselectable, // Win32
     'aria-required': ariaRequired, // Win32
     'aria-selected': ariaSelected,
+    'aria-hidden': ariaHidden,
     src,
     ...restProps
   } = props;
@@ -186,6 +187,10 @@ let BaseImage: AbstractImageIOS = ({
     required: ariaRequired ?? props.accessibilityState?.required, // Win32
     selected: ariaSelected ?? props.accessibilityState?.selected,
   };
+
+  // In order for `aria-hidden` to work on iOS we must set `accessible` to false (`accessibilityElementsHidden` is not enough).
+  const accessible =
+    ariaHidden !== true && (props.alt !== undefined ? true : props.accessible);
   const accessibilityLabel = props['aria-label'] ?? props.accessibilityLabel;
 
   const actualRef = useWrapRefWithImageAttachedCallbacks(forwardedRef);
@@ -207,7 +212,7 @@ let BaseImage: AbstractImageIOS = ({
                 <ImageViewNativeComponent
                   accessibilityState={_accessibilityState}
                   {...restProps}
-                  accessible={props.alt !== undefined ? true : props.accessible}
+                  accessible={accessible}
                   accessibilityLabel={accessibilityLabel ?? props.alt}
                   ref={actualRef}
                   style={style}

package/Libraries/Image/ImageSourceUtils.js

@@ -15,20 +15,26 @@ import type {ImageProps} from './ImageProps';
 
 import resolveAssetSource from './resolveAssetSource';
 
+export type ImageSourceHeaders = {
+  [string]: string,
+};
+
 /**
  * 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, ...}> {
+):
+  | ?ResolvedAssetSource
+  | $ReadOnlyArray<{uri: string, headers: ImageSourceHeaders, ...}> {
   let source = resolveAssetSource(imageProps.source);
 
   let sources;
 
   const {crossOrigin, referrerPolicy, src, srcSet, width, height} = imageProps;
 
-  const headers: {[string]: string} = {};
+  const headers: ImageSourceHeaders = {};
   if (crossOrigin === 'use-credentials') {
     headers['Access-Control-Allow-Credentials'] = 'true';
   }

package/Libraries/Image/assetPaths.js

@@ -33,4 +33,4 @@ function ensureShortPath(str) {
   return assetsPrefix + hash.toString();
 }
 
-export default ensureShortPath;
+module.exports = ensureShortPath;

package/Libraries/Image/resolveAssetSource.js

@@ -111,7 +111,7 @@ function addCustomSourceTransformer(
 function resolveAssetSource(source: ?ImageSource): ?ResolvedAssetSource {
   if (source == null || typeof source === 'object') {
     // $FlowFixMe[incompatible-exact] `source` doesn't exactly match `ResolvedAssetSource`
-    // $FlowFixMe[incompatible-return] `source` doesn't exactly match `ResolvedAssetSource`
+    // $FlowFixMe[incompatible-type] `source` doesn't exactly match `ResolvedAssetSource`
     return source;
   }
 

package/Libraries/Image/resolveAssetSource.win32.js

@@ -8,9 +8,9 @@
 
 'use strict';
 
-import resolveAssetSource from './resolveAssetSource.js'; // Get base impl
-import Platform from '../Utilities/Platform';
-import ensureShortPath from './assetPaths';
+const resolveAssetSource = require('./resolveAssetSource.js'); // Get base impl
+const Platform = require('../Utilities/Platform').default;
+const ensureShortPath = require('./assetPaths.js');
 
 type IPackagerAsset = {
   __packager_asset: boolean,
@@ -123,10 +123,9 @@ class AssetResolverLateScaleResolution {
 
 // We should leave the resource scale out of the URI, and do that lookup on the native side.
 // That way we can handle dynamic dpi changes and multimon scenarios better
-function setCustomSourceTransformer(resolver) {
+resolveAssetSource.setCustomSourceTransformer(resolver => {
   const lsrResolver = new AssetResolverLateScaleResolution(resolver);
   return lsrResolver.defaultAsset();
-}
+});
 
-resolveAssetSource.setCustomSourceTransformer = setCustomSourceTransformer;
-export default resolveAssetSource;
+module.exports = resolveAssetSource;