@react-native-oh/react-native-harmony 0.77.18 → 0.77.22

package/Libraries/Image/Image.android.js

@@ -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.
+ *
+ * @flow strict-local
+ * @format
+ */
+
+import type {ImageStyleProp} from '../StyleSheet/StyleSheet';
+import type {RootTag} from '../Types/RootTagTypes';
+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 {
+  unstable_getImageComponentDecorator,
+  useWrapRefWithImageAttachedCallbacks,
+} from './ImageInjection';
+import {getImageSourcesFromImageProps} from './ImageSourceUtils';
+import {convertObjectFitToResizeMode} from './ImageUtils';
+import ImageViewNativeComponent from './ImageViewNativeComponent';
+import NativeImageLoaderAndroid, {
+  type ImageSize,
+} from './NativeImageLoaderAndroid';
+import resolveAssetSource from './resolveAssetSource';
+import TextInlineImageNativeComponent from './TextInlineImageNativeComponent';
+import * as React from 'react';
+
+let _requestId = 1;
+function generateRequestId() {
+  return _requestId++;
+}
+
+/**
+ * Retrieve the width and height (in pixels) of an image prior to displaying it
+ *
+ * See https://reactnative.dev/docs/image#getsize
+ */
+function getSize(
+  url: string,
+  success?: (width: number, height: number) => void,
+  failure?: (error: mixed) => void,
+): void | Promise<ImageSize> {
+  const promise = NativeImageLoaderAndroid.getSize(url);
+  if (typeof success !== 'function') {
+    return promise;
+  }
+  promise
+    .then(sizes => success(sizes.width, sizes.height))
+    .catch(
+      failure ||
+        function () {
+          console.warn('Failed to get size for image: ' + url);
+        },
+    );
+}
+
+/**
+ * Retrieve the width and height (in pixels) of an image prior to displaying it
+ * with the ability to provide the headers for the request
+ *
+ * See https://reactnative.dev/docs/image#getsizewithheaders
+ */
+function getSizeWithHeaders(
+  url: string,
+  headers: {[string]: string, ...},
+  success?: (width: number, height: number) => void,
+  failure?: (error: mixed) => void,
+): void | Promise<ImageSize> {
+  const promise = NativeImageLoaderAndroid.getSizeWithHeaders(url, headers);
+  if (typeof success !== 'function') {
+    return promise;
+  }
+  promise
+    .then(sizes => success(sizes.width, sizes.height))
+    .catch(
+      failure ||
+        function () {
+          console.warn('Failed to get size for image: ' + url);
+        },
+    );
+}
+
+function prefetchWithMetadata(
+  url: string,
+  queryRootName: string,
+  rootTag?: ?RootTag,
+  callback: ?(requestId: number) => void,
+): Promise<boolean> {
+  // TODO: T79192300 Log queryRootName and rootTag
+  return prefetch(url, callback);
+}
+
+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): void {
+  NativeImageLoaderAndroid.abortRequest(requestId);
+}
+
+/**
+ * Perform cache interrogation.
+ *
+ * See https://reactnative.dev/docs/image#querycache
+ */
+async function queryCache(
+  urls: Array<string>,
+): Promise<{[string]: 'memory' | 'disk' | 'disk/memory', ...}> {
+  return NativeImageLoaderAndroid.queryCache(urls);
+}
+
+/**
+ * A React component for displaying different types of images,
+ * including network images, static resources, temporary local images, and
+ * images from local disk, such as the camera roll.
+ *
+ * See https://reactnative.dev/docs/image
+ */
+let BaseImage: AbstractImageAndroid = React.forwardRef(
+  (props, forwardedRef) => {
+    let source = getImageSourcesFromImageProps(props) || {
+      uri: undefined,
+      width: undefined,
+      height: undefined,
+    };
+    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 != 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(>=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}),
+      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 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 (
+            <TextAncestor.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}
+                  />
+                );
+              }}
+            </TextAncestor.Consumer>
+          );
+        }}
+      </ImageAnalyticsTagContext.Consumer>
+    );
+  },
+);
+
+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';
+
+/**
+ * Retrieve the width and height (in pixels) of an image prior to displaying it
+ *
+ * See https://reactnative.dev/docs/image#getsize
+ */
+// $FlowFixMe[incompatible-use] This property isn't writable but we're actually defining it here for the first time.
+Image.getSize = getSize;
+
+/**
+ * Retrieve the width and height (in pixels) of an image prior to displaying it
+ * with the ability to provide the headers for the request
+ *
+ * See https://reactnative.dev/docs/image#getsizewithheaders
+ */
+// $FlowFixMe[incompatible-use] This property isn't writable but we're actually defining it here for the first time.
+Image.getSizeWithHeaders = getSizeWithHeaders;
+
+/**
+ * Prefetches a remote image for later use by downloading it to the disk
+ * cache
+ *
+ * See https://reactnative.dev/docs/image#prefetch
+ */
+// $FlowFixMe[incompatible-use] This property isn't writable but we're actually defining it here for the first time.
+Image.prefetch = prefetch;
+
+/**
+ * Prefetches a remote image for later use by downloading it to the disk
+ * cache, and adds metadata for queryRootName and rootTag.
+ *
+ * See https://reactnative.dev/docs/image#prefetch
+ */
+// $FlowFixMe[incompatible-use] This property isn't writable but we're actually defining it here for the first time.
+Image.prefetchWithMetadata = prefetchWithMetadata;
+
+/**
+ * Abort prefetch request.
+ *
+ * See https://reactnative.dev/docs/image#abortprefetch
+ */
+// $FlowFixMe[incompatible-use] This property isn't writable but we're actually defining it here for the first time.
+Image.abortPrefetch = abortPrefetch;
+
+/**
+ * Perform cache interrogation.
+ *
+ * See https://reactnative.dev/docs/image#querycache
+ */
+// $FlowFixMe[incompatible-use] This property isn't writable but we're actually defining it here for the first time.
+Image.queryCache = queryCache;
+
+/**
+ * Resolves an asset reference into an object.
+ *
+ * See https://reactnative.dev/docs/image#resolveassetsource
+ */
+// $FlowFixMe[incompatible-use] This property isn't writable but we're actually defining it here for the first time.
+Image.resolveAssetSource = resolveAssetSource;
+
+const styles = StyleSheet.create({
+  base: {
+    overflow: 'hidden',
+  },
+});
+
+module.exports = Image;

