@office-iss/react-native-win32 0.84.0-preview.2 → 0.85.0-preview.1

package/Libraries/Image/Image.android.js

@@ -18,7 +18,6 @@ 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';
 import ImageAnalyticsTagContext from './ImageAnalyticsTagContext';
 import {
   unstable_getImageComponentDecorator,
@@ -31,7 +30,6 @@ import NativeImageLoaderAndroid, {
   type ImageSize,
 } from './NativeImageLoaderAndroid';
 import resolveAssetSource from './resolveAssetSource';
-import TextInlineImageNativeComponent from './TextInlineImageNativeComponent';
 import * as React from 'react';
 import {use} from 'react';
 
@@ -137,336 +135,204 @@ const EMPTY_IMAGE_SOURCE = {
  *
  * See https://reactnative.dev/docs/image
  */
-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 (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: 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 (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 (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.',
-      );
-    }
+  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.',
+    );
+  }
 
-    let style_: ImageStyleProp;
-    let sources_;
-    let headers_: ?ImageSourceHeaders;
-    if (Array.isArray(source_)) {
-      style_ = [styles.base, style];
-      sources_ = source_;
-      headers_ = sources_[0].headers;
+  let style_: ImageStyleProp;
+  let sources_;
+  let headers_: ?ImageSourceHeaders;
+  if (Array.isArray(source_)) {
+    const {
+      headers: sourceHeaders,
+      width: sourceWidth,
+      height: sourceHeight,
+    } = source_[0];
+    headers_ = sourceHeaders;
+    // Default to the first source's width and height if only one is provided
+    if (ReactNativeFeatureFlags.fixImageSrcDimensionPropagation()) {
+      style_ = [
+        source_.length === 1 && {width: sourceWidth, height: sourceHeight},
+        styles.base,
+        style,
+      ];
     } 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.
-    // 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;
+      style_ = [styles.base, style];
     }
-
-    if (onLoad != null) {
-      nativeProps.shouldNotifyLoadEvents = true;
-      nativeProps.onLoad = onLoad;
+    sources_ = source_;
+  } else {
+    const {uri, width: sourceWidth, height: sourceHeight} = source_;
+    if (uri === '') {
+      console.warn('source.uri should not be an empty string');
     }
+    style_ = [
+      {width: sourceWidth ?? width, height: sourceHeight ?? height},
+      styles.base,
+      style,
+    ];
+    sources_ = [source_];
+  }
 
-    if (onLoadEnd != null) {
-      nativeProps.shouldNotifyLoadEvents = true;
-      nativeProps.onLoadEnd = onLoadEnd;
-    }
+  const nativeProps = restProps as {
+    ...React.PropsOf<ImageViewNativeComponent>,
+  };
 
-    if (onError != null) {
-      nativeProps.shouldNotifyLoadEvents = true;
-      nativeProps.onError = 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.
+  // TODO: `src` should be eventually removed from the API on Android.
+  nativeProps.src = sources_;
+  nativeProps.source = sources_;
 
-    if (defaultSource_ != null && defaultSource_.uri != null) {
-      nativeProps.defaultSource = defaultSource_.uri;
-    }
+  nativeProps.style = style_;
 
-    if (
-      loadingIndicatorSource_ != null &&
-      loadingIndicatorSource_.uri != null
-    ) {
-      nativeProps.loadingIndicatorSrc = loadingIndicatorSource_.uri;
-    }
+  if (headers_ != null) {
+    nativeProps.headers = headers_;
+  }
 
-    if (ariaLabel != null) {
-      nativeProps.accessibilityLabel = ariaLabel;
-    } else if (accessibilityLabel != null) {
-      nativeProps.accessibilityLabel = accessibilityLabel;
-    } else if (alt != null) {
-      nativeProps.accessibilityLabel = alt;
-    }
+  if (onLoadStart != null) {
+    nativeProps.shouldNotifyLoadEvents = true;
+    nativeProps.onLoadStart = onLoadStart;
+  }
 
-    if (ariaLabelledBy != null) {
-      nativeProps.accessibilityLabelledBy = ariaLabelledBy;
-    } else if (accessibilityLabelledBy != null) {
-      nativeProps.accessibilityLabelledBy = accessibilityLabelledBy;
-    }
+  if (onLoad != null) {
+    nativeProps.shouldNotifyLoadEvents = true;
+    nativeProps.onLoad = onLoad;
+  }
 
-    if (alt != null) {
-      nativeProps.accessible = true;
-    } else if (accessible != null) {
-      nativeProps.accessible = accessible;
-    }
+  if (onLoadEnd != null) {
+    nativeProps.shouldNotifyLoadEvents = true;
+    nativeProps.onLoadEnd = onLoadEnd;
+  }
 
-    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 (onError != null) {
+    nativeProps.shouldNotifyLoadEvents = true;
+    nativeProps.onError = onError;
+  }
 
-    if (ariaHidden === true) {
-      nativeProps.importantForAccessibility = 'no-hide-descendants';
-    }
+  if (defaultSource_ != null && defaultSource_.uri != null) {
+    nativeProps.defaultSource = defaultSource_.uri;
+  }
 
-    const flattenedStyle_ = flattenStyle<ImageStyleProp>(style);
-    const objectFit_ = convertObjectFitToResizeMode(flattenedStyle_?.objectFit);
-    const resizeMode_ =
-      objectFit_ || resizeMode || flattenedStyle_?.resizeMode || 'cover';
-    nativeProps.resizeMode = resizeMode_;
+  if (loadingIndicatorSource_ != null && loadingIndicatorSource_.uri != null) {
+    nativeProps.loadingIndicatorSrc = loadingIndicatorSource_.uri;
+  }
 
-    const actualRef = useWrapRefWithImageAttachedCallbacks(forwardedRef);
+  if (ariaLabel != null) {
+    nativeProps.accessibilityLabel = ariaLabel;
+  } else if (accessibilityLabel != null) {
+    nativeProps.accessibilityLabel = accessibilityLabel;
+  } else if (alt != null) {
+    nativeProps.accessibilityLabel = alt;
+  }
 
-    const hasTextAncestor = use(TextAncestorContext);
-    const analyticTag = use(ImageAnalyticsTagContext);
-    if (analyticTag !== null) {
-      nativeProps.internal_analyticTag = analyticTag;
-    }
+  if (ariaLabelledBy != null) {
+    nativeProps.accessibilityLabelledBy = ariaLabelledBy;
+  } else if (accessibilityLabelledBy != null) {
+    nativeProps.accessibilityLabelledBy = accessibilityLabelledBy;
+  }
 
-    return hasTextAncestor ? (
-      <TextInlineImageNativeComponent
-        // $FlowFixMe[incompatible-type]
-        style={style_}
-        resizeMode={resizeMode_}
-        headers={headers_}
-        src={sources_}
-        ref={actualRef}
-      />
-    ) : (
-      <ImageViewNativeComponent {...nativeProps} ref={actualRef} />
-    );
-  };
+  if (alt != null) {
+    nativeProps.accessible = true;
+  } else if (accessible != null) {
+    nativeProps.accessible = accessible;
+  }
 
-  _BaseImage = BaseImage;
-} else {
-  let BaseImage: AbstractImageAndroid = ({
-    ref: forwardedRef,
-    ...props
-  }: {
-    ref?: React.RefSetter<HostInstance>,
-    ...ImageProps,
-  }) => {
-    let source = getImageSourcesFromImageProps(props) || {
-      uri: undefined,
-      width: undefined,
-      height: undefined,
+  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,
     };
-    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 (ariaHidden === true) {
+    nativeProps.importantForAccessibility = 'no-hide-descendants';
+  }
 
-    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.',
-      );
-    }
+  const flattenedStyle_ = flattenStyle<ImageStyleProp>(style);
+  const objectFit_ = convertObjectFitToResizeMode(flattenedStyle_?.objectFit);
+  const resizeMode_ =
+    objectFit_ || resizeMode || flattenedStyle_?.resizeMode || 'cover';
+  nativeProps.resizeMode = resizeMode_;
 
-    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 actualRef = useWrapRefWithImageAttachedCallbacks(forwardedRef);
 
-    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 analyticTag = use(ImageAnalyticsTagContext);
+  if (analyticTag !== null) {
+    nativeProps.internal_analyticTag = analyticTag;
+  }
 
-    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 (
-                  <ImageViewNativeComponent
-                    {...nativePropsWithAnalytics}
-                    resizeMode={resizeMode}
-                    ref={actualRef}
-                  />
-                );
-              }}
-            </TextAncestorContext.Consumer>
-          );
-        }}
-      </ImageAnalyticsTagContext.Consumer>
-    );
-  };
+  return <ImageViewNativeComponent {...nativeProps} ref={actualRef} />;
+};
 
