@amazon-devices/expo-image 2.0.1758683737

package/src/ExpoImage.tsx

@@ -0,0 +1,119 @@
+import { requireNativeViewManager, requireNativeModule } from 'expo-modules-core';
+import React from 'react';
+import { NativeSyntheticEvent, StyleSheet, Platform, processColor } from 'react-native';
+
+import {
+  ImageErrorEventData,
+  ImageLoadEventData,
+  ImageNativeProps,
+  ImageProgressEventData,
+} from './Image.types';
+
+const NativeExpoImage = requireNativeViewManager('ExpoImage');
+
+const ExpoImageModule = requireNativeModule('ExpoImage');
+
+function withDeprecatedNativeEvent<NativeEvent>(
+  event: NativeSyntheticEvent<NativeEvent>
+): NativeEvent {
+  Object.defineProperty(event.nativeEvent, 'nativeEvent', {
+    get() {
+      console.warn(
+        '[expo-image]: Accessing event payload through "nativeEvent" is deprecated, it is now part of the event object itself'
+      );
+      return event.nativeEvent;
+    },
+  });
+  return event.nativeEvent;
+}
+
+class ExpoImage extends React.PureComponent<ImageNativeProps> {
+  onLoadStart = () => {
+    this.props.onLoadStart?.();
+  };
+
+  onLoad = (event: NativeSyntheticEvent<ImageLoadEventData>) => {
+    this.props.onLoad?.(withDeprecatedNativeEvent(event));
+    this.onLoadEnd();
+  };
+
+  onProgress = (event: NativeSyntheticEvent<ImageProgressEventData>) => {
+    this.props.onProgress?.(withDeprecatedNativeEvent(event));
+  };
+
+  onError = (event: NativeSyntheticEvent<ImageErrorEventData>) => {
+    this.props.onError?.(withDeprecatedNativeEvent(event));
+    this.onLoadEnd();
+  };
+
+  onLoadEnd = () => {
+    this.props.onLoadEnd?.();
+  };
+
+  render() {
+    const { style, accessibilityLabel, alt, ...props } = this.props;
+    const resolvedStyle = StyleSheet.flatten(style);
+
+    // Shadows behave different on iOS, Android & Web.
+    // Android uses the `elevation` prop, whereas iOS
+    // and web use the regular `shadow...` props.
+    if (Platform.OS === 'android') {
+      delete resolvedStyle.shadowColor;
+      delete resolvedStyle.shadowOffset;
+      delete resolvedStyle.shadowOpacity;
+      delete resolvedStyle.shadowRadius;
+    } else {
+      // @ts-expect-error
+      delete resolvedStyle.elevation;
+    }
+
+    // @ts-ignore
+    const backgroundColor = processColor(resolvedStyle.backgroundColor);
+    // On Android, we have to set the `backgroundColor` directly on the correct component.
+    // So we have to remove it from styles. Otherwise, the background color won't take into consideration the border-radius.
+    if (Platform.OS === 'android') {
+      delete resolvedStyle.backgroundColor;
+    }
+
+    const tintColor = processColor(props.tintColor || resolvedStyle.tintColor);
+
+    const borderColor = processColor(resolvedStyle.borderColor);
+    // @ts-ignore
+    const borderStartColor = processColor(resolvedStyle.borderStartColor);
+    // @ts-ignore
+    const borderEndColor = processColor(resolvedStyle.borderEndColor);
+    // @ts-ignore
+    const borderLeftColor = processColor(resolvedStyle.borderLeftColor);
+    // @ts-ignore
+    const borderRightColor = processColor(resolvedStyle.borderRightColor);
+    // @ts-ignore
+    const borderTopColor = processColor(resolvedStyle.borderTopColor);
+    // @ts-ignore
+    const borderBottomColor = processColor(resolvedStyle.borderBottomColor);
+
+    return (
+      <NativeExpoImage
+        {...props}
+        {...resolvedStyle}
+        accessibilityLabel={accessibilityLabel ?? alt}
+        style={resolvedStyle}
+        onLoadStart={this.onLoadStart}
+        onLoad={this.onLoad}
+        onProgress={this.onProgress}
+        onError={this.onError}
+        tintColor={tintColor}
+        borderColor={borderColor}
+        borderLeftColor={borderLeftColor}
+        borderRightColor={borderRightColor}
+        borderTopColor={borderTopColor}
+        borderBottomColor={borderBottomColor}
+        borderStartColor={borderStartColor}
+        borderEndColor={borderEndColor}
+        backgroundColor={backgroundColor}
+      />
+    );
+  }
+}
+
+export { ExpoImageModule };
+export default ExpoImage;