package/Libraries/Image/Image.d.ts

@@ -0,0 +1,373 @@
+/**
+ * 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 {ColorValue, 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.
+   *
+   * - `none`: No sampling is performed and the image is displayed in its full resolution. This
+   * should only be used in rare circumstances because it is considered unsafe as Android will
+   * throw a runtime exception when trying to render images that consume too much memory.
+   *
+   * More details about `resize` and `scale` can be found at http://frescolib.org/docs/resizing-rotating.html.
+   *
+   * @platform android
+   */
+  resizeMethod?: 'auto' | 'resize' | 'scale' | 'none' | 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.
+   *
+   * 'none': Do not resize the image. The image will be displayed at its intrinsic size.
+   */
+  resizeMode?: ImageResizeMode | 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 | undefined;
+
+  /**
+   * A string representing the resource identifier for the image. Similar to
+   * src from HTML.
+   *
+   * See https://reactnative.dev/docs/image#src
+   */
+  src?: string | undefined;
+
+  /**
+   * Similar to srcset from HTML.
+   *
+   * See https://reactnative.dev/docs/image#srcset
+   */
+  srcSet?: string | undefined;
+
+  /**
+   * 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 | ImageRequireSource | 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;
+
+  /**
+   * Height of the image component.
+   *
+   * See https://reactnative.dev/docs/image#height
+   */
+  height?: number | undefined;
+
+  /**
+   * Width of the image component.
+   *
+   * See https://reactnative.dev/docs/image#width
+   */
+  width?: number | undefined;
+
+  /**
+   * Adds the CORS related header to the request.
+   * Similar to crossorigin from HTML.
+   *
+   * See https://reactnative.dev/docs/image#crossorigin
+   */
+  crossOrigin?: 'anonymous' | 'use-credentials' | undefined;
+
+  /**
+   * Changes the color of all the non-transparent pixels to the tintColor.
+   *
+   * See https://reactnative.dev/docs/image#tintcolor
+   */
+  tintColor?: ColorValue | undefined;
+
+  /**
+   * 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'
+    | undefined;
+}
+
+export interface ImageProps extends ImagePropsBase {
+  /**
+   *
+   * Style
+   */
+  style?: StyleProp<ImageStyle> | undefined;
+}
+
+export interface ImageSize {
+  width: number;
+  height: number;
+}
+
+declare class ImageComponent extends React.Component<ImageProps> {}
+declare const ImageBase: Constructor<NativeMethods> & typeof ImageComponent;
+export class Image extends ImageBase {
+  static getSize(uri: string): Promise<ImageSize>;
+  static getSize(
+    uri: string,
+    success: (width: number, height: number) => void,
+    failure?: (error: any) => void,
+  ): void;
+
+  static getSizeWithHeaders(
+    uri: string,
+    headers: {[index: string]: string},
+  ): Promise<ImageSize>;
+  static getSizeWithHeaders(
+    uri: string,
+    headers: {[index: string]: string},
+    success: (width: number, height: number) => void,
+    failure?: (error: any) => void,
+  ): void;
+  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 | undefined;
+  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 {}