@office-iss/react-native-win32 0.73.1 → 0.74.0-preview.1

package/Libraries/Image/Image.android.js

@@ -4,19 +4,22 @@
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
  *
- * @flow
+ * @flow strict-local
  * @format
  */
 
+import type {ImageStyleProp} from '../StyleSheet/StyleSheet';
 import type {RootTag} from '../Types/RootTagTypes';
-import type {ImageAndroid} from './Image.flow';
-import type {ImageProps as ImagePropsType} from './ImageProps';
+import type {AbstractImageAndroid, ImageAndroid} from './ImageTypes.flow';
 
 import flattenStyle from '../StyleSheet/flattenStyle';
 import StyleSheet from '../StyleSheet/StyleSheet';
 import TextAncestor from '../Text/TextAncestor';
 import ImageAnalyticsTagContext from './ImageAnalyticsTagContext';
-import ImageInjection from './ImageInjection';
+import {
+  unstable_getImageComponentDecorator,
+  useWrapRefWithImageAttachedCallbacks,
+} from './ImageInjection';
 import {getImageSourcesFromImageProps} from './ImageSourceUtils';
 import {convertObjectFitToResizeMode} from './ImageUtils';
 import ImageViewNativeComponent from './ImageViewNativeComponent';
@@ -38,9 +41,9 @@ function generateRequestId() {
 function getSize(
   url: string,
   success: (width: number, height: number) => void,
-  failure?: (error: any) => void,
-): any {
-  return NativeImageLoaderAndroid.getSize(url)
+  failure?: (error: mixed) => void,
+): void {
+  NativeImageLoaderAndroid.getSize(url)
     .then(function (sizes) {
       success(sizes.width, sizes.height);
     })
@@ -62,9 +65,9 @@ function getSizeWithHeaders(
   url: string,
   headers: {[string]: string, ...},
   success: (width: number, height: number) => void,
-  failure?: (error: any) => void,
-): any {
-  return NativeImageLoaderAndroid.getSizeWithHeaders(url, headers)
+  failure?: (error: mixed) => void,
+): void {
+  NativeImageLoaderAndroid.getSizeWithHeaders(url, headers)
     .then(function (sizes) {
       success(sizes.width, sizes.height);
     })
@@ -80,19 +83,22 @@ function prefetchWithMetadata(
   url: string,
   queryRootName: string,
   rootTag?: ?RootTag,
-  callback: ?Function,
-): any {
+  callback: ?(requestId: number) => void,
+): Promise<boolean> {
   // TODO: T79192300 Log queryRootName and rootTag
-  prefetch(url, callback);
+  return prefetch(url, callback);
 }
 
-function prefetch(url: string, callback: ?Function): any {
+function prefetch(
+  url: string,
+  callback: ?(requestId: number) => void,
+): Promise<boolean> {
   const requestId = generateRequestId();
   callback && callback(requestId);
   return NativeImageLoaderAndroid.prefetchImage(url, requestId);
 }
 
-function abortPrefetch(requestId: number) {
+function abortPrefetch(requestId: number): void {
   NativeImageLoaderAndroid.abortRequest(requestId);
 }
 
@@ -104,19 +110,9 @@ function abortPrefetch(requestId: number) {
 async function queryCache(
   urls: Array<string>,
 ): Promise<{[string]: 'memory' | 'disk' | 'disk/memory', ...}> {
-  return await NativeImageLoaderAndroid.queryCache(urls);
+  return NativeImageLoaderAndroid.queryCache(urls);
 }
 
-export type ImageComponentStatics = $ReadOnly<{|
-  getSize: typeof getSize,
-  getSizeWithHeaders: typeof getSizeWithHeaders,
-  prefetch: typeof prefetch,
-  prefetchWithMetadata: typeof prefetchWithMetadata,
-  abortPrefetch?: typeof abortPrefetch,
-  queryCache: typeof queryCache,
-  resolveAssetSource: typeof resolveAssetSource,
-|}>;
-
 /**
  * A React component for displaying different types of images,
  * including network images, static resources, temporary local images, and
@@ -124,141 +120,137 @@ export type ImageComponentStatics = $ReadOnly<{|
  *
  * See https://reactnative.dev/docs/image
  */
-/* $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 = getImageSourcesFromImageProps(props) || {
-    uri: undefined,
-    width: undefined,
-    height: undefined,
-  };
-  const defaultSource = resolveAssetSource(props.defaultSource);
-  const loadingIndicatorSource = resolveAssetSource(
-    props.loadingIndicatorSource,
-  );
-
-  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.',
-    );
-  }
-
-  if (props.defaultSource && props.loadingIndicatorSource) {
-    throw new Error(
-      'The <Image> component cannot have defaultSource and loadingIndicatorSource at the same time. Please use either defaultSource or loadingIndicatorSource.',
+let BaseImage: AbstractImageAndroid = React.forwardRef(
+  (props, forwardedRef) => {
+    let source = getImageSourcesFromImageProps(props) || {
+      uri: undefined,
+      width: undefined,
+      height: undefined,
+    };
+    const defaultSource = resolveAssetSource(props.defaultSource);
+    const loadingIndicatorSource = resolveAssetSource(
+      props.loadingIndicatorSource,
     );
-  }
 
-  let style;
-  let sources;
-  if (Array.isArray(source)) {
-    // $FlowFixMe[underconstrained-implicit-instantiation]
-    style = flattenStyle([styles.base, props.style]);
-    sources = source;
-  } else {
-    // $FlowFixMe[incompatible-type]
-    const {width = props.width, height = props.height, uri} = source;
-    // $FlowFixMe[underconstrained-implicit-instantiation]
-    style = flattenStyle([{width, height}, styles.base, props.style]);
-    sources = [source];
-    if (uri === '') {
-      console.warn('source.uri should not be an empty string');
+    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.',
+      );
     }
-  }
 
-  const {height, width, ...restProps} = props;
+    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 {onLoadStart, onLoad, onLoadEnd, onError} = props;
-  const nativeProps = {
-    ...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?.[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,
-    },
-  };
+    let style;
+    let sources;
+    if (Array.isArray(source)) {
+      style = flattenStyle<ImageStyleProp>([styles.base, props.style]);
+      sources = source;
+    } else {
+      const {uri} = source;
+      const width = source.width ?? props.width;
+      const height = source.height ?? props.height;
+      style = flattenStyle<ImageStyleProp>([
+        {width, height},
+        styles.base,
+        props.style,
+      ]);
+      sources = [source];
+      if (uri === '') {
+        console.warn('source.uri should not be an empty string');
+      }
+    }
 
-  const objectFit =
-    // $FlowFixMe[prop-missing]
-    style && style.objectFit
-      ? // $FlowFixMe[incompatible-call]
-        convertObjectFitToResizeMode(style.objectFit)
+    const {height, width, ...restProps} = props;
+
+    const {onLoadStart, onLoad, onLoadEnd, onError} = props;
+    const nativeProps = {
+      ...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?.[0]?.headers || source?.headers: ?{[string]: string}),
+      defaultSrc: 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,
+      },
+    };
+
+    const objectFit = style?.objectFit
+      ? convertObjectFitToResizeMode(style.objectFit)
       : null;
-  // $FlowFixMe[prop-missing]
-  const resizeMode =
-    // $FlowFixMe[prop-missing]
-    objectFit || props.resizeMode || (style && style.resizeMode) || 'cover';
+    const resizeMode =
+      objectFit || props.resizeMode || style?.resizeMode || 'cover';
+
+    const actualRef = useWrapRefWithImageAttachedCallbacks(forwardedRef);
+
+    return (
+      <ImageAnalyticsTagContext.Consumer>
+        {analyticTag => {
+          const nativePropsWithAnalytics =
+            analyticTag !== null
+              ? {
+                  ...nativeProps,
+                  internal_analyticTag: analyticTag,
+                }
+              : nativeProps;
+          return (
+            <TextAncestor.Consumer>
+              {hasTextAncestor => {
+                if (hasTextAncestor) {
+                  return (
+                    <TextInlineImageNativeComponent
+                      // $FlowFixMe[incompatible-type]
+                      style={style}
+                      resizeMode={resizeMode}
+                      headers={nativeProps.headers}
+                      src={sources}
+                      ref={actualRef}
+                    />
+                  );
+                }
 
-  return (
-    <ImageAnalyticsTagContext.Consumer>
-      {analyticTag => {
-        const nativePropsWithAnalytics =
-          analyticTag !== null
-            ? {
-                ...nativeProps,
-                internal_analyticTag: analyticTag,
-              }
-            : nativeProps;
-        return (
-          <TextAncestor.Consumer>
-            {hasTextAncestor => {
-              if (hasTextAncestor) {
                 return (
-                  <TextInlineImageNativeComponent
-                    // $FlowFixMe[incompatible-type]
-                    style={style}
-                    // $FlowFixMe[incompatible-type]
+                  <ImageViewNativeComponent
+                    {...nativePropsWithAnalytics}
                     resizeMode={resizeMode}
-                    headers={nativeProps.headers}
-                    src={sources}
-                    ref={forwardedRef}
+                    ref={actualRef}
                   />
                 );
-              }
-
-              return (
-                <ImageViewNativeComponent
-                  {...nativePropsWithAnalytics}
-                  // $FlowFixMe[incompatible-type]
-                  resizeMode={resizeMode}
-                />
-              );
-            }}
-          </TextAncestor.Consumer>
-        );
-      }}
-    </ImageAnalyticsTagContext.Consumer>
-  );
-};
-
-let Image = React.forwardRef<
-  ImagePropsType,
-  | React.ElementRef<typeof TextInlineImageNativeComponent>
-  | React.ElementRef<typeof ImageViewNativeComponent>,
->(BaseImage);
+              }}
+            </TextAncestor.Consumer>
+          );
+        }}
+      </ImageAnalyticsTagContext.Consumer>
+    );
+  },
+);
 
-if (ImageInjection.unstable_createImageComponent != null) {
-  Image = ImageInjection.unstable_createImageComponent(Image);
+const imageComponentDecorator = unstable_getImageComponentDecorator();
+if (imageComponentDecorator != null) {
+  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;
+
 Image.displayName = 'Image';
 
 /**
@@ -266,9 +258,7 @@ Image.displayName = 'Image';
  *
  * See https://reactnative.dev/docs/image#getsize
  */
-/* $FlowFixMe(>=0.89.0 site=react_native_android_fb) This comment suppresses an
- * error found when Flow v0.89 was deployed. To see the error, delete this
- * comment and run Flow. */
+// $FlowFixMe[incompatible-use] This property isn't writable but we're actually defining it here for the first time.
 Image.getSize = getSize;
 
 /**
@@ -277,9 +267,7 @@ Image.getSize = getSize;
  *
  * See https://reactnative.dev/docs/image#getsizewithheaders
  */
-/* $FlowFixMe(>=0.89.0 site=react_native_android_fb) This comment suppresses an
- * error found when Flow v0.89 was deployed. To see the error, delete this
- * comment and run Flow. */
+// $FlowFixMe[incompatible-use] This property isn't writable but we're actually defining it here for the first time.
 Image.getSizeWithHeaders = getSizeWithHeaders;
 
 /**
@@ -288,9 +276,7 @@ Image.getSizeWithHeaders = getSizeWithHeaders;
  *
  * See https://reactnative.dev/docs/image#prefetch
  */
-/* $FlowFixMe(>=0.89.0 site=react_native_android_fb) This comment suppresses an
- * error found when Flow v0.89 was deployed. To see the error, delete this
- * comment and run Flow. */
+// $FlowFixMe[incompatible-use] This property isn't writable but we're actually defining it here for the first time.
 Image.prefetch = prefetch;
 
 /**
@@ -299,9 +285,7 @@ Image.prefetch = prefetch;
  *
  * See https://reactnative.dev/docs/image#prefetch
  */
-/* $FlowFixMe(>=0.89.0 site=react_native_android_fb) This comment suppresses an
- * error found when Flow v0.89 was deployed. To see the error, delete this
- * comment and run Flow. */
+// $FlowFixMe[incompatible-use] This property isn't writable but we're actually defining it here for the first time.
 Image.prefetchWithMetadata = prefetchWithMetadata;
 
 /**
@@ -309,9 +293,7 @@ Image.prefetchWithMetadata = prefetchWithMetadata;
  *
  * See https://reactnative.dev/docs/image#abortprefetch
  */
-/* $FlowFixMe(>=0.89.0 site=react_native_android_fb) This comment suppresses an
- * error found when Flow v0.89 was deployed. To see the error, delete this
- * comment and run Flow. */
+// $FlowFixMe[incompatible-use] This property isn't writable but we're actually defining it here for the first time.
 Image.abortPrefetch = abortPrefetch;
 
 /**
@@ -319,9 +301,7 @@ Image.abortPrefetch = abortPrefetch;
  *
  * See https://reactnative.dev/docs/image#querycache
  */
-/* $FlowFixMe(>=0.89.0 site=react_native_android_fb) This comment suppresses an
- * error found when Flow v0.89 was deployed. To see the error, delete this
- * comment and run Flow. */
+// $FlowFixMe[incompatible-use] This property isn't writable but we're actually defining it here for the first time.
 Image.queryCache = queryCache;
 
 /**
@@ -329,21 +309,13 @@ Image.queryCache = queryCache;
  *
  * See https://reactnative.dev/docs/image#resolveassetsource
  */
-/* $FlowFixMe(>=0.89.0 site=react_native_android_fb) This comment suppresses an
- * error found when Flow v0.89 was deployed. To see the error, delete this
- * comment and run Flow. */
+// $FlowFixMe[incompatible-use] This property isn't writable but we're actually defining it here for the first time.
 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): ImageAndroid);
+module.exports = Image;

package/Libraries/Image/Image.d.ts

@@ -260,7 +260,7 @@ export interface ImagePropsBase
   /**
    * A static image to display while downloading the final image off the network.
    */
-  defaultSource?: ImageURISource | number | undefined;
+  defaultSource?: ImageURISource | ImageRequireSource | undefined;
 
   /**
    * The text that's read by the screen reader when the user interacts with