package/src/ExpoImage.web.tsx

@@ -0,0 +1,155 @@
+import React from 'react';
+import { View } from 'react-native-web';
+
+import { ImageNativeProps, ImageSource, ImageLoadEventData } from './Image.types';
+import AnimationManager, { AnimationManagerNode } from './web/AnimationManager';
+import ImageWrapper from './web/ImageWrapper';
+import loadStyle from './web/imageStyles';
+import useSourceSelection from './web/useSourceSelection';
+
+loadStyle();
+
+export const ExpoImageModule = {
+  prefetch(urls: string | string[]): void {
+    const urlsArray = Array.isArray(urls) ? urls : [urls];
+    urlsArray.forEach((url) => {
+      const img = new Image();
+      img.src = url;
+    });
+  },
+
+  async clearMemoryCache(): Promise<boolean> {
+    return false;
+  },
+
+  async clearDiskCache(): Promise<boolean> {
+    return false;
+  },
+};
+
+function onLoadAdapter(onLoad?: (event: ImageLoadEventData) => void) {
+  return (event: React.SyntheticEvent<HTMLImageElement, Event>) => {
+    const target = event.target as HTMLImageElement;
+    onLoad?.({
+      source: {
+        url: target.currentSrc,
+        width: target.naturalWidth,
+        height: target.naturalHeight,
+        mediaType: null,
+      },
+      cacheType: 'none',
+    });
+  };
+}
+
+function onErrorAdapter(onError?: { (event: { error: string }): void }) {
+  return ({ source }: { source?: ImageSource | null }) => {
+    onError?.({
+      error: `Failed to load image from url: ${source?.uri}`,
+    });
+  };
+}
+
+// Used for some transitions to mimic native animations
+const setCssVariables = (element: HTMLElement, size: DOMRect) => {
+  element?.style.setProperty('--expo-image-width', `${size.width}px`);
+  element?.style.setProperty('--expo-image-height', `${size.height}px`);
+};
+
+export default function ExpoImage({
+  source,
+  placeholder,
+  contentFit,
+  contentPosition,
+  placeholderContentFit,
+  cachePolicy,
+  onLoad,
+  transition,
+  onError,
+  responsivePolicy,
+  onLoadEnd,
+  priority,
+  blurRadius,
+  recyclingKey,
+  style,
+  ...props
+}: ImageNativeProps) {
+  const imagePlaceholderContentFit = placeholderContentFit || 'scale-down';
+  const imageHashStyle = {
+    objectFit: placeholderContentFit || contentFit,
+  };
+  const { containerRef, source: selectedSource } = useSourceSelection(
+    source,
+    responsivePolicy,
+    setCssVariables
+  );
+
+  const initialNodeAnimationKey =
+    (recyclingKey ? `${recyclingKey}-${placeholder?.[0]?.uri}` : placeholder?.[0]?.uri) ?? '';
+
+  const initialNode: AnimationManagerNode | null = placeholder?.[0]?.uri
+    ? [
+        initialNodeAnimationKey,
+        ({ onAnimationFinished }) =>
+          (className, style) => (
+            <ImageWrapper
+              {...props}
+              source={placeholder?.[0]}
+              style={{
+                objectFit: imagePlaceholderContentFit,
+                ...(blurRadius ? { filter: `blur(${blurRadius}px)` } : {}),
+                ...style,
+              }}
+              className={className}
+              events={{
+                onTransitionEnd: [onAnimationFinished],
+              }}
+              contentPosition={{ left: '50%', top: '50%' }}
+              hashPlaceholderContentPosition={contentPosition}
+              hashPlaceholderStyle={imageHashStyle}
+            />
+          ),
+      ]
+    : null;
+
+  const currentNodeAnimationKey =
+    (recyclingKey
+      ? `${recyclingKey}-${selectedSource?.uri ?? placeholder?.[0]?.uri}`
+      : selectedSource?.uri ?? placeholder?.[0]?.uri) ?? '';
+
+  const currentNode: AnimationManagerNode = [
+    currentNodeAnimationKey,
+    ({ onAnimationFinished, onReady, onMount, onError: onErrorInner }) =>
+      (className, style) => (
+        <ImageWrapper
+          {...props}
+          source={selectedSource || placeholder?.[0]}
+          events={{
+            onError: [onErrorAdapter(onError), onLoadEnd, onErrorInner],
+            onLoad: [onLoadAdapter(onLoad), onLoadEnd, onReady],
+            onMount: [onMount],
+            onTransitionEnd: [onAnimationFinished],
+          }}
+          style={{
+            objectFit: selectedSource ? contentFit : imagePlaceholderContentFit,
+            ...(blurRadius ? { filter: `blur(${blurRadius}px)` } : {}),
+            ...style,
+          }}
+          className={className}
+          cachePolicy={cachePolicy}
+          priority={priority}
+          contentPosition={selectedSource ? contentPosition : { top: '50%', left: '50%' }}
+          hashPlaceholderContentPosition={contentPosition}
+          hashPlaceholderStyle={imageHashStyle}
+          accessibilityLabel={props.accessibilityLabel}
+        />
+      ),
+  ];
+  return (
+    <View ref={containerRef} dataSet={{ expoimage: true }} style={[{ overflow: 'hidden' }, style]}>
+      <AnimationManager transition={transition} recyclingKey={recyclingKey} initial={initialNode}>
+        {currentNode}
+      </AnimationManager>
+    </View>
+  );
+}