-  _BaseImage = BaseImage;
-}
+let _BaseImage = BaseImage;
 
 const imageComponentDecorator = unstable_getImageComponentDecorator();
 if (imageComponentDecorator != null) {

package/Libraries/Image/ImageProps.js

@@ -38,7 +38,7 @@ type ImageProgressEventDataIOS = {
  * @see ImagePropsIOS.onProgress
  */
 export type ImageProgressEventIOS = NativeSyntheticEvent<
-  $ReadOnly<ImageProgressEventDataIOS>,
+  Readonly<ImageProgressEventDataIOS>,
 >;
 
 type ImageErrorEventData = {
@@ -46,7 +46,7 @@ type ImageErrorEventData = {
 };
 
 export type ImageErrorEvent = NativeSyntheticEvent<
-  $ReadOnly<ImageErrorEventData>,
+  Readonly<ImageErrorEventData>,
 >;
 
 type ImageLoadEventData = {
@@ -57,11 +57,9 @@ type ImageLoadEventData = {
   },
 };
 
-export type ImageLoadEvent = NativeSyntheticEvent<
-  $ReadOnly<ImageLoadEventData>,
->;
+export type ImageLoadEvent = NativeSyntheticEvent<Readonly<ImageLoadEventData>>;
 
-export type ImagePropsIOS = $ReadOnly<{
+export type ImagePropsIOS = Readonly<{
   /**
    * A static image to display while loading the image source.
    *
@@ -82,13 +80,13 @@ export type ImagePropsIOS = $ReadOnly<{
   onProgress?: ?(event: ImageProgressEventIOS) => void,
 }>;
 
-export type ImagePropsAndroid = $ReadOnly<{
+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>),
+  loadingIndicatorSource?: ?(number | Readonly<ImageURISource>),
   progressiveRenderingEnabled?: ?boolean,
   fadeDuration?: ?number,
 
@@ -127,7 +125,7 @@ export type ImagePropsAndroid = $ReadOnly<{
   resizeMultiplier?: ?number,
 }>;
 
-export type ImagePropsBase = $ReadOnly<{
+export type ImagePropsBase = Readonly<{
   ...Omit<ViewProps, 'style'>,
   /**
    * When true, indicates the image is an accessibility element.
@@ -333,7 +331,7 @@ export type ImagePropsBase = $ReadOnly<{
   children?: empty,
 }>;
 
-export type ImageProps = $ReadOnly<{
+export type ImageProps = Readonly<{
   ...ImagePropsIOS,
   ...ImagePropsAndroid,
   ...ImagePropsBase,
@@ -344,7 +342,7 @@ export type ImageProps = $ReadOnly<{
   style?: ?ImageStyleProp,
 }>;
 
-export type ImageBackgroundProps = $ReadOnly<{
+export type ImageBackgroundProps = Readonly<{
   ...ImageProps,
   children?: React.Node,
 

package/Libraries/Image/ImageSource.js

@@ -87,7 +87,7 @@ export type ImageRequireSource = number;
 export type ImageSource =
   | ImageRequireSource
   | ImageURISource
-  | $ReadOnlyArray<ImageURISource>;
+  | ReadonlyArray<ImageURISource>;
 
 type ImageSourceProperties = {
   body?: ?string,
@@ -104,7 +104,7 @@ type ImageSourceProperties = {
 
 export function getImageSourceProperties(
   imageSource: ImageURISource,
-): $ReadOnly<ImageSourceProperties> {
+): Readonly<ImageSourceProperties> {
   const object: ImageSourceProperties = {};
   if (imageSource.body != null) {
     object.body = imageSource.body;

package/Libraries/Image/ImageSourceUtils.js

@@ -23,11 +23,15 @@ export type ImageSourceHeaders = {
  * A function which returns the appropriate value for image source
  * by resolving the `source`, `src` and `srcSet` props.
  */
-export function getImageSourcesFromImageProps(
-  imageProps: ImageProps,
-):
+export function getImageSourcesFromImageProps(imageProps: ImageProps):
   | ?ResolvedAssetSource
-  | $ReadOnlyArray<{uri: string, headers: ImageSourceHeaders, ...}> {
+  | ReadonlyArray<{
+      +uri: string,
+      +headers: ImageSourceHeaders,
+      +width: ?number,
+      +height: ?number,
+      ...
+    }> {
   let source = resolveAssetSource(imageProps.source);
 
   let sources;

package/Libraries/Image/ImageTypes.flow.js

@@ -23,7 +23,7 @@ export type ImageSize = {
 
 export type ImageResolvedAssetSource = ResolvedAssetSource;
 
-type ImageComponentStaticsIOS = $ReadOnly<{
+type ImageComponentStaticsIOS = Readonly<{
   getSize(uri: string): Promise<ImageSize>,
   getSize(
     uri: string,
@@ -60,7 +60,7 @@ type ImageComponentStaticsIOS = $ReadOnly<{
   resolveAssetSource(source: ImageSource): ?ImageResolvedAssetSource,
 }>;
 
-type ImageComponentStaticsAndroid = $ReadOnly<{
+type ImageComponentStaticsAndroid = Readonly<{
   ...ImageComponentStaticsIOS,
   abortPrefetch(requestId: number): void,
 }>;