@react-native-oh/react-native-harmony 0.72.86 → 0.77.18-1

package/Libraries/Image/ImageProps.js

@@ -0,0 +1,296 @@
+/**
+ * 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 {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 {ImageResizeMode} from './ImageResizeMode';
+import type {ImageSource} from './ImageSource';
+import type {ElementRef, Node, RefSetter} from 'react';
+
+export type ImageLoadEvent = SyntheticEvent<
+  $ReadOnly<{|
+    source: $ReadOnly<{|
+      width: number,
+      height: number,
+      uri: string,
+    |}>,
+  |}>,
+>;
+
+type IOSImageProps = $ReadOnly<{|
+  /**
+   * A static image to display while loading the image source.
+   *
+   * See https://reactnative.dev/docs/image#defaultsource
+   */
+  defaultSource?: ?ImageSource,
+  /**
+   * Invoked when a partial load of the image is complete.
+   *
+   * See https://reactnative.dev/docs/image#onpartialload
+   */
+  onPartialLoad?: ?() => void,
+  /**
+   * Invoked on download progress with `{nativeEvent: {loaded, total}}`.
+   *
+   * See https://reactnative.dev/docs/image#onprogress
+   */
+  onProgress?: ?(
+    event: SyntheticEvent<$ReadOnly<{|loaded: number, total: number|}>>,
+  ) => void,
+|}>;
+
+type AndroidImageProps = $ReadOnly<{|
+  loadingIndicatorSource?: ?(number | $ReadOnly<{|uri: string|}>),
+  progressiveRenderingEnabled?: ?boolean,
+  fadeDuration?: ?number,
+
+  /**
+   * 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'`.
+   * See https://reactnative.dev/docs/image#resizemethod-android
+   */
+  resizeMethod?: ?('auto' | 'resize' | 'scale' | 'none'),
+
+  /**
+   * When the `resizeMethod` is set to `resize`, the destination dimensions are
+   * multiplied by this value. The `scale` method is used to perform the
+   * remainder of the resize.
+   * This is used to produce higher quality images when resizing to small dimensions.
+   * Defaults to 1.0.
+   */
+  resizeMultiplier?: ?number,
+|}>;
+
+export type ImageProps = $ReadOnly<{|
+  ...$Diff<ViewProps, $ReadOnly<{|style: ?ViewStyleProp|}>>,
+  ...IOSImageProps,
+  ...AndroidImageProps,
+
+  /**
+   * When true, indicates the image is an accessibility element.
+   *
+   * See https://reactnative.dev/docs/image#accessible
+   */
+  accessible?: ?boolean,
+
+  /**
+   * Internal prop to set an "Analytics Tag" that can will be set on the Image
+   */
+  internal_analyticTag?: ?string,
+
+  /**
+   * The text that's read by the screen reader when the user interacts with
+   * the image.
+   *
+   * See https://reactnative.dev/docs/image#accessibilitylabel
+   */
+  accessibilityLabel?: ?Stringish,
+
+  /**
+   * Alias for accessibilityLabel
+   * See https://reactnative.dev/docs/image#accessibilitylabel
+   */
+  'aria-label'?: ?Stringish,
+
+  /**
+   * Represents 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
+   *
+   * See https://reactnative.dev/docs/image#blurradius
+   */
+  blurRadius?: ?number,
+
+  /**
+   * See https://reactnative.dev/docs/image#capinsets
+   */
+  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}}`.
+   *
+   * See https://reactnative.dev/docs/image#onerror
+   */
+  onError?: ?(
+    event: SyntheticEvent<
+      $ReadOnly<{|
+        error: string,
+      |}>,
+    >,
+  ) => void,
+
+  /**
+   * Invoked on mount and layout changes with
+   * `{nativeEvent: {layout: {x, y, width, height}}}`.
+   *
+   * See https://reactnative.dev/docs/image#onlayout
+   */
+
+  onLayout?: ?(event: LayoutEvent) => mixed,
+
+  /**
+   * Invoked when load completes successfully.
+   *
+   * See https://reactnative.dev/docs/image#onload
+   */
+  onLoad?: ?(event: ImageLoadEvent) => void,
+
+  /**
+   * Invoked when load either succeeds or fails.
+   *
+   * See https://reactnative.dev/docs/image#onloadend
+   */
+  onLoadEnd?: ?() => void,
+
+  /**
+   * Invoked on load start.
+   *
+   * See https://reactnative.dev/docs/image#onloadstart
+   */
+  onLoadStart?: ?() => void,
+
+  /**
+   * The image source (either a remote URL or a local file resource).
+   *
+   * See https://reactnative.dev/docs/image#source
+   */
+  source?: ?ImageSource,
+
+  /**
+   * See https://reactnative.dev/docs/image#style
+   */
+  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.
+   *
+   * See https://reactnative.dev/docs/image#resizemode
+   */
+  resizeMode?: ?ImageResizeMode,
+
+  /**
+   * A unique identifier for this element to be used in UI Automation
+   * testing scripts.
+   *
+   * See https://reactnative.dev/docs/image#testid
+   */
+  testID?: ?string,
+
+  /**
+   * 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,
+|}>;
+
+export type ImageBackgroundProps = $ReadOnly<{|
+  ...ImageProps,
+  children?: Node,
+
+  /**
+   * Style applied to the outer View component
+   *
+   * See https://reactnative.dev/docs/imagebackground#style
+   */
+  style?: ?ViewStyleProp,
+
+  /**
+   * Style applied to the inner Image component
+   *
+   * See https://reactnative.dev/docs/imagebackground#imagestyle
+   */
+  imageStyle?: ?ImageStyleProp,
+
+  /**
+   * Allows to set a reference to the inner Image component
+   *
+   * See https://reactnative.dev/docs/imagebackground#imageref
+   */
+  imageRef?: RefSetter<ElementRef<Image>>,
+|}>;

package/Libraries/Image/ImageResizeMode.d.ts

@@ -0,0 +1,56 @@
+/**
+ * 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'
+  | 'none';
+
+/**
+ * @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;
+
+  /**
+   * none - The image will be displayed at its intrinsic size, which means the
+   * image will not be scaled up or down.
+   */
+  none: ImageResizeMode;
+}

package/Libraries/Image/ImageResizeMode.js

@@ -0,0 +1,39 @@
+/**
+ * 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
+ * @format
+ */
+
+'use strict';
+
+/**
+ * ImageResizeMode defines valid values for different image resizing modes set
+ * via the `resizeMode` style property on `<Image>`.
+ */
+export type ImageResizeMode =
+  // Resize by scaling down such that it is completely visible, if bigger than
+  // the area of the view. The image will not be scaled up.
+  | 'center'
+
+  // Resize such that it will be completely visible, contained within the frame
+  // of the View.
+  | 'contain'
+
+  // Resize such that the entire area of the view is covered by the image,
+  // potentially clipping parts of the image.
+  | 'cover'
+
+  // Resize by repeating to cover the frame of the View. The image will keep its
+  // size and aspect ratio.
+  | 'repeat'
+
+  // Resize by stretching it to fill the entire frame of the view without
+  // clipping. This may change the aspect ratio of the image, distorting it.
+  | 'stretch'
+
+  // The image will not be resized at all.
+  | 'none';

package/Libraries/Image/ImageSource.d.ts

@@ -0,0 +1,74 @@
+/**
+ * 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.
+   */
+  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/ImageSource.js

@@ -0,0 +1,135 @@
+/**
+ * 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
+ * @format
+ */
+
+'use strict';
+
+/**
+ * This type is intentionally inexact in order to permit call sites that supply
+ * extra properties.
+ */
+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;
+
+  /**
+   * `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;
+
+  /**
+   * `method` is the HTTP Method to use. Defaults to GET if not specified.
+   */
+  +method?: ?string;
+
+  /**
+   * `headers` is an object representing the HTTP headers to send along with the
+   * request for a remote image.
+   */
+  +headers?: ?{[string]: string};
+
+  /**
+   * `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;
+
+  /**
+   * `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.
+   */
+  +cache?: ?('default' | 'reload' | 'force-cache' | 'only-if-cached');
+
+  /**
+   * `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;
+  +height?: ?number;
+
+  /**
+   * `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;
+}
+
+export type ImageSource =
+  | number
+  | ImageURISource
+  | $ReadOnlyArray<ImageURISource>;
+
+type ImageSourceProperties = {
+  body?: ?string,
+  bundle?: ?string,
+  cache?: ?('default' | 'reload' | 'force-cache' | 'only-if-cached'),
+  headers?: ?{[string]: string},
+  height?: ?number,
+  method?: ?string,
+  scale?: ?number,
+  uri?: ?string,
+  width?: ?number,
+  ...
+};
+
+export function getImageSourceProperties(
+  imageSource: ImageURISource,
+): $ReadOnly<ImageSourceProperties> {
+  const object: ImageSourceProperties = {};
+  if (imageSource.body != null) {
+    object.body = imageSource.body;
+  }
+  if (imageSource.bundle != null) {
+    object.bundle = imageSource.bundle;
+  }
+  if (imageSource.cache != null) {
+    object.cache = imageSource.cache;
+  }
+  if (imageSource.headers != null) {
+    object.headers = imageSource.headers;
+  }
+  if (imageSource.height != null) {
+    object.height = imageSource.height;
+  }
+  if (imageSource.method != null) {
+    object.method = imageSource.method;
+  }
+  if (imageSource.scale != null) {
+    object.scale = imageSource.scale;
+  }
+  if (imageSource.uri != null) {
+    object.uri = imageSource.uri;
+  }
+  if (imageSource.width != null) {
+    object.width = imageSource.width;
+  }
+  return object;
+}

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;
+}