package/src/ExpoImageModules.kepler.ts

@@ -0,0 +1,7 @@
+import {KeplerTurboModule, TurboModuleRegistry} from '@amazon-devices/keplerscript-turbomodule-api';
+
+import ExpoImageComponent from './ImageViewNativeComponent';
+
+type Spec = KeplerTurboModule;
+export const NativeExpoImage = ExpoImageComponent;
+export const ExpoImageModule = TurboModuleRegistry.getEnforcing<Spec>('ExpoImage') as Spec;

package/src/ExpoImageModules.ts

@@ -0,0 +1,4 @@
+import { requireNativeViewManager, requireNativeModule } from 'expo-modules-core';
+
+export const NativeExpoImage = requireNativeViewManager('ExpoImage');
+export const ExpoImageModule = requireNativeModule('ExpoImage');

package/src/Image.tsx

@@ -0,0 +1,82 @@
+import React from 'react';
+import { StyleSheet } from 'react-native';
+
+import ExpoImage, { ExpoImageModule } from './ExpoImage';
+import { ImageProps } from './Image.types';
+import { resolveContentFit, resolveContentPosition, resolveTransition } from './utils';
+import { resolveSources } from './utils/resolveSources';
+
+let loggedDefaultSourceDeprecationWarning = false;
+
+export class Image extends React.PureComponent<ImageProps> {
+  /**
+   * Preloads images at the given urls that can be later used in the image view.
+   * Preloaded images are always cached on the disk, so make sure to use
+   * `disk` (default) or `memory-disk` cache policy.
+   */
+  static prefetch(urls: string | string[]): void {
+    return ExpoImageModule.prefetch(Array.isArray(urls) ? urls : [urls]);
+  }
+
+  /**
+   * Asynchronously clears all images stored in memory.
+   * @platform android
+   * @platform ios
+   * @return A promise resolving to `true` when the operation succeeds.
+   * It may resolve to `false` on Android when the activity is no longer available.
+   * Resolves to `false` on Web.
+   */
+  static async clearMemoryCache(): Promise<boolean> {
+    return await ExpoImageModule.clearMemoryCache();
+  }
+
+  /**
+   * Asynchronously clears all images from the disk cache.
+   * @platform android
+   * @platform ios
+   * @return A promise resolving to `true` when the operation succeeds.
+   * It may resolve to `false` on Android when the activity is no longer available.
+   * Resolves to `false` on Web.
+   */
+  static async clearDiskCache(): Promise<boolean> {
+    return await ExpoImageModule.clearDiskCache();
+  }
+
+  render() {
+    const {
+      style,
+      source,
+      placeholder,
+      contentFit,
+      contentPosition,
+      transition,
+      fadeDuration,
+      resizeMode: resizeModeProp,
+      defaultSource,
+      loadingIndicatorSource,
+      ...restProps
+    } = this.props;
+
+    const { resizeMode: resizeModeStyle, ...restStyle } = StyleSheet.flatten(style) || {};
+    const resizeMode = resizeModeProp ?? resizeModeStyle;
+
+    if ((defaultSource || loadingIndicatorSource) && !loggedDefaultSourceDeprecationWarning) {
+      console.warn(
+        '[expo-image]: `defaultSource` and `loadingIndicatorSource` props are deprecated, use `placeholder` instead'
+      );
+      loggedDefaultSourceDeprecationWarning = true;
+    }
+
+    return (
+      <ExpoImage
+        {...restProps}
+        style={restStyle}
+        source={resolveSources(source)}
+        placeholder={resolveSources(placeholder ?? defaultSource ?? loadingIndicatorSource)}
+        contentFit={resolveContentFit(contentFit, resizeMode)}
+        contentPosition={resolveContentPosition(contentPosition)}
+        transition={resolveTransition(transition, fadeDuration)}
+      />
+    );
+  }
+}