expo-image 1.2.2 → 1.3.0

package/CHANGELOG.md

@@ -10,6 +10,30 @@
 
 ### 💡 Others
 
+## 1.3.0 — 2023-06-13
+
+### 🎉 New features
+
+- Add prefetch implementation on web. ([#22630](https://github.com/expo/expo/pull/22630) by [@aleqsio](https://github.com/aleqsio))
+- Add `ImageBackground` component. ([#22347](https://github.com/expo/expo/pull/22347) by [@alanjhughes](https://github.com/alanjhughes))
+- Added support for React Native 0.72. ([#22588](https://github.com/expo/expo/pull/22588) by [@kudo](https://github.com/kudo))
+
+### 🐛 Bug fixes
+
+- Fixed styles order breaking layouting on web. ([#22630](https://github.com/expo/expo/pull/22630) by [@aleqsio](https://github.com/aleqsio))
+- Uses prop spreading on web to pass all unused props to the native image component ([#22340](https://github.com/expo/expo/pull/22340) by [@makkarMeenu](https://github.com/makkarMeenu))
+- Fixed Android build warnings for Gradle version 8. ([#22537](https://github.com/expo/expo/pull/22537), [#22609](https://github.com/expo/expo/pull/22609) by [@kudo](https://github.com/kudo))
+
+### 💡 Others
+
+- Updated `SDWebImage` to `5.15.8`, `SDWebImageWebPCoder` to `0.11.0` and `SDWebImageSVGCoder` to `1.7.0`. ([#22576](https://github.com/expo/expo/pull/22576) by [@tsapeta](https://github.com/tsapeta))
+
+## 1.2.3 — 2023-05-16
+
+### 🐛 Bug fixes
+
+- Upgrade SDWebImageAVIFCoder to fix compiling issue with libavif < 0.11.0. ([#22491](https://github.com/expo/expo/pull/22491) by [@matinzd](https://github.com/matinzd))
+
 ## 1.2.2 — 2023-04-27
 
 ### 🐛 Bug fixes

package/README.md

@@ -39,8 +39,8 @@ A cross-platform, performant image component for React Native and Expo.
 
 # Installation
 
-> Currently `expo-image` can be used only with Expo SDK47 in [development builds](/development/create-development-builds/) and bare React Native apps with [configured Expo modules](/bare/installing-expo-modules/).
-> It is not available in Expo Go and Snack yet.
+> Currently `expo-image` can be used only with [development builds](/development/create-development-builds/), in Expo Go, and bare React Native apps with [configured Expo modules](/bare/installing-expo-modules/).
+> It is not available with Snack yet.
 
 Add the package to your dependencies with the following commands:
 

package/android/build.gradle

@@ -45,15 +45,21 @@ android {
     jvmTarget = JavaVersion.VERSION_11.majorVersion
   }
 
+  namespace "expo.modules.image"
   defaultConfig {
     minSdkVersion safeExtGet("minSdkVersion", 21)
     targetSdkVersion safeExtGet("targetSdkVersion", 33)
     versionCode 1
-    versionName "1.2.2"
+    versionName "1.3.0"
   }
   lintOptions {
     abortOnError false
   }
+  publishing {
+    singleVariant("release") {
+      withSourcesJar()
+    }
+  }
 }
 
 if (safeExtGet("excludeAppGlideModule", false)) {

package/android/src/main/AndroidManifest.xml

@@ -1,6 +1,4 @@
-<manifest xmlns:android="http://schemas.android.com/apk/res/android"
-  package="expo.modules.image">
-
+<manifest xmlns:android="http://schemas.android.com/apk/res/android">
   <!-- Begin Glide configuration -->
   <!-- Internet access (https://bumptech.github.io/glide/doc/download-setup.html#internet) -->
   <uses-permission android:name="android.permission.INTERNET" />

package/build/ExpoImage.web.d.ts

@@ -1,3 +1,8 @@
 import { ImageNativeProps } from './Image.types';
+export declare const ExpoImageModule: {
+    prefetch(urls: string | string[]): void;
+    clearMemoryCache(): Promise<boolean>;
+    clearDiskCache(): Promise<boolean>;
+};
 export default function ExpoImage({ source, placeholder, contentFit, contentPosition, placeholderContentFit, onLoad, transition, onError, responsivePolicy, onLoadEnd, priority, blurRadius, recyclingKey, ...props }: ImageNativeProps): JSX.Element;
 //# sourceMappingURL=ExpoImage.web.d.ts.map

package/build/ExpoImage.web.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ExpoImage.web.d.ts","sourceRoot":"","sources":["../src/ExpoImage.web.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,gBAAgB,EAAmC,MAAM,eAAe,CAAC;AAoClF,MAAM,CAAC,OAAO,UAAU,SAAS,CAAC,EAChC,MAAM,EACN,WAAW,EACX,UAAU,EACV,eAAe,EACf,qBAAqB,EACrB,MAAM,EACN,UAAU,EACV,OAAO,EACP,gBAAgB,EAChB,SAAS,EACT,QAAQ,EACR,UAAU,EACV,YAAY,EACZ,GAAG,KAAK,EACT,EAAE,gBAAgB,eA2FlB"}
+{"version":3,"file":"ExpoImage.web.d.ts","sourceRoot":"","sources":["../src/ExpoImage.web.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,gBAAgB,EAAmC,MAAM,eAAe,CAAC;AAQlF,eAAO,MAAM,eAAe;mBACX,MAAM,GAAG,MAAM,EAAE,GAAG,IAAI;wBAQb,QAAQ,OAAO,CAAC;sBAIlB,QAAQ,OAAO,CAAC;CAGzC,CAAC;AA8BF,MAAM,CAAC,OAAO,UAAU,SAAS,CAAC,EAChC,MAAM,EACN,WAAW,EACX,UAAU,EACV,eAAe,EACf,qBAAqB,EACrB,MAAM,EACN,UAAU,EACV,OAAO,EACP,gBAAgB,EAChB,SAAS,EACT,QAAQ,EACR,UAAU,EACV,YAAY,EACZ,GAAG,KAAK,EACT,EAAE,gBAAgB,eA6FlB"}

package/build/ExpoImage.web.js

@@ -4,6 +4,21 @@ import ImageWrapper from './web/ImageWrapper';
 import loadStyle from './web/style';
 import useSourceSelection from './web/useSourceSelection';
 loadStyle();
+export const ExpoImageModule = {
+    prefetch(urls) {
+        const urlsArray = Array.isArray(urls) ? urls : [urls];
+        urlsArray.forEach((url) => {
+            const img = new Image();
+            img.src = url;
+        });
+    },
+    async clearMemoryCache() {
+        return false;
+    },
+    async clearDiskCache() {
+        return false;
+    },
+};
 function onLoadAdapter(onLoad) {
     return (event) => {
         const target = event.target;
@@ -40,7 +55,7 @@ export default function ExpoImage({ source, placeholder, contentFit, contentPosi
     const initialNode = placeholder?.[0]?.uri
         ? [
             initialNodeAnimationKey,
-            ({ onAnimationFinished }) => (className, style) => (React.createElement(ImageWrapper, { source: placeholder?.[0], style: {
+            ({ onAnimationFinished }) => (className, style) => (React.createElement(ImageWrapper, { ...props, source: placeholder?.[0], style: {
                     objectFit: imagePlaceholderContentFit,
                     ...(blurRadius ? { filter: `blur(${blurRadius}px)` } : {}),
                     ...style,
@@ -54,7 +69,7 @@ export default function ExpoImage({ source, placeholder, contentFit, contentPosi
         : selectedSource?.uri ?? placeholder?.[0]?.uri) ?? '';
     const currentNode = [
         currentNodeAnimationKey,
-        ({ onAnimationFinished, onReady, onMount, onError: onErrorInner }) => (className, style) => (React.createElement(ImageWrapper, { source: selectedSource || placeholder?.[0], events: {
+        ({ onAnimationFinished, onReady, onMount, onError: onErrorInner }) => (className, style) => (React.createElement(ImageWrapper, { ...props, source: selectedSource || placeholder?.[0], events: {
                 onError: [onErrorAdapter(onError), onLoadEnd, onErrorInner],
                 onLoad: [onLoadAdapter(onLoad), onLoadEnd, onReady],
                 onMount: [onMount],
@@ -65,14 +80,16 @@ export default function ExpoImage({ source, placeholder, contentFit, contentPosi
                 ...style,
             }, className: className, priority: priority, contentPosition: selectedSource ? contentPosition : { top: '50%', left: '50%' }, hashPlaceholderContentPosition: contentPosition, hashPlaceholderStyle: blurhashStyle, accessibilityLabel: props.accessibilityLabel })),
     ];
-    return (React.createElement("div", { ref: containerRef, className: "expo-image-container", style: {
+    return (React.createElement("div", { ref: containerRef, className: "expo-image-container", 
+        // @ts-expect-error
+        style: {
             aspectRatio: String(aspectRatio),
             backgroundColor: backgroundColor?.toString(),
             transform: transform?.toString(),
             borderColor: borderColor?.toString(),
-            ...style,
-            overflow: 'hidden',
             position: 'relative',
+            overflow: 'hidden',
+            ...style,
         } },
         React.createElement(AnimationManager, { transition: transition, recyclingKey: recyclingKey, initial: initialNode }, currentNode)));
 }

package/build/ExpoImage.web.js.map

@@ -1 +1 @@
-{"version":3,"file":"ExpoImage.web.js","sourceRoot":"","sources":["../src/ExpoImage.web.tsx"],"names":[],"mappings":"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","sourcesContent":["import React from 'react';\n\nimport { ImageNativeProps, ImageSource, ImageLoadEventData } from './Image.types';\nimport AnimationManager, { AnimationManagerNode } from './web/AnimationManager';\nimport ImageWrapper from './web/ImageWrapper';\nimport loadStyle from './web/style';\nimport useSourceSelection from './web/useSourceSelection';\n\nloadStyle();\n\nfunction onLoadAdapter(onLoad?: (event: ImageLoadEventData) => void) {\n  return (event: React.SyntheticEvent<HTMLImageElement, Event>) => {\n    const target = event.target as HTMLImageElement;\n    onLoad?.({\n      source: {\n        url: target.currentSrc,\n        width: target.naturalWidth,\n        height: target.naturalHeight,\n        mediaType: null,\n      },\n      cacheType: 'none',\n    });\n  };\n}\n\nfunction onErrorAdapter(onError?: { (event: { error: string }): void }) {\n  return ({ source }: { source?: ImageSource | null }) => {\n    onError?.({\n      error: `Failed to load image from url: ${source?.uri}`,\n    });\n  };\n}\n\nconst setCssVariables = (element: HTMLElement, size: DOMRect) => {\n  element?.style.setProperty('--expo-image-width', `${size.width}px`);\n  element?.style.setProperty('--expo-image-height', `${size.height}px`);\n};\n\nexport default function ExpoImage({\n  source,\n  placeholder,\n  contentFit,\n  contentPosition,\n  placeholderContentFit,\n  onLoad,\n  transition,\n  onError,\n  responsivePolicy,\n  onLoadEnd,\n  priority,\n  blurRadius,\n  recyclingKey,\n  ...props\n}: ImageNativeProps) {\n  const { aspectRatio, backgroundColor, transform, borderColor, ...style } = props.style ?? {};\n  const imagePlaceholderContentFit = placeholderContentFit || 'scale-down';\n  const blurhashStyle = {\n    objectFit: placeholderContentFit || contentFit,\n  };\n  const { containerRef, source: selectedSource } = useSourceSelection(\n    source,\n    responsivePolicy,\n    setCssVariables\n  );\n\n  const initialNodeAnimationKey =\n    (recyclingKey ? `${recyclingKey}-${placeholder?.[0]?.uri}` : placeholder?.[0]?.uri) ?? '';\n\n  const initialNode: AnimationManagerNode | null = placeholder?.[0]?.uri\n    ? [\n        initialNodeAnimationKey,\n        ({ onAnimationFinished }) =>\n          (className, style) =>\n            (\n              <ImageWrapper\n                source={placeholder?.[0]}\n                style={{\n                  objectFit: imagePlaceholderContentFit,\n                  ...(blurRadius ? { filter: `blur(${blurRadius}px)` } : {}),\n                  ...style,\n                }}\n                className={className}\n                events={{\n                  onTransitionEnd: [onAnimationFinished],\n                }}\n                contentPosition={{ left: '50%', top: '50%' }}\n                hashPlaceholderContentPosition={contentPosition}\n                hashPlaceholderStyle={blurhashStyle}\n              />\n            ),\n      ]\n    : null;\n\n  const currentNodeAnimationKey =\n    (recyclingKey\n      ? `${recyclingKey}-${selectedSource?.uri ?? placeholder?.[0]?.uri}`\n      : selectedSource?.uri ?? placeholder?.[0]?.uri) ?? '';\n\n  const currentNode: AnimationManagerNode = [\n    currentNodeAnimationKey,\n    ({ onAnimationFinished, onReady, onMount, onError: onErrorInner }) =>\n      (className, style) =>\n        (\n          <ImageWrapper\n            source={selectedSource || placeholder?.[0]}\n            events={{\n              onError: [onErrorAdapter(onError), onLoadEnd, onErrorInner],\n              onLoad: [onLoadAdapter(onLoad), onLoadEnd, onReady],\n              onMount: [onMount],\n              onTransitionEnd: [onAnimationFinished],\n            }}\n            style={{\n              objectFit: selectedSource ? contentFit : imagePlaceholderContentFit,\n              ...(blurRadius ? { filter: `blur(${blurRadius}px)` } : {}),\n              ...style,\n            }}\n            className={className}\n            priority={priority}\n            contentPosition={selectedSource ? contentPosition : { top: '50%', left: '50%' }}\n            hashPlaceholderContentPosition={contentPosition}\n            hashPlaceholderStyle={blurhashStyle}\n            accessibilityLabel={props.accessibilityLabel}\n          />\n        ),\n  ];\n\n  return (\n    <div\n      ref={containerRef}\n      className=\"expo-image-container\"\n      style={{\n        aspectRatio: String(aspectRatio),\n        backgroundColor: backgroundColor?.toString(),\n        transform: transform?.toString(),\n        borderColor: borderColor?.toString(),\n        ...style,\n        overflow: 'hidden',\n        position: 'relative',\n      }}>\n      <AnimationManager transition={transition} recyclingKey={recyclingKey} initial={initialNode}>\n        {currentNode}\n      </AnimationManager>\n    </div>\n  );\n}\n"]}
+{"version":3,"file":"ExpoImage.web.js","sourceRoot":"","sources":["../src/ExpoImage.web.tsx"],"names":[],"mappings":"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","sourcesContent":["import React from 'react';\n\nimport { ImageNativeProps, ImageSource, ImageLoadEventData } from './Image.types';\nimport AnimationManager, { AnimationManagerNode } from './web/AnimationManager';\nimport ImageWrapper from './web/ImageWrapper';\nimport loadStyle from './web/style';\nimport useSourceSelection from './web/useSourceSelection';\n\nloadStyle();\n\nexport const ExpoImageModule = {\n  prefetch(urls: string | string[]): void {\n    const urlsArray = Array.isArray(urls) ? urls : [urls];\n    urlsArray.forEach((url) => {\n      const img = new Image();\n      img.src = url;\n    });\n  },\n\n  async clearMemoryCache(): Promise<boolean> {\n    return false;\n  },\n\n  async clearDiskCache(): Promise<boolean> {\n    return false;\n  },\n};\n\nfunction onLoadAdapter(onLoad?: (event: ImageLoadEventData) => void) {\n  return (event: React.SyntheticEvent<HTMLImageElement, Event>) => {\n    const target = event.target as HTMLImageElement;\n    onLoad?.({\n      source: {\n        url: target.currentSrc,\n        width: target.naturalWidth,\n        height: target.naturalHeight,\n        mediaType: null,\n      },\n      cacheType: 'none',\n    });\n  };\n}\n\nfunction onErrorAdapter(onError?: { (event: { error: string }): void }) {\n  return ({ source }: { source?: ImageSource | null }) => {\n    onError?.({\n      error: `Failed to load image from url: ${source?.uri}`,\n    });\n  };\n}\n\nconst setCssVariables = (element: HTMLElement, size: DOMRect) => {\n  element?.style.setProperty('--expo-image-width', `${size.width}px`);\n  element?.style.setProperty('--expo-image-height', `${size.height}px`);\n};\n\nexport default function ExpoImage({\n  source,\n  placeholder,\n  contentFit,\n  contentPosition,\n  placeholderContentFit,\n  onLoad,\n  transition,\n  onError,\n  responsivePolicy,\n  onLoadEnd,\n  priority,\n  blurRadius,\n  recyclingKey,\n  ...props\n}: ImageNativeProps) {\n  const { aspectRatio, backgroundColor, transform, borderColor, ...style } = props.style ?? {};\n  const imagePlaceholderContentFit = placeholderContentFit || 'scale-down';\n  const blurhashStyle = {\n    objectFit: placeholderContentFit || contentFit,\n  };\n  const { containerRef, source: selectedSource } = useSourceSelection(\n    source,\n    responsivePolicy,\n    setCssVariables\n  );\n\n  const initialNodeAnimationKey =\n    (recyclingKey ? `${recyclingKey}-${placeholder?.[0]?.uri}` : placeholder?.[0]?.uri) ?? '';\n\n  const initialNode: AnimationManagerNode | null = placeholder?.[0]?.uri\n    ? [\n        initialNodeAnimationKey,\n        ({ onAnimationFinished }) =>\n          (className, style) =>\n            (\n              <ImageWrapper\n                {...props}\n                source={placeholder?.[0]}\n                style={{\n                  objectFit: imagePlaceholderContentFit,\n                  ...(blurRadius ? { filter: `blur(${blurRadius}px)` } : {}),\n                  ...style,\n                }}\n                className={className}\n                events={{\n                  onTransitionEnd: [onAnimationFinished],\n                }}\n                contentPosition={{ left: '50%', top: '50%' }}\n                hashPlaceholderContentPosition={contentPosition}\n                hashPlaceholderStyle={blurhashStyle}\n              />\n            ),\n      ]\n    : null;\n\n  const currentNodeAnimationKey =\n    (recyclingKey\n      ? `${recyclingKey}-${selectedSource?.uri ?? placeholder?.[0]?.uri}`\n      : selectedSource?.uri ?? placeholder?.[0]?.uri) ?? '';\n\n  const currentNode: AnimationManagerNode = [\n    currentNodeAnimationKey,\n    ({ onAnimationFinished, onReady, onMount, onError: onErrorInner }) =>\n      (className, style) =>\n        (\n          <ImageWrapper\n            {...props}\n            source={selectedSource || placeholder?.[0]}\n            events={{\n              onError: [onErrorAdapter(onError), onLoadEnd, onErrorInner],\n              onLoad: [onLoadAdapter(onLoad), onLoadEnd, onReady],\n              onMount: [onMount],\n              onTransitionEnd: [onAnimationFinished],\n            }}\n            style={{\n              objectFit: selectedSource ? contentFit : imagePlaceholderContentFit,\n              ...(blurRadius ? { filter: `blur(${blurRadius}px)` } : {}),\n              ...style,\n            }}\n            className={className}\n            priority={priority}\n            contentPosition={selectedSource ? contentPosition : { top: '50%', left: '50%' }}\n            hashPlaceholderContentPosition={contentPosition}\n            hashPlaceholderStyle={blurhashStyle}\n            accessibilityLabel={props.accessibilityLabel}\n          />\n        ),\n  ];\n  return (\n    <div\n      ref={containerRef}\n      className=\"expo-image-container\"\n      // @ts-expect-error\n      style={{\n        aspectRatio: String(aspectRatio),\n        backgroundColor: backgroundColor?.toString(),\n        transform: transform?.toString(),\n        borderColor: borderColor?.toString(),\n        position: 'relative',\n        overflow: 'hidden',\n        ...style,\n      }}>\n      <AnimationManager transition={transition} recyclingKey={recyclingKey} initial={initialNode}>\n        {currentNode}\n      </AnimationManager>\n    </div>\n  );\n}\n"]}

package/build/Image.d.ts

@@ -9,14 +9,20 @@ export declare class Image extends React.PureComponent<ImageProps> {
     static prefetch(urls: string | string[]): void;
     /**
      * 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 clearMemoryCache(): Promise<boolean>;
     /**
      * 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 clearDiskCache(): Promise<boolean>;
     render(): JSX.Element;

package/build/Image.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Image.d.ts","sourceRoot":"","sources":["../src/Image.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAI1B,OAAO,EAAE,UAAU,EAAE,MAAM,eAAe,CAAC;AAM3C,qBAAa,KAAM,SAAQ,KAAK,CAAC,aAAa,CAAC,UAAU,CAAC;IACxD;;;;OAIG;IACH,MAAM,CAAC,QAAQ,CAAC,IAAI,EAAE,MAAM,GAAG,MAAM,EAAE,GAAG,IAAI;IAI9C;;;;OAIG;WACU,gBAAgB,IAAI,OAAO,CAAC,OAAO,CAAC;IAIjD;;;;OAIG;WACU,cAAc,IAAI,OAAO,CAAC,OAAO,CAAC;IAI/C,MAAM;CAqCP"}
+{"version":3,"file":"Image.d.ts","sourceRoot":"","sources":["../src/Image.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAI1B,OAAO,EAAE,UAAU,EAAE,MAAM,eAAe,CAAC;AAM3C,qBAAa,KAAM,SAAQ,KAAK,CAAC,aAAa,CAAC,UAAU,CAAC;IACxD;;;;OAIG;IACH,MAAM,CAAC,QAAQ,CAAC,IAAI,EAAE,MAAM,GAAG,MAAM,EAAE,GAAG,IAAI;IAI9C;;;;;;;OAOG;WACU,gBAAgB,IAAI,OAAO,CAAC,OAAO,CAAC;IAIjD;;;;;;;OAOG;WACU,cAAc,IAAI,OAAO,CAAC,OAAO,CAAC;IAI/C,MAAM;CAqCP"}

package/build/Image.js

@@ -15,16 +15,22 @@ export class Image extends React.PureComponent {
     }
     /**
      * 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() {
         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() {
         return await ExpoImageModule.clearDiskCache();

package/build/Image.js.map

@@ -1 +1 @@
-{"version":3,"file":"Image.js","sourceRoot":"","sources":["../src/Image.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;AAE1C,OAAO,SAAS,EAAE,EAAE,eAAe,EAAE,MAAM,aAAa,CAAC;AAEzD,OAAO,EAAE,iBAAiB,EAAE,sBAAsB,EAAE,iBAAiB,EAAE,MAAM,SAAS,CAAC;AACvF,OAAO,EAAE,cAAc,EAAE,MAAM,wBAAwB,CAAC;AAExD,IAAI,qCAAqC,GAAG,KAAK,CAAC;AAElD,MAAM,OAAO,KAAM,SAAQ,KAAK,CAAC,aAAyB;IACxD;;;;OAIG;IACH,MAAM,CAAC,QAAQ,CAAC,IAAuB;QACrC,OAAO,eAAe,CAAC,QAAQ,CAAC,KAAK,CAAC,OAAO,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC;IACvE,CAAC;IAED;;;;OAIG;IACH,MAAM,CAAC,KAAK,CAAC,gBAAgB;QAC3B,OAAO,MAAM,eAAe,CAAC,gBAAgB,EAAE,CAAC;IAClD,CAAC;IAED;;;;OAIG;IACH,MAAM,CAAC,KAAK,CAAC,cAAc;QACzB,OAAO,MAAM,eAAe,CAAC,cAAc,EAAE,CAAC;IAChD,CAAC;IAED,MAAM;QACJ,MAAM,EACJ,KAAK,EACL,MAAM,EACN,WAAW,EACX,UAAU,EACV,eAAe,EACf,UAAU,EACV,YAAY,EACZ,UAAU,EAAE,cAAc,EAC1B,aAAa,EACb,sBAAsB,EACtB,GAAG,SAAS,EACb,GAAG,IAAI,CAAC,KAAK,CAAC;QAEf,MAAM,EAAE,UAAU,EAAE,eAAe,EAAE,GAAG,SAAS,EAAE,GAAG,UAAU,CAAC,OAAO,CAAC,KAAK,CAAC,IAAI,EAAE,CAAC;QACtF,MAAM,UAAU,GAAG,cAAc,IAAI,eAAe,CAAC;QAErD,IAAI,CAAC,aAAa,IAAI,sBAAsB,CAAC,IAAI,CAAC,qCAAqC,EAAE;YACvF,OAAO,CAAC,IAAI,CACV,4GAA4G,CAC7G,CAAC;YACF,qCAAqC,GAAG,IAAI,CAAC;SAC9C;QAED,OAAO,CACL,oBAAC,SAAS,OACJ,SAAS,EACb,KAAK,EAAE,SAAS,EAChB,MAAM,EAAE,cAAc,CAAC,MAAM,CAAC,EAC9B,WAAW,EAAE,cAAc,CAAC,WAAW,IAAI,aAAa,IAAI,sBAAsB,CAAC,EACnF,UAAU,EAAE,iBAAiB,CAAC,UAAU,EAAE,UAAU,CAAC,EACrD,eAAe,EAAE,sBAAsB,CAAC,eAAe,CAAC,EACxD,UAAU,EAAE,iBAAiB,CAAC,UAAU,EAAE,YAAY,CAAC,GACvD,CACH,CAAC;IACJ,CAAC;CACF","sourcesContent":["import React from 'react';\nimport { StyleSheet } from 'react-native';\n\nimport ExpoImage, { ExpoImageModule } from './ExpoImage';\nimport { ImageProps } from './Image.types';\nimport { resolveContentFit, resolveContentPosition, resolveTransition } from './utils';\nimport { resolveSources } from './utils/resolveSources';\n\nlet loggedDefaultSourceDeprecationWarning = false;\n\nexport class Image extends React.PureComponent<ImageProps> {\n  /**\n   * Preloads images at the given urls that can be later used in the image view.\n   * Preloaded images are always cached on the disk, so make sure to use\n   * `disk` (default) or `memory-disk` cache policy.\n   */\n  static prefetch(urls: string | string[]): void {\n    return ExpoImageModule.prefetch(Array.isArray(urls) ? urls : [urls]);\n  }\n\n  /**\n   * Asynchronously clears all images stored in memory.\n   * @return A promise resolving to `true` when the operation succeeds.\n   * It may resolve to `false` on Android when the activity is no longer available.\n   */\n  static async clearMemoryCache(): Promise<boolean> {\n    return await ExpoImageModule.clearMemoryCache();\n  }\n\n  /**\n   * Asynchronously clears all images from the disk cache.\n   * @return A promise resolving to `true` when the operation succeeds.\n   * It may resolve to `false` on Android when the activity is no longer available.\n   */\n  static async clearDiskCache(): Promise<boolean> {\n    return await ExpoImageModule.clearDiskCache();\n  }\n\n  render() {\n    const {\n      style,\n      source,\n      placeholder,\n      contentFit,\n      contentPosition,\n      transition,\n      fadeDuration,\n      resizeMode: resizeModeProp,\n      defaultSource,\n      loadingIndicatorSource,\n      ...restProps\n    } = this.props;\n\n    const { resizeMode: resizeModeStyle, ...restStyle } = StyleSheet.flatten(style) || {};\n    const resizeMode = resizeModeProp ?? resizeModeStyle;\n\n    if ((defaultSource || loadingIndicatorSource) && !loggedDefaultSourceDeprecationWarning) {\n      console.warn(\n        '[expo-image]: `defaultSource` and `loadingIndicatorSource` props are deprecated, use `placeholder` instead'\n      );\n      loggedDefaultSourceDeprecationWarning = true;\n    }\n\n    return (\n      <ExpoImage\n        {...restProps}\n        style={restStyle}\n        source={resolveSources(source)}\n        placeholder={resolveSources(placeholder ?? defaultSource ?? loadingIndicatorSource)}\n        contentFit={resolveContentFit(contentFit, resizeMode)}\n        contentPosition={resolveContentPosition(contentPosition)}\n        transition={resolveTransition(transition, fadeDuration)}\n      />\n    );\n  }\n}\n"]}
+{"version":3,"file":"Image.js","sourceRoot":"","sources":["../src/Image.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;AAE1C,OAAO,SAAS,EAAE,EAAE,eAAe,EAAE,MAAM,aAAa,CAAC;AAEzD,OAAO,EAAE,iBAAiB,EAAE,sBAAsB,EAAE,iBAAiB,EAAE,MAAM,SAAS,CAAC;AACvF,OAAO,EAAE,cAAc,EAAE,MAAM,wBAAwB,CAAC;AAExD,IAAI,qCAAqC,GAAG,KAAK,CAAC;AAElD,MAAM,OAAO,KAAM,SAAQ,KAAK,CAAC,aAAyB;IACxD;;;;OAIG;IACH,MAAM,CAAC,QAAQ,CAAC,IAAuB;QACrC,OAAO,eAAe,CAAC,QAAQ,CAAC,KAAK,CAAC,OAAO,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC;IACvE,CAAC;IAED;;;;;;;OAOG;IACH,MAAM,CAAC,KAAK,CAAC,gBAAgB;QAC3B,OAAO,MAAM,eAAe,CAAC,gBAAgB,EAAE,CAAC;IAClD,CAAC;IAED;;;;;;;OAOG;IACH,MAAM,CAAC,KAAK,CAAC,cAAc;QACzB,OAAO,MAAM,eAAe,CAAC,cAAc,EAAE,CAAC;IAChD,CAAC;IAED,MAAM;QACJ,MAAM,EACJ,KAAK,EACL,MAAM,EACN,WAAW,EACX,UAAU,EACV,eAAe,EACf,UAAU,EACV,YAAY,EACZ,UAAU,EAAE,cAAc,EAC1B,aAAa,EACb,sBAAsB,EACtB,GAAG,SAAS,EACb,GAAG,IAAI,CAAC,KAAK,CAAC;QAEf,MAAM,EAAE,UAAU,EAAE,eAAe,EAAE,GAAG,SAAS,EAAE,GAAG,UAAU,CAAC,OAAO,CAAC,KAAK,CAAC,IAAI,EAAE,CAAC;QACtF,MAAM,UAAU,GAAG,cAAc,IAAI,eAAe,CAAC;QAErD,IAAI,CAAC,aAAa,IAAI,sBAAsB,CAAC,IAAI,CAAC,qCAAqC,EAAE;YACvF,OAAO,CAAC,IAAI,CACV,4GAA4G,CAC7G,CAAC;YACF,qCAAqC,GAAG,IAAI,CAAC;SAC9C;QAED,OAAO,CACL,oBAAC,SAAS,OACJ,SAAS,EACb,KAAK,EAAE,SAAS,EAChB,MAAM,EAAE,cAAc,CAAC,MAAM,CAAC,EAC9B,WAAW,EAAE,cAAc,CAAC,WAAW,IAAI,aAAa,IAAI,sBAAsB,CAAC,EACnF,UAAU,EAAE,iBAAiB,CAAC,UAAU,EAAE,UAAU,CAAC,EACrD,eAAe,EAAE,sBAAsB,CAAC,eAAe,CAAC,EACxD,UAAU,EAAE,iBAAiB,CAAC,UAAU,EAAE,YAAY,CAAC,GACvD,CACH,CAAC;IACJ,CAAC;CACF","sourcesContent":["import React from 'react';\nimport { StyleSheet } from 'react-native';\n\nimport ExpoImage, { ExpoImageModule } from './ExpoImage';\nimport { ImageProps } from './Image.types';\nimport { resolveContentFit, resolveContentPosition, resolveTransition } from './utils';\nimport { resolveSources } from './utils/resolveSources';\n\nlet loggedDefaultSourceDeprecationWarning = false;\n\nexport class Image extends React.PureComponent<ImageProps> {\n  /**\n   * Preloads images at the given urls that can be later used in the image view.\n   * Preloaded images are always cached on the disk, so make sure to use\n   * `disk` (default) or `memory-disk` cache policy.\n   */\n  static prefetch(urls: string | string[]): void {\n    return ExpoImageModule.prefetch(Array.isArray(urls) ? urls : [urls]);\n  }\n\n  /**\n   * Asynchronously clears all images stored in memory.\n   * @platform android\n   * @platform ios\n   * @return A promise resolving to `true` when the operation succeeds.\n   * It may resolve to `false` on Android when the activity is no longer available.\n   * Resolves to `false` on Web.\n   */\n  static async clearMemoryCache(): Promise<boolean> {\n    return await ExpoImageModule.clearMemoryCache();\n  }\n\n  /**\n   * Asynchronously clears all images from the disk cache.\n   * @platform android\n   * @platform ios\n   * @return A promise resolving to `true` when the operation succeeds.\n   * It may resolve to `false` on Android when the activity is no longer available.\n   * Resolves to `false` on Web.\n   */\n  static async clearDiskCache(): Promise<boolean> {\n    return await ExpoImageModule.clearDiskCache();\n  }\n\n  render() {\n    const {\n      style,\n      source,\n      placeholder,\n      contentFit,\n      contentPosition,\n      transition,\n      fadeDuration,\n      resizeMode: resizeModeProp,\n      defaultSource,\n      loadingIndicatorSource,\n      ...restProps\n    } = this.props;\n\n    const { resizeMode: resizeModeStyle, ...restStyle } = StyleSheet.flatten(style) || {};\n    const resizeMode = resizeModeProp ?? resizeModeStyle;\n\n    if ((defaultSource || loadingIndicatorSource) && !loggedDefaultSourceDeprecationWarning) {\n      console.warn(\n        '[expo-image]: `defaultSource` and `loadingIndicatorSource` props are deprecated, use `placeholder` instead'\n      );\n      loggedDefaultSourceDeprecationWarning = true;\n    }\n\n    return (\n      <ExpoImage\n        {...restProps}\n        style={restStyle}\n        source={resolveSources(source)}\n        placeholder={resolveSources(placeholder ?? defaultSource ?? loadingIndicatorSource)}\n        contentFit={resolveContentFit(contentFit, resizeMode)}\n        contentPosition={resolveContentPosition(contentPosition)}\n        transition={resolveTransition(transition, fadeDuration)}\n      />\n    );\n  }\n}\n"]}

package/build/Image.types.d.ts

@@ -1,4 +1,4 @@
-import { ImageStyle as RNImageStyle, ViewProps } from 'react-native';
+import { ImageStyle as RNImageStyle, ViewProps, StyleProp, ViewStyle } from 'react-native';
 export type ImageSource = {
     /**
      * A string representing the resource identifier for the image,
@@ -54,7 +54,7 @@ export type ImageContentFit = 'cover' | 'contain' | 'fill' | 'none' | 'scale-dow
  */
 export interface ImageProps extends ViewProps {
     /** @hidden */
-    style?: RNImageStyle | RNImageStyle[];
+    style?: StyleProp<RNImageStyle>;
     /**
      * The image source, either a remote URL, a local file resource or a number that is the result of the `require()` function.
      * When provided as an array of sources, the source that fits best into the container size and is closest to the screen scale
@@ -217,9 +217,6 @@ export interface ImageProps extends ViewProps {
     /**
      * The text that's read by the screen reader when the user interacts with the image. Sets the the `alt` tag on web which is used for web crawlers and link traversal.
      * @default undefined
-     * @platform android
-     * @platform ios
-     * @platform web
      */
     accessibilityLabel?: string;
     /**
@@ -227,9 +224,6 @@ export interface ImageProps extends ViewProps {
      *
      * @alias accessibilityLabel
      * @default undefined
-     * @platform android
-     * @platform ios
-     * @platform web
      */
     alt?: string;
     /**
@@ -307,6 +301,14 @@ export type ImageContentPosition =
     bottom?: ImageContentPositionValue;
     left?: ImageContentPositionValue;
 } | ImageContentPositionString;
+export interface ImageBackgroundProps extends Omit<ImageProps, 'style'> {
+    /** The style of the image container */
+    style?: StyleProp<ViewStyle> | undefined;
+    /** Style object for the image */
+    imageStyle?: StyleProp<RNImageStyle> | undefined;
+    /** @hidden */
+    children?: React.ReactNode | undefined;
+}
 /**
  * @hidden It's described as part of {@link ImageContentPosition}.
  */

package/build/Image.types.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Image.types.d.ts","sourceRoot":"","sources":["../src/Image.types.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"Image.types.d.ts","sourceRoot":"","sources":["../src/Image.types.ts"],"names":[],"mappings":"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"}

package/build/Image.types.js.map

@@ -1 +1 @@
-{"version":3,"file":"Image.types.js","sourceRoot":"","sources":["../src/Image.types.ts"],"names":[],"mappings":"","sourcesContent":["import { ImageStyle as RNImageStyle, ViewProps } from 'react-native';\n\nexport type ImageSource = {\n  /**\n   * A string representing the resource identifier for the image,\n   * which could be an http address, a local file path, or the name of a static image resource.\n   */\n  uri?: string;\n  /**\n   * An object representing the HTTP headers to send along with the request for a remote image.\n   * @platform android\n   * @platform ios\n   */\n  headers?: Record<string, string>;\n  /**\n   * Can be specified if known at build time, in which case the value\n   * will be used to set the default `<Image/>` component dimension\n   */\n  width?: number;\n  /**\n   * Can be specified if known at build time, in which case the value\n   * will be used to set the default `<Image/>` component dimension\n   */\n  height?: number;\n\n  /**\n   * The blurhash string to use to generate the image. You can read more about the blurhash\n   * on [`woltapp/blurhash`](https://github.com/woltapp/blurhash) repo. Ignored when `uri` is provided.\n   * When using the blurhash, you should also provide `width` and `height` (higher values reduce performance),\n   * otherwise their default value is `16`.\n   */\n  blurhash?: string;\n\n  /**\n   * The thumbhash string to use to generate the image placeholder. You can read more about thumbhash\n   * on the [`thumbhash website`](https://evanw.github.io/thumbhash/). Ignored when `uri` is provided.\n   */\n  thumbhash?: string;\n\n  /**\n   * The cache key used to query and store this specific image.\n   * If not provided, the `uri` is used also as the cache key.\n   */\n  cacheKey?: string;\n};\n\n/**\n * @hidden\n */\nexport type ImageStyle = RNImageStyle;\n\n/**\n * Determines how the image should be resized to fit its container.\n * @hidden Described in the {@link ImageProps['contentFit']}\n */\nexport type ImageContentFit = 'cover' | 'contain' | 'fill' | 'none' | 'scale-down';\n\n/**\n * Some props are from React Native Image that Expo Image supports (more or less) for easier migration,\n * but all of them are deprecated and might be removed in the future.\n */\nexport interface ImageProps extends ViewProps {\n  /** @hidden */\n  style?: RNImageStyle | RNImageStyle[];\n\n  /**\n   * The image source, either a remote URL, a local file resource or a number that is the result of the `require()` function.\n   * When provided as an array of sources, the source that fits best into the container size and is closest to the screen scale\n   * will be chosen. In this case it is important to provide `width`, `height` and `scale` properties.\n   */\n  source?: ImageSource | string | number | ImageSource[] | string[] | null;\n\n  /**\n   * An image to display while loading the proper image and no image has been displayed yet or the source is unset.\n   */\n  placeholder?: ImageSource | string | number | ImageSource[] | string[] | null;\n\n  /**\n   * Determines how the image should be resized to fit its container. This property tells the image to fill the container\n   * in a variety of ways; such as \"preserve that aspect ratio\" or \"stretch up and take up as much space as possible\".\n   * It mirrors the CSS [`object-fit`](https://developer.mozilla.org/en-US/docs/Web/CSS/object-fit) property.\n   *\n   * - `'cover'` - The image is sized to maintain its aspect ratio while filling the container box.\n   * If the image's aspect ratio does not match the aspect ratio of its box, then the object will be clipped to fit.\n   *\n   * - `'contain'` - The image is scaled down or up to maintain its aspect ratio while fitting within the container box.\n   *\n   * - `'fill'` - The image is sized to entirely fill the container box. If necessary, the image will be stretched or squished to fit.\n   *\n   * - `'none'` - The image is not resized and is centered by default.\n   * When specified, the exact position can be controlled with [`contentPosition`](#contentposition) prop.\n   *\n   * - `'scale-down'` - The image is sized as if `none` or `contain` were specified, whichever would result in a smaller concrete image size.\n   *\n   * @default 'cover'\n   */\n  contentFit?: ImageContentFit;\n\n  /**\n   * Determines how the placeholder should be resized to fit its container\n   * @hidden Described in the {@link ImageProps['contentFit']}\n   * @default 'scale-down'\n   */\n  placeholderContentFit?: ImageContentFit;\n\n  /**\n   * It is used together with [`contentFit`](#contentfit) to specify how the image should be positioned with x/y coordinates inside its own container.\n   * An equivalent of the CSS [`object-position`](https://developer.mozilla.org/en-US/docs/Web/CSS/object-position) property.\n   * @default 'center'\n   */\n  contentPosition?: ImageContentPosition;\n\n  /**\n   * Describes how the image view should transition the contents when switching the image source.\\\n   * If provided as a number, it is the duration in milliseconds of the `'cross-dissolve'` effect.\n   */\n  transition?: ImageTransition | number | null;\n\n  /**\n   * The radius of the blur in points, `0` means no blur effect.\n   * This effect is not applied to placeholders.\n   * @default 0\n   */\n  blurRadius?: number;\n\n  /**\n   * A color used to tint template images (a bitmap image where only the opacity matters).\n   * The color is applied to every non-transparent pixel, causing the image’s shape to adopt that color.\n   * This effect is not applied to placeholders.\n   * @default null\n   * @platform android\n   * @platform ios\n   */\n  tintColor?: string | null;\n\n  /**\n   * Priorities for completing loads. If more than one load is queued at a time,\n   * the load with the higher priority will be started first.\n   * Priorities are considered best effort, there are no guarantees about the order in which loads will start or finish.\n   * @default 'normal'\n   */\n  priority?: 'low' | 'normal' | 'high' | null;\n\n  /**\n   * Determines whether to cache the image and where: on the disk, in the memory or both.\n   *\n   * - `'none'` - Image is not cached at all.\n   *\n   * - `'disk'` - Image is queried from the disk cache if exists, otherwise it's downloaded and then stored on the disk.\n   *\n   * - `'memory'` - Image is cached in memory. Might be useful when you render a high-resolution picture many times.\n   * Memory cache may be purged very quickly to prevent high memory usage and the risk of out of memory exceptions.\n   *\n   * - `'memory-disk'` - Image is cached in memory, but with a fallback to the disk cache.\n   *\n   * @default 'disk'\n   */\n  cachePolicy?: 'none' | 'disk' | 'memory' | 'memory-disk' | /** @hidden */ null;\n\n  /**\n   * Determines whether to choose image source based on container size only on mount or on every resize.\n   * Use `initial` to improve performance.\n   * @default \"live\"\n   * @platform web\n   */\n  responsivePolicy?: 'live' | 'initial';\n\n  /**\n   * Changing this prop resets the image view content to blank or a placeholder before loading and rendering the final image.\n   * This is especially useful for any kinds of recycling views like [FlashList](https://github.com/shopify/flash-list)\n   * to prevent showing the previous source before the new one fully loads.\n   * @default null\n   * @platform android\n   * @platform ios\n   */\n  recyclingKey?: string | null;\n\n  /**\n   * Called when the image starts to load.\n   */\n  onLoadStart?: () => void;\n\n  /**\n   * Called when the image load completes successfully.\n   */\n  onLoad?: (event: ImageLoadEventData) => void;\n\n  /**\n   * Called when the image is loading. Can be called multiple times before the image has finished loading.\n   * The event object provides details on how many bytes were loaded so far and what's the expected total size.\n   */\n  onProgress?: (event: ImageProgressEventData) => void;\n\n  /**\n   * Called on an image fetching error.\n   */\n  onError?: (event: ImageErrorEventData) => void;\n\n  /**\n   * Called when the image load either succeeds or fails.\n   */\n  onLoadEnd?: () => void;\n\n  // DEPRECATED\n\n  /**\n   * @deprecated Provides compatibility for [`defaultSource` from React Native Image](https://reactnative.dev/docs/image#defaultsource).\n   * Use [`placeholder`](#placeholder) prop instead.\n   */\n  defaultSource?: ImageSource | null;\n\n  /**\n   * @deprecated Provides compatibility for [`loadingIndicatorSource` from React Native Image](https://reactnative.dev/docs/image#loadingindicatorsource).\n   * Use [`placeholder`](#placeholder) prop instead.\n   */\n  loadingIndicatorSource?: ImageSource | null;\n\n  /**\n   * @deprecated Provides compatibility for [`resizeMode` from React Native Image](https://reactnative.dev/docs/image#resizemode).\n   * Note that `\"repeat\"` option is not supported at all.\n   * Use the more powerful [`contentFit`](#contentfit) and [`contentPosition`](#contentposition) props instead.\n   */\n  resizeMode?: 'cover' | 'contain' | 'stretch' | 'repeat' | 'center';\n\n  /**\n   * @deprecated Provides compatibility for [`fadeDuration` from React Native Image](https://reactnative.dev/docs/image#fadeduration-android).\n   * Instead use [`transition`](#transition) with the provided duration.\n   */\n  fadeDuration?: number;\n\n  /**\n   * Whether this View should be focusable with a non-touch input device and receive focus with a hardware keyboard.\n   * @default false\n   * @platform android\n   */\n  focusable?: boolean;\n\n  /**\n   * When true, indicates that the view is an accessibility element.\n   * When a view is an accessibility element, it groups its children into a single selectable component.\n   *\n   * On Android, the `accessible` property will be translated into the native `isScreenReaderFocusable`,\n   * so it's only affecting the screen readers behaviour.\n   * @default false\n   * @platform android\n   * @platform ios\n   */\n  accessible?: boolean;\n\n  /**\n   * The text that's read by the screen reader when the user interacts with the image. Sets the the `alt` tag on web which is used for web crawlers and link traversal.\n   * @default undefined\n   * @platform android\n   * @platform ios\n   * @platform web\n   */\n  accessibilityLabel?: string;\n\n  /**\n   * The text that's read by the screen reader when the user interacts with the image. Sets the the `alt` tag on web which is used for web crawlers and link traversal. Is an alias for `accessibilityLabel`.\n   *\n   * @alias accessibilityLabel\n   * @default undefined\n   * @platform android\n   * @platform ios\n   * @platform web\n   */\n  alt?: string;\n\n  /**\n   * Enables Live Text interaction with the image. Check official [Apple documentation](https://developer.apple.com/documentation/visionkit/enabling_live_text_interactions_with_images) for more details.\n   * @default false\n   * @platform ios 16.0+\n   */\n  enableLiveTextInteraction?: boolean;\n\n  /**\n   * Whether the image should be downscaled to match the size of the view container.\n   * Turning off this functionality could negatively impact the application's performance, particularly when working with large assets.\n   * However, it would result in smoother image resizing, and end-users would always have access to the highest possible asset quality.\n   *\n   * Downscaling is never used when the `contentFit` prop is set to `none` or `fill`.\n   * @default true\n   * @platform android\n   */\n  allowDownscaling?: boolean;\n}\n\n/**\n * It narrows down some props to types expected by the native/web side.\n * @hidden\n */\nexport interface ImageNativeProps extends ImageProps {\n  style?: RNImageStyle;\n  source?: ImageSource[];\n  placeholder?: ImageSource[];\n  contentPosition?: ImageContentPositionObject;\n  transition?: ImageTransition | null;\n}\n\n/**\n * A value that represents the relative position of a single axis.\n *\n * If `number`, it is a distance in points (logical pixels) from the respective edge.\\\n * If `string`, it must be a percentage value where `'100%'` is the difference in size between the container and the image along the respective axis,\n * or `'center'` which is an alias for `'50%'` that is the default value. You can read more regarding percentages on the MDN docs for\n * [`background-position`](https://developer.mozilla.org/en-US/docs/Web/CSS/background-position#regarding_percentages) that describes this concept well.\n */\nexport type ImageContentPositionValue = number | string | `${number}%` | `${number}` | 'center';\n\n// eslint-disable\n// prettier-ignore\n/**\n * Specifies the position of the image inside its container. One value controls the x-axis and the second value controls the y-axis.\n *\n * Additionally, it supports stringified shorthand form that specifies the edges to which to align the image content:\\\n * `'center'`, `'top'`, `'right'`, `'bottom'`, `'left'`, `'top center'`, `'top right'`, `'top left'`, `'right center'`, `'right top'`,\n * `'right bottom'`, `'bottom center'`, `'bottom right'`, `'bottom left'`, `'left center'`, `'left top'`, `'left bottom'`.\\\n * If only one keyword is provided, then the other dimension is set to `'center'` (`'50%'`), so the image is placed in the middle of the specified edge.\\\n * As an example, `'top right'` is the same as `{ top: 0, right: 0 }` and `'bottom'` is the same as `{ bottom: 0, left: '50%' }`.\n */\nexport type ImageContentPosition =\n  /**\n   * An object that positions the image relatively to the top-right corner.\n   */\n  {\n    top?: ImageContentPositionValue;\n    right?: ImageContentPositionValue;\n  } |\n  /**\n   * An object that positions the image relatively to the top-left corner.\n   */\n  {\n    top?: ImageContentPositionValue;\n    left?: ImageContentPositionValue;\n  } |\n  /**\n   * An object that positions the image relatively to the bottom-right corner.\n   */\n  {\n    bottom?: ImageContentPositionValue;\n    right?: ImageContentPositionValue;\n  } |\n  /**\n   * An object that positions the image relatively to the bottom-left corner.\n   */\n  {\n    bottom?: ImageContentPositionValue;\n    left?: ImageContentPositionValue;\n  }\n  | ImageContentPositionString;\n// eslint-enable\n\n/**\n * @hidden It's described as part of {@link ImageContentPosition}.\n */\nexport type ImageContentPositionString =\n  | 'center'\n  | 'top'\n  | 'right'\n  | 'bottom'\n  | 'left'\n  | 'top center'\n  | 'top right'\n  | 'top left'\n  | 'right center'\n  | 'right top'\n  | 'right bottom'\n  | 'bottom center'\n  | 'bottom right'\n  | 'bottom left'\n  | 'left center'\n  | 'left top'\n  | 'left bottom';\n\ntype OnlyObject<T> = T extends object ? T : never;\n\n/**\n * @hidden It's a conditional type that matches only objects of {@link ImageContentPosition}.\n */\nexport type ImageContentPositionObject = OnlyObject<ImageContentPosition>;\n\n/**\n * An object that describes the smooth transition when switching the image source.\n */\nexport type ImageTransition = {\n  /**\n   * The duration of the transition in milliseconds.\n   * @default 0\n   */\n  duration?: number;\n\n  /**\n   * Specifies the speed curve of the transition effect and how intermediate values are calculated.\n   * @default 'ease-in-out'\n   */\n  timing?: 'ease-in-out' | 'ease-in' | 'ease-out' | 'linear';\n\n  /**\n   * An animation effect used for transition.\n   * @default 'cross-dissolve'\n   *\n   * On Android, only `'cross-dissolve'` is supported.\n   * On Web, `'curl-up'` and `'curl-down'` effects are not supported.\n   */\n  effect?:\n    | 'cross-dissolve'\n    | 'flip-from-top'\n    | 'flip-from-right'\n    | 'flip-from-bottom'\n    | 'flip-from-left'\n    | 'curl-up'\n    | 'curl-down'\n    | null;\n};\n\nexport type ImageLoadEventData = {\n  cacheType: 'none' | 'disk' | 'memory';\n  source: {\n    url: string;\n    width: number;\n    height: number;\n    mediaType: string | null;\n  };\n};\n\nexport type ImageProgressEventData = {\n  loaded: number;\n  total: number;\n};\n\nexport type ImageErrorEventData = {\n  error: string;\n};\n"]}
+{"version":3,"file":"Image.types.js","sourceRoot":"","sources":["../src/Image.types.ts"],"names":[],"mappings":"","sourcesContent":["import { ImageStyle as RNImageStyle, ViewProps, StyleProp, ViewStyle } from 'react-native';\n\nexport type ImageSource = {\n  /**\n   * A string representing the resource identifier for the image,\n   * which could be an http address, a local file path, or the name of a static image resource.\n   */\n  uri?: string;\n  /**\n   * An object representing the HTTP headers to send along with the request for a remote image.\n   * @platform android\n   * @platform ios\n   */\n  headers?: Record<string, string>;\n  /**\n   * Can be specified if known at build time, in which case the value\n   * will be used to set the default `<Image/>` component dimension\n   */\n  width?: number;\n  /**\n   * Can be specified if known at build time, in which case the value\n   * will be used to set the default `<Image/>` component dimension\n   */\n  height?: number;\n\n  /**\n   * The blurhash string to use to generate the image. You can read more about the blurhash\n   * on [`woltapp/blurhash`](https://github.com/woltapp/blurhash) repo. Ignored when `uri` is provided.\n   * When using the blurhash, you should also provide `width` and `height` (higher values reduce performance),\n   * otherwise their default value is `16`.\n   */\n  blurhash?: string;\n\n  /**\n   * The thumbhash string to use to generate the image placeholder. You can read more about thumbhash\n   * on the [`thumbhash website`](https://evanw.github.io/thumbhash/). Ignored when `uri` is provided.\n   */\n  thumbhash?: string;\n\n  /**\n   * The cache key used to query and store this specific image.\n   * If not provided, the `uri` is used also as the cache key.\n   */\n  cacheKey?: string;\n};\n\n/**\n * @hidden\n */\nexport type ImageStyle = RNImageStyle;\n\n/**\n * Determines how the image should be resized to fit its container.\n * @hidden Described in the {@link ImageProps['contentFit']}\n */\nexport type ImageContentFit = 'cover' | 'contain' | 'fill' | 'none' | 'scale-down';\n\n/**\n * Some props are from React Native Image that Expo Image supports (more or less) for easier migration,\n * but all of them are deprecated and might be removed in the future.\n */\nexport interface ImageProps extends ViewProps {\n  /** @hidden */\n  style?: StyleProp<RNImageStyle>;\n\n  /**\n   * The image source, either a remote URL, a local file resource or a number that is the result of the `require()` function.\n   * When provided as an array of sources, the source that fits best into the container size and is closest to the screen scale\n   * will be chosen. In this case it is important to provide `width`, `height` and `scale` properties.\n   */\n  source?: ImageSource | string | number | ImageSource[] | string[] | null;\n\n  /**\n   * An image to display while loading the proper image and no image has been displayed yet or the source is unset.\n   */\n  placeholder?: ImageSource | string | number | ImageSource[] | string[] | null;\n\n  /**\n   * Determines how the image should be resized to fit its container. This property tells the image to fill the container\n   * in a variety of ways; such as \"preserve that aspect ratio\" or \"stretch up and take up as much space as possible\".\n   * It mirrors the CSS [`object-fit`](https://developer.mozilla.org/en-US/docs/Web/CSS/object-fit) property.\n   *\n   * - `'cover'` - The image is sized to maintain its aspect ratio while filling the container box.\n   * If the image's aspect ratio does not match the aspect ratio of its box, then the object will be clipped to fit.\n   *\n   * - `'contain'` - The image is scaled down or up to maintain its aspect ratio while fitting within the container box.\n   *\n   * - `'fill'` - The image is sized to entirely fill the container box. If necessary, the image will be stretched or squished to fit.\n   *\n   * - `'none'` - The image is not resized and is centered by default.\n   * When specified, the exact position can be controlled with [`contentPosition`](#contentposition) prop.\n   *\n   * - `'scale-down'` - The image is sized as if `none` or `contain` were specified, whichever would result in a smaller concrete image size.\n   *\n   * @default 'cover'\n   */\n  contentFit?: ImageContentFit;\n\n  /**\n   * Determines how the placeholder should be resized to fit its container\n   * @hidden Described in the {@link ImageProps['contentFit']}\n   * @default 'scale-down'\n   */\n  placeholderContentFit?: ImageContentFit;\n\n  /**\n   * It is used together with [`contentFit`](#contentfit) to specify how the image should be positioned with x/y coordinates inside its own container.\n   * An equivalent of the CSS [`object-position`](https://developer.mozilla.org/en-US/docs/Web/CSS/object-position) property.\n   * @default 'center'\n   */\n  contentPosition?: ImageContentPosition;\n\n  /**\n   * Describes how the image view should transition the contents when switching the image source.\\\n   * If provided as a number, it is the duration in milliseconds of the `'cross-dissolve'` effect.\n   */\n  transition?: ImageTransition | number | null;\n\n  /**\n   * The radius of the blur in points, `0` means no blur effect.\n   * This effect is not applied to placeholders.\n   * @default 0\n   */\n  blurRadius?: number;\n\n  /**\n   * A color used to tint template images (a bitmap image where only the opacity matters).\n   * The color is applied to every non-transparent pixel, causing the image’s shape to adopt that color.\n   * This effect is not applied to placeholders.\n   * @default null\n   * @platform android\n   * @platform ios\n   */\n  tintColor?: string | null;\n\n  /**\n   * Priorities for completing loads. If more than one load is queued at a time,\n   * the load with the higher priority will be started first.\n   * Priorities are considered best effort, there are no guarantees about the order in which loads will start or finish.\n   * @default 'normal'\n   */\n  priority?: 'low' | 'normal' | 'high' | null;\n\n  /**\n   * Determines whether to cache the image and where: on the disk, in the memory or both.\n   *\n   * - `'none'` - Image is not cached at all.\n   *\n   * - `'disk'` - Image is queried from the disk cache if exists, otherwise it's downloaded and then stored on the disk.\n   *\n   * - `'memory'` - Image is cached in memory. Might be useful when you render a high-resolution picture many times.\n   * Memory cache may be purged very quickly to prevent high memory usage and the risk of out of memory exceptions.\n   *\n   * - `'memory-disk'` - Image is cached in memory, but with a fallback to the disk cache.\n   *\n   * @default 'disk'\n   */\n  cachePolicy?: 'none' | 'disk' | 'memory' | 'memory-disk' | /** @hidden */ null;\n\n  /**\n   * Determines whether to choose image source based on container size only on mount or on every resize.\n   * Use `initial` to improve performance.\n   * @default \"live\"\n   * @platform web\n   */\n  responsivePolicy?: 'live' | 'initial';\n\n  /**\n   * Changing this prop resets the image view content to blank or a placeholder before loading and rendering the final image.\n   * This is especially useful for any kinds of recycling views like [FlashList](https://github.com/shopify/flash-list)\n   * to prevent showing the previous source before the new one fully loads.\n   * @default null\n   * @platform android\n   * @platform ios\n   */\n  recyclingKey?: string | null;\n\n  /**\n   * Called when the image starts to load.\n   */\n  onLoadStart?: () => void;\n\n  /**\n   * Called when the image load completes successfully.\n   */\n  onLoad?: (event: ImageLoadEventData) => void;\n\n  /**\n   * Called when the image is loading. Can be called multiple times before the image has finished loading.\n   * The event object provides details on how many bytes were loaded so far and what's the expected total size.\n   */\n  onProgress?: (event: ImageProgressEventData) => void;\n\n  /**\n   * Called on an image fetching error.\n   */\n  onError?: (event: ImageErrorEventData) => void;\n\n  /**\n   * Called when the image load either succeeds or fails.\n   */\n  onLoadEnd?: () => void;\n\n  // DEPRECATED\n\n  /**\n   * @deprecated Provides compatibility for [`defaultSource` from React Native Image](https://reactnative.dev/docs/image#defaultsource).\n   * Use [`placeholder`](#placeholder) prop instead.\n   */\n  defaultSource?: ImageSource | null;\n\n  /**\n   * @deprecated Provides compatibility for [`loadingIndicatorSource` from React Native Image](https://reactnative.dev/docs/image#loadingindicatorsource).\n   * Use [`placeholder`](#placeholder) prop instead.\n   */\n  loadingIndicatorSource?: ImageSource | null;\n\n  /**\n   * @deprecated Provides compatibility for [`resizeMode` from React Native Image](https://reactnative.dev/docs/image#resizemode).\n   * Note that `\"repeat\"` option is not supported at all.\n   * Use the more powerful [`contentFit`](#contentfit) and [`contentPosition`](#contentposition) props instead.\n   */\n  resizeMode?: 'cover' | 'contain' | 'stretch' | 'repeat' | 'center';\n\n  /**\n   * @deprecated Provides compatibility for [`fadeDuration` from React Native Image](https://reactnative.dev/docs/image#fadeduration-android).\n   * Instead use [`transition`](#transition) with the provided duration.\n   */\n  fadeDuration?: number;\n\n  /**\n   * Whether this View should be focusable with a non-touch input device and receive focus with a hardware keyboard.\n   * @default false\n   * @platform android\n   */\n  focusable?: boolean;\n\n  /**\n   * When true, indicates that the view is an accessibility element.\n   * When a view is an accessibility element, it groups its children into a single selectable component.\n   *\n   * On Android, the `accessible` property will be translated into the native `isScreenReaderFocusable`,\n   * so it's only affecting the screen readers behaviour.\n   * @default false\n   * @platform android\n   * @platform ios\n   */\n  accessible?: boolean;\n\n  /**\n   * The text that's read by the screen reader when the user interacts with the image. Sets the the `alt` tag on web which is used for web crawlers and link traversal.\n   * @default undefined\n   */\n  accessibilityLabel?: string;\n\n  /**\n   * The text that's read by the screen reader when the user interacts with the image. Sets the the `alt` tag on web which is used for web crawlers and link traversal. Is an alias for `accessibilityLabel`.\n   *\n   * @alias accessibilityLabel\n   * @default undefined\n   */\n  alt?: string;\n\n  /**\n   * Enables Live Text interaction with the image. Check official [Apple documentation](https://developer.apple.com/documentation/visionkit/enabling_live_text_interactions_with_images) for more details.\n   * @default false\n   * @platform ios 16.0+\n   */\n  enableLiveTextInteraction?: boolean;\n\n  /**\n   * Whether the image should be downscaled to match the size of the view container.\n   * Turning off this functionality could negatively impact the application's performance, particularly when working with large assets.\n   * However, it would result in smoother image resizing, and end-users would always have access to the highest possible asset quality.\n   *\n   * Downscaling is never used when the `contentFit` prop is set to `none` or `fill`.\n   * @default true\n   * @platform android\n   */\n  allowDownscaling?: boolean;\n}\n\n/**\n * It narrows down some props to types expected by the native/web side.\n * @hidden\n */\nexport interface ImageNativeProps extends ImageProps {\n  style?: RNImageStyle;\n  source?: ImageSource[];\n  placeholder?: ImageSource[];\n  contentPosition?: ImageContentPositionObject;\n  transition?: ImageTransition | null;\n}\n\n/**\n * A value that represents the relative position of a single axis.\n *\n * If `number`, it is a distance in points (logical pixels) from the respective edge.\\\n * If `string`, it must be a percentage value where `'100%'` is the difference in size between the container and the image along the respective axis,\n * or `'center'` which is an alias for `'50%'` that is the default value. You can read more regarding percentages on the MDN docs for\n * [`background-position`](https://developer.mozilla.org/en-US/docs/Web/CSS/background-position#regarding_percentages) that describes this concept well.\n */\nexport type ImageContentPositionValue = number | string | `${number}%` | `${number}` | 'center';\n\n// eslint-disable\n// prettier-ignore\n/**\n * Specifies the position of the image inside its container. One value controls the x-axis and the second value controls the y-axis.\n *\n * Additionally, it supports stringified shorthand form that specifies the edges to which to align the image content:\\\n * `'center'`, `'top'`, `'right'`, `'bottom'`, `'left'`, `'top center'`, `'top right'`, `'top left'`, `'right center'`, `'right top'`,\n * `'right bottom'`, `'bottom center'`, `'bottom right'`, `'bottom left'`, `'left center'`, `'left top'`, `'left bottom'`.\\\n * If only one keyword is provided, then the other dimension is set to `'center'` (`'50%'`), so the image is placed in the middle of the specified edge.\\\n * As an example, `'top right'` is the same as `{ top: 0, right: 0 }` and `'bottom'` is the same as `{ bottom: 0, left: '50%' }`.\n */\nexport type ImageContentPosition =\n  /**\n   * An object that positions the image relatively to the top-right corner.\n   */\n  {\n    top?: ImageContentPositionValue;\n    right?: ImageContentPositionValue;\n  } |\n  /**\n   * An object that positions the image relatively to the top-left corner.\n   */\n  {\n    top?: ImageContentPositionValue;\n    left?: ImageContentPositionValue;\n  } |\n  /**\n   * An object that positions the image relatively to the bottom-right corner.\n   */\n  {\n    bottom?: ImageContentPositionValue;\n    right?: ImageContentPositionValue;\n  } |\n  /**\n   * An object that positions the image relatively to the bottom-left corner.\n   */\n  {\n    bottom?: ImageContentPositionValue;\n    left?: ImageContentPositionValue;\n  }\n  | ImageContentPositionString;\n// eslint-enable\n\nexport interface ImageBackgroundProps extends Omit<ImageProps, 'style'> {\n  /** The style of the image container */\n  style?: StyleProp<ViewStyle> | undefined;\n  /** Style object for the image */\n  imageStyle?: StyleProp<RNImageStyle> | undefined;\n  /** @hidden */\n  children?: React.ReactNode | undefined;\n}\n\n/**\n * @hidden It's described as part of {@link ImageContentPosition}.\n */\nexport type ImageContentPositionString =\n  | 'center'\n  | 'top'\n  | 'right'\n  | 'bottom'\n  | 'left'\n  | 'top center'\n  | 'top right'\n  | 'top left'\n  | 'right center'\n  | 'right top'\n  | 'right bottom'\n  | 'bottom center'\n  | 'bottom right'\n  | 'bottom left'\n  | 'left center'\n  | 'left top'\n  | 'left bottom';\n\ntype OnlyObject<T> = T extends object ? T : never;\n\n/**\n * @hidden It's a conditional type that matches only objects of {@link ImageContentPosition}.\n */\nexport type ImageContentPositionObject = OnlyObject<ImageContentPosition>;\n\n/**\n * An object that describes the smooth transition when switching the image source.\n */\nexport type ImageTransition = {\n  /**\n   * The duration of the transition in milliseconds.\n   * @default 0\n   */\n  duration?: number;\n\n  /**\n   * Specifies the speed curve of the transition effect and how intermediate values are calculated.\n   * @default 'ease-in-out'\n   */\n  timing?: 'ease-in-out' | 'ease-in' | 'ease-out' | 'linear';\n\n  /**\n   * An animation effect used for transition.\n   * @default 'cross-dissolve'\n   *\n   * On Android, only `'cross-dissolve'` is supported.\n   * On Web, `'curl-up'` and `'curl-down'` effects are not supported.\n   */\n  effect?:\n    | 'cross-dissolve'\n    | 'flip-from-top'\n    | 'flip-from-right'\n    | 'flip-from-bottom'\n    | 'flip-from-left'\n    | 'curl-up'\n    | 'curl-down'\n    | null;\n};\n\nexport type ImageLoadEventData = {\n  cacheType: 'none' | 'disk' | 'memory';\n  source: {\n    url: string;\n    width: number;\n    height: number;\n    mediaType: string | null;\n  };\n};\n\nexport type ImageProgressEventData = {\n  loaded: number;\n  total: number;\n};\n\nexport type ImageErrorEventData = {\n  error: string;\n};\n"]}

package/build/ImageBackground.d.ts

@@ -0,0 +1,6 @@
+import React from 'react';
+import { ImageBackgroundProps } from './Image.types';
+export declare class ImageBackground extends React.PureComponent<ImageBackgroundProps> {
+    render(): JSX.Element;
+}
+//# sourceMappingURL=ImageBackground.d.ts.map

package/build/ImageBackground.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ImageBackground.d.ts","sourceRoot":"","sources":["../src/ImageBackground.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAI1B,OAAO,EAAE,oBAAoB,EAAE,MAAM,eAAe,CAAC;AAErD,qBAAa,eAAgB,SAAQ,KAAK,CAAC,aAAa,CAAC,oBAAoB,CAAC;IAC5E,MAAM;CAUP"}

package/build/ImageBackground.js

@@ -0,0 +1,12 @@
+import React from 'react';
+import { View, StyleSheet } from 'react-native';
+import { Image } from './Image';
+export class ImageBackground extends React.PureComponent {
+    render() {
+        const { style, imageStyle, children, ...props } = this.props;
+        return (React.createElement(View, { style: style },
+            React.createElement(Image, { ...props, style: [StyleSheet.absoluteFill, imageStyle] }),
+            children));
+    }
+}
+//# sourceMappingURL=ImageBackground.js.map

package/build/ImageBackground.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ImageBackground.js","sourceRoot":"","sources":["../src/ImageBackground.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,IAAI,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;AAEhD,OAAO,EAAE,KAAK,EAAE,MAAM,SAAS,CAAC;AAGhC,MAAM,OAAO,eAAgB,SAAQ,KAAK,CAAC,aAAmC;IAC5E,MAAM;QACJ,MAAM,EAAE,KAAK,EAAE,UAAU,EAAE,QAAQ,EAAE,GAAG,KAAK,EAAE,GAAG,IAAI,CAAC,KAAK,CAAC;QAE7D,OAAO,CACL,oBAAC,IAAI,IAAC,KAAK,EAAE,KAAK;YAChB,oBAAC,KAAK,OAAK,KAAK,EAAE,KAAK,EAAE,CAAC,UAAU,CAAC,YAAY,EAAE,UAAU,CAAC,GAAI;YACjE,QAAQ,CACJ,CACR,CAAC;IACJ,CAAC;CACF","sourcesContent":["import React from 'react';\nimport { View, StyleSheet } from 'react-native';\n\nimport { Image } from './Image';\nimport { ImageBackgroundProps } from './Image.types';\n\nexport class ImageBackground extends React.PureComponent<ImageBackgroundProps> {\n  render() {\n    const { style, imageStyle, children, ...props } = this.props;\n\n    return (\n      <View style={style}>\n        <Image {...props} style={[StyleSheet.absoluteFill, imageStyle]} />\n        {children}\n      </View>\n    );\n  }\n}\n"]}

package/build/index.d.ts

@@ -1,3 +1,4 @@
 export * from './Image';
 export * from './Image.types';
+export * from './ImageBackground';
 //# sourceMappingURL=index.d.ts.map

package/build/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,SAAS,CAAC;AACxB,cAAc,eAAe,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,SAAS,CAAC;AACxB,cAAc,eAAe,CAAC;AAC9B,cAAc,mBAAmB,CAAC"}

package/build/index.js

@@ -1,3 +1,4 @@
 export * from './Image';
 export * from './Image.types';
+export * from './ImageBackground';
 //# sourceMappingURL=index.js.map

package/build/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,SAAS,CAAC;AACxB,cAAc,eAAe,CAAC","sourcesContent":["export * from './Image';\nexport * from './Image.types';\n"]}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,SAAS,CAAC;AACxB,cAAc,eAAe,CAAC;AAC9B,cAAc,mBAAmB,CAAC","sourcesContent":["export * from './Image';\nexport * from './Image.types';\nexport * from './ImageBackground';\n"]}

package/build/web/ImageWrapper.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ImageWrapper.d.ts","sourceRoot":"","sources":["../../src/web/ImageWrapper.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,aAAa,EAAE,cAAc,EAA2B,MAAM,OAAO,CAAC;AAEtF,OAAO,EACL,0BAA0B,EAG1B,WAAW,EACZ,MAAM,gBAAgB,CAAC;AAgDxB,QAAA,MAAM,YAAY;;;2BAeS,eAAe,gBAAgB,EAAE,KAAK,CAAC,KAAK,IAAI;;oBAChC,WAAW,GAAG,IAAI;cAAO,IAAI;kCACtC,IAAI;0BACZ,IAAI;;;;;WAKjB,aAAa;;;;0CA+DzB,CAAC;AACF,eAAe,YAAY,CAAC"}
+{"version":3,"file":"ImageWrapper.d.ts","sourceRoot":"","sources":["../../src/web/ImageWrapper.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,aAAa,EAAE,cAAc,EAA2B,MAAM,OAAO,CAAC;AAEtF,OAAO,EACL,0BAA0B,EAG1B,WAAW,EACZ,MAAM,gBAAgB,CAAC;AAgDxB,QAAA,MAAM,YAAY;;;2BAgBS,eAAe,gBAAgB,EAAE,KAAK,CAAC,KAAK,IAAI;;oBAChC,WAAW,GAAG,IAAI;cAAO,IAAI;kCACtC,IAAI;0BACZ,IAAI;;;;;WAKjB,aAAa;;;;0CAgEzB,CAAC;AACF,eAAe,YAAY,CAAC"}

package/build/web/ImageWrapper.js

@@ -32,7 +32,7 @@ function getObjectPositionFromContentPositionObject(contentPosition) {
 function getFetchPriorityFromImagePriority(priority = 'normal') {
     return priority && ['low', 'high'].includes(priority) ? priority : 'auto';
 }
-const ImageWrapper = React.forwardRef(({ source, events, contentPosition, hashPlaceholderContentPosition, priority, style, hashPlaceholderStyle, className, accessibilityLabel, }, ref) => {
+const ImageWrapper = React.forwardRef(({ source, events, contentPosition, hashPlaceholderContentPosition, priority, style, hashPlaceholderStyle, className, accessibilityLabel, ...props }, ref) => {
     useEffect(() => {
         events?.onMount?.forEach((e) => e?.());
     }, []);
@@ -47,7 +47,7 @@ const ImageWrapper = React.forwardRef(({ source, events, contentPosition, hashPl
     const uri = isHash ? blurhashUri ?? thumbhashUri : source?.uri;
     if (!uri)
         return null;
-    return (React.createElement("img", { ref: ref, alt: accessibilityLabel, className: className, src: uri || undefined, key: source?.uri, style: {
+    return (React.createElement("img", { ref: ref, alt: accessibilityLabel, className: className, src: uri || undefined, key: source?.uri, ...props, style: {
             width: '100%',
             height: '100%',
             position: 'absolute',

package/build/web/ImageWrapper.js.map

@@ -1 +1 @@
-{"version":3,"file":"ImageWrapper.js","sourceRoot":"","sources":["../../src/web/ImageWrapper.tsx"],"names":[],"mappings":"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","sourcesContent":["import React, { CSSProperties, SyntheticEvent, useEffect, Ref, useMemo } from 'react';\n\nimport {\n  ImageContentPositionObject,\n  ImageContentPositionValue,\n  ImageNativeProps,\n  ImageSource,\n} from '../Image.types';\nimport { useBlurhash } from '../utils/blurhash/useBlurhash';\nimport { isBlurhashString, isThumbhashString } from '../utils/resolveSources';\nimport { thumbHashStringToDataURL } from '../utils/thumbhash/thumbhash';\n\nfunction ensureUnit(value: string | number) {\n  const trimmedValue = String(value).trim();\n  if (trimmedValue.endsWith('%')) {\n    return trimmedValue;\n  }\n  return `${trimmedValue}px`;\n}\n\ntype KeysOfUnion<T> = T extends T ? keyof T : never;\n\nfunction getObjectPositionFromContentPositionObject(\n  contentPosition?: ImageContentPositionObject\n): string {\n  const resolvedPosition = { ...contentPosition } as Record<\n    KeysOfUnion<ImageContentPositionObject>,\n    ImageContentPositionValue\n  >;\n  if (!resolvedPosition) {\n    return '50% 50%';\n  }\n  if (resolvedPosition.top == null && resolvedPosition.bottom == null) {\n    resolvedPosition.top = '50%';\n  }\n  if (resolvedPosition.left == null && resolvedPosition.right == null) {\n    resolvedPosition.left = '50%';\n  }\n\n  return (\n    ['top', 'bottom', 'left', 'right']\n      .map((key) => {\n        if (key in resolvedPosition) {\n          return `${key} ${ensureUnit(resolvedPosition[key])}`;\n        }\n        return '';\n      })\n      .join(' ') || '50% 50%'\n  );\n}\n\nfunction getFetchPriorityFromImagePriority(priority: ImageNativeProps['priority'] = 'normal') {\n  return priority && ['low', 'high'].includes(priority) ? priority : 'auto';\n}\n\nconst ImageWrapper = React.forwardRef(\n  (\n    {\n      source,\n      events,\n      contentPosition,\n      hashPlaceholderContentPosition,\n      priority,\n      style,\n      hashPlaceholderStyle,\n      className,\n      accessibilityLabel,\n    }: {\n      source?: ImageSource | null;\n      events?: {\n        onLoad?: (((event: SyntheticEvent<HTMLImageElement, Event>) => void) | undefined | null)[];\n        onError?: ((({ source }: { source: ImageSource | null }) => void) | undefined | null)[];\n        onTransitionEnd?: ((() => void) | undefined | null)[];\n        onMount?: ((() => void) | undefined | null)[];\n      };\n      contentPosition?: ImageContentPositionObject;\n      hashPlaceholderContentPosition?: ImageContentPositionObject;\n      priority?: string | null;\n      style: CSSProperties;\n      hashPlaceholderStyle?: CSSProperties;\n      className?: string;\n      accessibilityLabel?: string;\n    },\n    ref: Ref<HTMLImageElement>\n  ) => {\n    useEffect(() => {\n      events?.onMount?.forEach((e) => e?.());\n    }, []);\n    const isBlurhash = isBlurhashString(source?.uri || '');\n    const isThumbhash = isThumbhashString(source?.uri || '');\n    const isHash = isBlurhash || isThumbhash;\n\n    // Thumbhash uri always has to start with 'thumbhash:/'\n    const thumbhash = source?.uri?.replace(/thumbhash:\\//, '');\n    const thumbhashUri = useMemo(\n      () => (isThumbhash ? thumbHashStringToDataURL(thumbhash ?? '') : null),\n      [thumbhash]\n    );\n\n    const blurhashUri = useBlurhash(isBlurhash ? source?.uri : null, source?.width, source?.height);\n    const objectPosition = getObjectPositionFromContentPositionObject(\n      isHash ? hashPlaceholderContentPosition : contentPosition\n    );\n\n    const uri = isHash ? blurhashUri ?? thumbhashUri : source?.uri;\n    if (!uri) return null;\n    return (\n      <img\n        ref={ref}\n        alt={accessibilityLabel}\n        className={className}\n        src={uri || undefined}\n        key={source?.uri}\n        style={{\n          width: '100%',\n          height: '100%',\n          position: 'absolute',\n          left: 0,\n          right: 0,\n          objectPosition,\n          ...style,\n          ...(isHash ? hashPlaceholderStyle : {}),\n        }}\n        // @ts-ignore\n        // eslint-disable-next-line react/no-unknown-property\n        fetchpriority={getFetchPriorityFromImagePriority(priority || 'normal')}\n        onLoad={(event) => {\n          if (typeof window !== 'undefined') {\n            // this ensures the animation will run, since the starting class is applied at least 1 frame before the target class set in the onLoad event callback\n            window.requestAnimationFrame(() => {\n              events?.onLoad?.forEach((e) => e?.(event));\n            });\n          } else {\n            events?.onLoad?.forEach((e) => e?.(event));\n          }\n        }}\n        onTransitionEnd={() => events?.onTransitionEnd?.forEach((e) => e?.())}\n        onError={() => events?.onError?.forEach((e) => e?.({ source: source || null }))}\n      />\n    );\n  }\n);\nexport default ImageWrapper;\n"]}
+{"version":3,"file":"ImageWrapper.js","sourceRoot":"","sources":["../../src/web/ImageWrapper.tsx"],"names":[],"mappings":"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","sourcesContent":["import React, { CSSProperties, SyntheticEvent, useEffect, Ref, useMemo } from 'react';\n\nimport {\n  ImageContentPositionObject,\n  ImageContentPositionValue,\n  ImageNativeProps,\n  ImageSource,\n} from '../Image.types';\nimport { useBlurhash } from '../utils/blurhash/useBlurhash';\nimport { isBlurhashString, isThumbhashString } from '../utils/resolveSources';\nimport { thumbHashStringToDataURL } from '../utils/thumbhash/thumbhash';\n\nfunction ensureUnit(value: string | number) {\n  const trimmedValue = String(value).trim();\n  if (trimmedValue.endsWith('%')) {\n    return trimmedValue;\n  }\n  return `${trimmedValue}px`;\n}\n\ntype KeysOfUnion<T> = T extends T ? keyof T : never;\n\nfunction getObjectPositionFromContentPositionObject(\n  contentPosition?: ImageContentPositionObject\n): string {\n  const resolvedPosition = { ...contentPosition } as Record<\n    KeysOfUnion<ImageContentPositionObject>,\n    ImageContentPositionValue\n  >;\n  if (!resolvedPosition) {\n    return '50% 50%';\n  }\n  if (resolvedPosition.top == null && resolvedPosition.bottom == null) {\n    resolvedPosition.top = '50%';\n  }\n  if (resolvedPosition.left == null && resolvedPosition.right == null) {\n    resolvedPosition.left = '50%';\n  }\n\n  return (\n    ['top', 'bottom', 'left', 'right']\n      .map((key) => {\n        if (key in resolvedPosition) {\n          return `${key} ${ensureUnit(resolvedPosition[key])}`;\n        }\n        return '';\n      })\n      .join(' ') || '50% 50%'\n  );\n}\n\nfunction getFetchPriorityFromImagePriority(priority: ImageNativeProps['priority'] = 'normal') {\n  return priority && ['low', 'high'].includes(priority) ? priority : 'auto';\n}\n\nconst ImageWrapper = React.forwardRef(\n  (\n    {\n      source,\n      events,\n      contentPosition,\n      hashPlaceholderContentPosition,\n      priority,\n      style,\n      hashPlaceholderStyle,\n      className,\n      accessibilityLabel,\n      ...props\n    }: {\n      source?: ImageSource | null;\n      events?: {\n        onLoad?: (((event: SyntheticEvent<HTMLImageElement, Event>) => void) | undefined | null)[];\n        onError?: ((({ source }: { source: ImageSource | null }) => void) | undefined | null)[];\n        onTransitionEnd?: ((() => void) | undefined | null)[];\n        onMount?: ((() => void) | undefined | null)[];\n      };\n      contentPosition?: ImageContentPositionObject;\n      hashPlaceholderContentPosition?: ImageContentPositionObject;\n      priority?: string | null;\n      style: CSSProperties;\n      hashPlaceholderStyle?: CSSProperties;\n      className?: string;\n      accessibilityLabel?: string;\n    },\n    ref: Ref<HTMLImageElement>\n  ) => {\n    useEffect(() => {\n      events?.onMount?.forEach((e) => e?.());\n    }, []);\n    const isBlurhash = isBlurhashString(source?.uri || '');\n    const isThumbhash = isThumbhashString(source?.uri || '');\n    const isHash = isBlurhash || isThumbhash;\n\n    // Thumbhash uri always has to start with 'thumbhash:/'\n    const thumbhash = source?.uri?.replace(/thumbhash:\\//, '');\n    const thumbhashUri = useMemo(\n      () => (isThumbhash ? thumbHashStringToDataURL(thumbhash ?? '') : null),\n      [thumbhash]\n    );\n\n    const blurhashUri = useBlurhash(isBlurhash ? source?.uri : null, source?.width, source?.height);\n    const objectPosition = getObjectPositionFromContentPositionObject(\n      isHash ? hashPlaceholderContentPosition : contentPosition\n    );\n\n    const uri = isHash ? blurhashUri ?? thumbhashUri : source?.uri;\n    if (!uri) return null;\n    return (\n      <img\n        ref={ref}\n        alt={accessibilityLabel}\n        className={className}\n        src={uri || undefined}\n        key={source?.uri}\n        {...props}\n        style={{\n          width: '100%',\n          height: '100%',\n          position: 'absolute',\n          left: 0,\n          right: 0,\n          objectPosition,\n          ...style,\n          ...(isHash ? hashPlaceholderStyle : {}),\n        }}\n        // @ts-ignore\n        // eslint-disable-next-line react/no-unknown-property\n        fetchpriority={getFetchPriorityFromImagePriority(priority || 'normal')}\n        onLoad={(event) => {\n          if (typeof window !== 'undefined') {\n            // this ensures the animation will run, since the starting class is applied at least 1 frame before the target class set in the onLoad event callback\n            window.requestAnimationFrame(() => {\n              events?.onLoad?.forEach((e) => e?.(event));\n            });\n          } else {\n            events?.onLoad?.forEach((e) => e?.(event));\n          }\n        }}\n        onTransitionEnd={() => events?.onTransitionEnd?.forEach((e) => e?.())}\n        onError={() => events?.onError?.forEach((e) => e?.({ source: source || null }))}\n      />\n    );\n  }\n);\nexport default ImageWrapper;\n"]}

package/ios/ExpoImage.podspec

@@ -16,10 +16,10 @@ Pod::Spec.new do |s|
   s.static_framework = true
 
   s.dependency 'ExpoModulesCore'
-  s.dependency 'SDWebImage', '~> 5.15.0'
-  s.dependency 'SDWebImageWebPCoder', '~> 0.9.1'
-  s.dependency 'SDWebImageAVIFCoder', '~> 0.9.4'
-  s.dependency 'SDWebImageSVGCoder', '~> 1.6.1'
+  s.dependency 'SDWebImage', '~> 5.15.8'
+  s.dependency 'SDWebImageWebPCoder', '~> 0.11.0'
+  s.dependency 'SDWebImageAVIFCoder', '~> 0.10.0'
+  s.dependency 'SDWebImageSVGCoder', '~> 1.7.0'
 
   # Swift/Objective-C compatibility
   s.pod_target_xcconfig = {

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "expo-image",
   "title": "Expo Image",
-  "version": "1.2.2",
+  "version": "1.3.0",
   "description": "A cross-platform, performant image component for React Native and Expo with Web support",
   "main": "build/index.js",
   "types": "build/index.d.ts",
@@ -33,5 +33,5 @@
   "peerDependencies": {
     "expo": "*"
   },
-  "gitHead": "e7ef246d8e7c274cc6ce67eee4d0d764bd3f042f"
+  "gitHead": "3ccd2edee9cbfed217557675cb50f0ba5e55a9e4"
 }

package/src/ExpoImage.web.tsx

@@ -8,6 +8,24 @@ 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;
@@ -73,6 +91,7 @@ export default function ExpoImage({
           (className, style) =>
             (
               <ImageWrapper
+                {...props}
                 source={placeholder?.[0]}
                 style={{
                   objectFit: imagePlaceholderContentFit,
@@ -102,6 +121,7 @@ export default function ExpoImage({
       (className, style) =>
         (
           <ImageWrapper
+            {...props}
             source={selectedSource || placeholder?.[0]}
             events={{
               onError: [onErrorAdapter(onError), onLoadEnd, onErrorInner],
@@ -123,19 +143,19 @@ export default function ExpoImage({
           />
         ),
   ];
-
   return (
     <div
       ref={containerRef}
       className="expo-image-container"
+      // @ts-expect-error
       style={{
         aspectRatio: String(aspectRatio),
         backgroundColor: backgroundColor?.toString(),
         transform: transform?.toString(),
         borderColor: borderColor?.toString(),
-        ...style,
-        overflow: 'hidden',
         position: 'relative',
+        overflow: 'hidden',
+        ...style,
       }}>
       <AnimationManager transition={transition} recyclingKey={recyclingKey} initial={initialNode}>
         {currentNode}

package/src/Image.tsx

@@ -20,8 +20,11 @@ export class Image extends React.PureComponent<ImageProps> {
 
   /**
    * 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();
@@ -29,8 +32,11 @@ export class Image extends React.PureComponent<ImageProps> {
 
   /**
    * 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();

package/src/Image.types.ts

@@ -1,4 +1,4 @@
-import { ImageStyle as RNImageStyle, ViewProps } from 'react-native';
+import { ImageStyle as RNImageStyle, ViewProps, StyleProp, ViewStyle } from 'react-native';
 
 export type ImageSource = {
   /**
@@ -61,7 +61,7 @@ export type ImageContentFit = 'cover' | 'contain' | 'fill' | 'none' | 'scale-dow
  */
 export interface ImageProps extends ViewProps {
   /** @hidden */
-  style?: RNImageStyle | RNImageStyle[];
+  style?: StyleProp<RNImageStyle>;
 
   /**
    * The image source, either a remote URL, a local file resource or a number that is the result of the `require()` function.
@@ -250,9 +250,6 @@ export interface ImageProps extends ViewProps {
   /**
    * The text that's read by the screen reader when the user interacts with the image. Sets the the `alt` tag on web which is used for web crawlers and link traversal.
    * @default undefined
-   * @platform android
-   * @platform ios
-   * @platform web
    */
   accessibilityLabel?: string;
 
@@ -261,9 +258,6 @@ export interface ImageProps extends ViewProps {
    *
    * @alias accessibilityLabel
    * @default undefined
-   * @platform android
-   * @platform ios
-   * @platform web
    */
   alt?: string;
 
@@ -351,6 +345,15 @@ export type ImageContentPosition =
   | ImageContentPositionString;
 // eslint-enable
 
+export interface ImageBackgroundProps extends Omit<ImageProps, 'style'> {
+  /** The style of the image container */
+  style?: StyleProp<ViewStyle> | undefined;
+  /** Style object for the image */
+  imageStyle?: StyleProp<RNImageStyle> | undefined;
+  /** @hidden */
+  children?: React.ReactNode | undefined;
+}
+
 /**
  * @hidden It's described as part of {@link ImageContentPosition}.
  */

package/src/ImageBackground.tsx

@@ -0,0 +1,18 @@
+import React from 'react';
+import { View, StyleSheet } from 'react-native';
+
+import { Image } from './Image';
+import { ImageBackgroundProps } from './Image.types';
+
+export class ImageBackground extends React.PureComponent<ImageBackgroundProps> {
+  render() {
+    const { style, imageStyle, children, ...props } = this.props;
+
+    return (
+      <View style={style}>
+        <Image {...props} style={[StyleSheet.absoluteFill, imageStyle]} />
+        {children}
+      </View>
+    );
+  }
+}

package/src/index.ts

@@ -1,2 +1,3 @@
 export * from './Image';
 export * from './Image.types';
+export * from './ImageBackground';

package/src/web/ImageWrapper.tsx

@@ -65,6 +65,7 @@ const ImageWrapper = React.forwardRef(
       hashPlaceholderStyle,
       className,
       accessibilityLabel,
+      ...props
     }: {
       source?: ImageSource | null;
       events?: {
@@ -111,6 +112,7 @@ const ImageWrapper = React.forwardRef(
         className={className}
         src={uri || undefined}
         key={source?.uri}
+        {...props}
         style={{
           width: '100%',
           height: '100%',