expo-image 1.3.2 → 1.4.0

package/CHANGELOG.md

@@ -10,13 +10,29 @@
 
 ### 💡 Others
 
-## 1.3.2 — 2023-07-12
+## 1.4.0 — 2023-07-28
+
+### 🎉 New features
+
+- [Web] Add support for `tintColor` prop on web. ([#23434](https://github.com/expo/expo/pull/23434) by [@aleqsio](https://github.com/aleqsio))
+- [Web] Add support for static image responsiveness using `srcset` attributes. ([#22088](https://github.com/expo/expo/pull/22088) by [@aleqsio](https://github.com/aleqsio))
+
+### 🐛 Bug fixes
+
+- Fixed placeholders aren't always replaced by full-size images on Android. ([#23705](https://github.com/expo/expo/pull/23705) by [@lukmccall](https://github.com/lukmccall))
+- Fixed the image components rendering incorrect assets when the Proguard is enabled on Android. ([#23704](https://github.com/expo/expo/pull/23704) by [@lukmccall](https://github.com/lukmccall))
+
+### 💡 Others
+
+- [Web] Refactored and split some functions for better readability. ([#23465](https://github.com/expo/expo/pull/23465) by [@aleqsio](https://github.com/aleqsio))
+
+## 1.3.2 - 2023-07-12
 
 ### 🐛 Bug fixes
 
 - [iOS] Fixed `tintColor` prop not working for SVGs. ([#23418](https://github.com/expo/expo/pull/23418) by [@tsapeta](https://github.com/tsapeta))
 
-## 1.3.1 — 2023-06-29
+## 1.3.1 - 2023-06-29
 
 ### 🐛 Bug fixes
 

package/android/build.gradle

@@ -50,7 +50,8 @@ android {
     minSdkVersion safeExtGet("minSdkVersion", 21)
     targetSdkVersion safeExtGet("targetSdkVersion", 33)
     versionCode 1
-    versionName "1.3.2"
+    versionName "1.4.0"
+    consumerProguardFiles("proguard-rules.pro")
   }
   lintOptions {
     abortOnError false

package/android/proguard-rules.pro

@@ -1,25 +1,28 @@
 # https://bumptech.github.io/glide/doc/download-setup.html#proguard
 
--keep public class * implements com.bumptech.glide.module.LibraryGlideModule
+-keep public class * extends com.bumptech.glide.module.LibraryGlideModule
 -keep public class * implements com.bumptech.glide.module.GlideModule
--keep public class * extends com.bumptech.glide.module.AppGlideModule
+-keep class * extends com.bumptech.glide.module.AppGlideModule {
+ <init>(...);
+}
 -keep public enum com.bumptech.glide.load.ImageHeaderParser$** {
   **[] $VALUES;
   public *;
 }
+-keep class com.bumptech.glide.load.data.ParcelFileDescriptorRewinder$InternalRewinder {
+  *** rewind();
+}
+
+-keep public class com.bumptech.glide.request.ThumbnailRequestCoordinator {
+  *;
+}
 
 -dontwarn com.bumptech.glide.load.resource.bitmap.VideoDecoder
 
 # https://bumptech.github.io/glide/doc/configuration.html#applications
 
--keep public class * extends com.bumptech.glide.module.AppGlideModule
--keep public class expo.modules.image.svg.SVGModule
 -keep class com.bumptech.glide.GeneratedAppGlideModuleImpl
 
 -keep public class com.bumptech.glide.integration.webp.WebpImage { *; }
 -keep public class com.bumptech.glide.integration.webp.WebpFrame { *; }
 -keep public class com.bumptech.glide.integration.webp.WebpBitmapFactory { *; }
-
--keep public class com.bumptech.glide.requestThumbnailRequestCoordinator {
-  *;
-}

package/android/src/main/java/expo/modules/image/ExpoImageViewWrapper.kt

@@ -32,7 +32,6 @@ import expo.modules.image.records.ImageLoadEvent
 import expo.modules.image.records.ImageProgressEvent
 import expo.modules.image.records.ImageTransition
 import expo.modules.image.records.SourceMap
-import expo.modules.image.svg.SVGSoftwareLayerSetter
 import expo.modules.kotlin.AppContext
 import expo.modules.kotlin.viewevent.EventDispatcher
 import expo.modules.kotlin.views.ExpoView
@@ -316,7 +315,12 @@ class ExpoImageViewWrapper(context: Context, appContext: AppContext) : ExpoView(
 
         firstView
           .recycleView()
-          ?.clear(requestManager)
+          ?.apply {
+            // The current target is already bound to the view. We don't want to cancel it in that case.
+            if (this != target) {
+              clear(requestManager)
+            }
+          }
 
         configureView(firstView, target, resource, isPlaceholder)
         if (transitionDuration > 0) {
@@ -643,7 +647,6 @@ class ExpoImageViewWrapper(context: Context, appContext: AppContext) : ExpoView(
       return cachedRequestManager
     }
 
-    private fun createNewRequestManager(activity: Activity): RequestManager =
-      Glide.with(activity).addDefaultRequestListener(SVGSoftwareLayerSetter())
+    private fun createNewRequestManager(activity: Activity): RequestManager = Glide.with(activity)
   }
 }

package/android/src/main/java/expo/modules/image/ImageViewWrapperTarget.kt

@@ -73,7 +73,7 @@ class ImageViewWrapperTarget(
     val isPlaceholder = if (request is ThumbnailRequestCoordinator) {
       (request as? ThumbnailRequestCoordinator)
         ?.getPrivateFullRequest()
-        ?.isComplete != true
+        ?.isComplete == false
     } else {
       false
     }

package/android/src/main/java/expo/modules/image/ThumbnailRequestCoordinatorExtension.kt

@@ -1,18 +1,21 @@
 package expo.modules.image
 
+import android.util.Log
 import com.bumptech.glide.request.Request
 import com.bumptech.glide.request.ThumbnailRequestCoordinator
 
 fun ThumbnailRequestCoordinator.getPrivateFullRequest(): Request? {
-  return getPrivateRequest("full")
+  return getPrivateField("full")
 }
 
-private fun ThumbnailRequestCoordinator.getPrivateRequest(name: String): Request? {
+private fun <T> ThumbnailRequestCoordinator.getPrivateField(name: String): T? {
   return try {
-    val filed = this.javaClass.getDeclaredField(name)
-    filed.isAccessible = true
-    filed.get(this) as Request
+    val field = this.javaClass.getDeclaredField(name)
+    field.isAccessible = true
+    @Suppress("UNCHECKED_CAST")
+    field.get(this) as T
   } catch (e: Throwable) {
+    Log.e("ExpoImage", "Couldn't receive the `$name` field", e)
     null
   }
 }

package/android/src/main/java/expo/modules/image/svg/SVGDrawableTranscoder.kt

@@ -2,6 +2,7 @@ package expo.modules.image.svg
 
 import android.graphics.Picture
 import android.graphics.drawable.Drawable
+import android.graphics.drawable.PictureDrawable
 import com.bumptech.glide.load.Options
 import com.bumptech.glide.load.engine.Resource
 import com.bumptech.glide.load.resource.SimpleResource
@@ -17,7 +18,7 @@ import com.caverock.androidsvg.SVG
 class SVGDrawableTranscoder : ResourceTranscoder<SVG?, Drawable> {
   override fun transcode(toTranscode: Resource<SVG?>, options: Options): Resource<Drawable> {
     val picture = toTranscode.get().renderToPicture()
-    val drawable: Drawable = SVGDrawable(picture)
+    val drawable: Drawable = PictureDrawable(picture)
     return SimpleResource(drawable)
   }
 }

package/build/ExpoImage.web.d.ts

@@ -4,5 +4,5 @@ export declare const ExpoImageModule: {
     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;
+export default function ExpoImage({ source, placeholder, contentFit, contentPosition, placeholderContentFit, onLoad, transition, onError, responsivePolicy, onLoadEnd, priority, blurRadius, recyclingKey, style, ...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;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"}
+{"version":3,"file":"ExpoImage.web.d.ts","sourceRoot":"","sources":["../src/ExpoImage.web.tsx"],"names":[],"mappings":"AAGA,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;AA+BF,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,KAAK,EACL,GAAG,KAAK,EACT,EAAE,gBAAgB,eAgFlB"}

package/build/ExpoImage.web.js

@@ -1,7 +1,8 @@
 import React from 'react';
+import { View } from 'react-native-web';
 import AnimationManager from './web/AnimationManager';
 import ImageWrapper from './web/ImageWrapper';
-import loadStyle from './web/style';
+import loadStyle from './web/imageStyles';
 import useSourceSelection from './web/useSourceSelection';
 loadStyle();
 export const ExpoImageModule = {
@@ -40,12 +41,12 @@ function onErrorAdapter(onError) {
         });
     };
 }
+// Used for some transitions to mimic native animations
 const setCssVariables = (element, size) => {
     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, onLoad, transition, onError, responsivePolicy, onLoadEnd, priority, blurRadius, recyclingKey, ...props }) {
-    const { aspectRatio, backgroundColor, transform, borderColor, ...style } = props.style ?? {};
+export default function ExpoImage({ source, placeholder, contentFit, contentPosition, placeholderContentFit, onLoad, transition, onError, responsivePolicy, onLoadEnd, priority, blurRadius, recyclingKey, style, ...props }) {
     const imagePlaceholderContentFit = placeholderContentFit || 'scale-down';
     const blurhashStyle = {
         objectFit: placeholderContentFit || contentFit,
@@ -80,17 +81,7 @@ 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", 
-        // @ts-expect-error
-        style: {
-            aspectRatio: String(aspectRatio),
-            backgroundColor: backgroundColor?.toString(),
-            transform: transform?.toString(),
-            borderColor: borderColor?.toString(),
-            position: 'relative',
-            overflow: 'hidden',
-            ...style,
-        } },
+    return (React.createElement(View, { ref: containerRef, dataSet: { expoimage: true }, style: [{ overflow: 'hidden' }, style] },
         React.createElement(AnimationManager, { transition: transition, recyclingKey: recyclingKey, initial: initialNode }, currentNode)));
 }
 //# sourceMappingURL=ExpoImage.web.js.map

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\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"]}
+{"version":3,"file":"ExpoImage.web.js","sourceRoot":"","sources":["../src/ExpoImage.web.tsx"],"names":[],"mappings":"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","sourcesContent":["import React from 'react';\nimport { View } from 'react-native-web';\n\nimport { ImageNativeProps, ImageSource, ImageLoadEventData } from './Image.types';\nimport AnimationManager, { AnimationManagerNode } from './web/AnimationManager';\nimport ImageWrapper from './web/ImageWrapper';\nimport loadStyle from './web/imageStyles';\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\n// Used for some transitions to mimic native animations\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  style,\n  ...props\n}: ImageNativeProps) {\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    <View ref={containerRef} dataSet={{ expoimage: true }} style={[{ overflow: 'hidden' }, style]}>\n      <AnimationManager transition={transition} recyclingKey={recyclingKey} initial={initialNode}>\n        {currentNode}\n      </AnimationManager>\n    </View>\n  );\n}\n"]}

package/build/Image.types.d.ts

@@ -38,6 +38,14 @@ export type ImageSource = {
      * If not provided, the `uri` is used also as the cache key.
      */
     cacheKey?: string;
+    /**
+     * The max width of the viewport for which this source should be selected.
+     * Has no effect if `source` prop is not an array or has only 1 element.
+     * Has no effect if `responsivePolicy` is not set to `static`.
+     * Ignored if `blurhash` or `thumbhash` is provided (image hashes are never selected if passed in an array).
+     * @platform web
+     */
+    webMaxViewportWidth?: number;
 };
 /**
  * @hidden
@@ -113,8 +121,6 @@ export interface ImageProps extends ViewProps {
      * The color is applied to every non-transparent pixel, causing the image’s shape to adopt that color.
      * This effect is not applied to placeholders.
      * @default null
-     * @platform android
-     * @platform ios
      */
     tintColor?: string | null;
     /**
@@ -140,12 +146,21 @@ export interface ImageProps extends ViewProps {
      */
     cachePolicy?: 'none' | 'disk' | 'memory' | 'memory-disk' | /** @hidden */ null;
     /**
-     * Determines whether to choose image source based on container size only on mount or on every resize.
-     * Use `initial` to improve performance.
-     * @default "live"
+     * Controls the selection of the image source based on the container or viewport size on the web.
+     *
+     * If set to `'static'`, the browser selects the correct source based on user's viewport width. Works with static rendering.
+     * Make sure to set the `'webMaxViewportWidth'` property on each source for best results.
+     * For example, if an image occupies 1/3 of the screen width, set the `'webMaxViewportWidth'` to 3x the image width.
+     * The source with the largest `'webMaxViewportWidth'` is used even for larger viewports.
+     *
+     * If set to `'initial'`, the component will select the correct source during mount based on container size. Does not work with static rendering.
+     *
+     * If set to `'live'`, the component will select the correct source on every resize based on container size. Does not work with static rendering.
+     *
+     * @default 'static'
      * @platform web
      */
-    responsivePolicy?: 'live' | 'initial';
+    responsivePolicy?: 'live' | 'initial' | 'static';
     /**
      * Changing this prop resets the image view content to blank or a placeholder before loading and rendering the final image.
      * This is especially useful for any kinds of recycling views like [FlashList](https://github.com/shopify/flash-list)

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, 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"]}
+{"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   * The max width of the viewport for which this source should be selected.\n   * Has no effect if `source` prop is not an array or has only 1 element.\n   * Has no effect if `responsivePolicy` is not set to `static`.\n   * Ignored if `blurhash` or `thumbhash` is provided (image hashes are never selected if passed in an array).\n   * @platform web\n   */\n  webMaxViewportWidth?: number;\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   */\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   * Controls the selection of the image source based on the container or viewport size on the web.\n   *\n   * If set to `'static'`, the browser selects the correct source based on user's viewport width. Works with static rendering.\n   * Make sure to set the `'webMaxViewportWidth'` property on each source for best results.\n   * For example, if an image occupies 1/3 of the screen width, set the `'webMaxViewportWidth'` to 3x the image width.\n   * The source with the largest `'webMaxViewportWidth'` is used even for larger viewports.\n   *\n   * If set to `'initial'`, the component will select the correct source during mount based on container size. Does not work with static rendering.\n   *\n   * If set to `'live'`, the component will select the correct source on every resize based on container size. Does not work with static rendering.\n   *\n   * @default 'static'\n   * @platform web\n   */\n  responsivePolicy?: 'live' | 'initial' | 'static';\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/web/ColorTintFilter.d.ts

@@ -0,0 +1,11 @@
+export declare function getTintColorStyle(tintColor?: string | null): {
+    filter?: undefined;
+} | {
+    filter: string;
+};
+type TintColorFilterProps = {
+    tintColor?: string | null;
+};
+export default function TintColorFilter({ tintColor }: TintColorFilterProps): JSX.Element | null;
+export {};
+//# sourceMappingURL=ColorTintFilter.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ColorTintFilter.d.ts","sourceRoot":"","sources":["../../src/web/ColorTintFilter.tsx"],"names":[],"mappings":"AAGA,wBAAgB,iBAAiB,CAAC,SAAS,CAAC,EAAE,MAAM,GAAG,IAAI;;;;EAO1D;AAED,KAAK,oBAAoB,GAAG;IAAE,SAAS,CAAC,EAAE,MAAM,GAAG,IAAI,CAAA;CAAE,CAAC;AAE1D,MAAM,CAAC,OAAO,UAAU,eAAe,CAAC,EAAE,SAAS,EAAE,EAAE,oBAAoB,sBAc1E"}

package/build/web/ColorTintFilter.js

@@ -0,0 +1,27 @@
+import React from 'react';
+import { StyleSheet } from 'react-native';
+export function getTintColorStyle(tintColor) {
+    if (!tintColor) {
+        return {};
+    }
+    return {
+        filter: `url(#expo-image-tint-${tintColor})`,
+    };
+}
+export default function TintColorFilter({ tintColor }) {
+    if (!tintColor) {
+        return null;
+    }
+    return (React.createElement("svg", { style: styles.svg },
+        React.createElement("defs", null,
+            React.createElement("filter", { id: `expo-image-tint-${tintColor}`, x: "0", y: "0", width: "0", height: "0" },
+                React.createElement("feFlood", { floodColor: tintColor, floodOpacity: "1", result: "flood" }),
+                React.createElement("feComposite", { in: "flood", in2: "SourceAlpha", operator: "in" })))));
+}
+const styles = StyleSheet.create({
+    svg: {
+        width: 0,
+        height: 0,
+    },
+});
+//# sourceMappingURL=ColorTintFilter.js.map

package/build/web/ColorTintFilter.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ColorTintFilter.js","sourceRoot":"","sources":["../../src/web/ColorTintFilter.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;AAE1C,MAAM,UAAU,iBAAiB,CAAC,SAAyB;IACzD,IAAI,CAAC,SAAS,EAAE;QACd,OAAO,EAAE,CAAC;KACX;IACD,OAAO;QACL,MAAM,EAAE,wBAAwB,SAAS,GAAG;KAC7C,CAAC;AACJ,CAAC;AAID,MAAM,CAAC,OAAO,UAAU,eAAe,CAAC,EAAE,SAAS,EAAwB;IACzE,IAAI,CAAC,SAAS,EAAE;QACd,OAAO,IAAI,CAAC;KACb;IACD,OAAO,CACL,6BAAK,KAAK,EAAE,MAAM,CAAC,GAAG;QACpB;YACE,gCAAQ,EAAE,EAAE,mBAAmB,SAAS,EAAE,EAAE,CAAC,EAAC,GAAG,EAAC,CAAC,EAAC,GAAG,EAAC,KAAK,EAAC,GAAG,EAAC,MAAM,EAAC,GAAG;gBAC1E,iCAAS,UAAU,EAAE,SAAS,EAAE,YAAY,EAAC,GAAG,EAAC,MAAM,EAAC,OAAO,GAAG;gBAClE,qCAAa,EAAE,EAAC,OAAO,EAAC,GAAG,EAAC,aAAa,EAAC,QAAQ,EAAC,IAAI,GAAG,CACnD,CACJ,CACH,CACP,CAAC;AACJ,CAAC;AAED,MAAM,MAAM,GAAG,UAAU,CAAC,MAAM,CAAC;IAC/B,GAAG,EAAE;QACH,KAAK,EAAE,CAAC;QACR,MAAM,EAAE,CAAC;KACV;CACF,CAAC,CAAC","sourcesContent":["import React from 'react';\nimport { StyleSheet } from 'react-native';\n\nexport function getTintColorStyle(tintColor?: string | null) {\n  if (!tintColor) {\n    return {};\n  }\n  return {\n    filter: `url(#expo-image-tint-${tintColor})`,\n  };\n}\n\ntype TintColorFilterProps = { tintColor?: string | null };\n\nexport default function TintColorFilter({ tintColor }: TintColorFilterProps) {\n  if (!tintColor) {\n    return null;\n  }\n  return (\n    <svg style={styles.svg}>\n      <defs>\n        <filter id={`expo-image-tint-${tintColor}`} x=\"0\" y=\"0\" width=\"0\" height=\"0\">\n          <feFlood floodColor={tintColor} floodOpacity=\"1\" result=\"flood\" />\n          <feComposite in=\"flood\" in2=\"SourceAlpha\" operator=\"in\" />\n        </filter>\n      </defs>\n    </svg>\n  );\n}\n\nconst styles = StyleSheet.create({\n  svg: {\n    width: 0,\n    height: 0,\n  },\n});\n"]}

package/build/web/ImageWrapper.d.ts

@@ -1,22 +1,5 @@
-import React, { CSSProperties, SyntheticEvent } from 'react';
-import { ImageContentPositionObject, ImageSource } from '../Image.types';
-declare const ImageWrapper: React.ForwardRefExoticComponent<{
-    source?: ImageSource | null | undefined;
-    events?: {
-        onLoad?: (((event: SyntheticEvent<HTMLImageElement, Event>) => void) | null | undefined)[] | undefined;
-        onError?: ((({ source }: {
-            source: ImageSource | null;
-        }) => void) | null | undefined)[] | undefined;
-        onTransitionEnd?: ((() => void) | null | undefined)[] | undefined;
-        onMount?: ((() => void) | null | undefined)[] | undefined;
-    } | undefined;
-    contentPosition?: ImageContentPositionObject | undefined;
-    hashPlaceholderContentPosition?: ImageContentPositionObject | undefined;
-    priority?: string | null | undefined;
-    style: CSSProperties;
-    hashPlaceholderStyle?: React.CSSProperties | undefined;
-    className?: string | undefined;
-    accessibilityLabel?: string | undefined;
-} & React.RefAttributes<HTMLImageElement>>;
+import React from 'react';
+import { ImageWrapperProps } from './ImageWrapper.types';
+declare const ImageWrapper: React.ForwardRefExoticComponent<ImageWrapperProps & React.RefAttributes<HTMLImageElement>>;
 export default ImageWrapper;
 //# sourceMappingURL=ImageWrapper.d.ts.map

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;;;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"}
+{"version":3,"file":"ImageWrapper.d.ts","sourceRoot":"","sources":["../../src/web/ImageWrapper.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAkC,MAAM,OAAO,CAAC;AAOvD,OAAO,EAAE,iBAAiB,EAAE,MAAM,sBAAsB,CAAC;AAmBzD,QAAA,MAAM,YAAY,4FAqEjB,CAAC;AAEF,eAAe,YAAY,CAAC"}

package/build/web/ImageWrapper.js

@@ -2,37 +2,22 @@ import React, { useEffect, useMemo } from 'react';
 import { useBlurhash } from '../utils/blurhash/useBlurhash';
 import { isBlurhashString, isThumbhashString } from '../utils/resolveSources';
 import { thumbHashStringToDataURL } from '../utils/thumbhash/thumbhash';
-function ensureUnit(value) {
-    const trimmedValue = String(value).trim();
-    if (trimmedValue.endsWith('%')) {
-        return trimmedValue;
-    }
-    return `${trimmedValue}px`;
-}
-function getObjectPositionFromContentPositionObject(contentPosition) {
-    const resolvedPosition = { ...contentPosition };
-    if (!resolvedPosition) {
-        return '50% 50%';
-    }
-    if (resolvedPosition.top == null && resolvedPosition.bottom == null) {
-        resolvedPosition.top = '50%';
-    }
-    if (resolvedPosition.left == null && resolvedPosition.right == null) {
-        resolvedPosition.left = '50%';
-    }
-    return (['top', 'bottom', 'left', 'right']
-        .map((key) => {
-        if (key in resolvedPosition) {
-            return `${key} ${ensureUnit(resolvedPosition[key])}`;
-        }
-        return '';
-    })
-        .join(' ') || '50% 50%');
-}
+import ColorTintFilter, { getTintColorStyle } from './ColorTintFilter';
+import { getImageWrapperEventHandler } from './getImageWrapperEventHandler';
+import { absoluteFilledPosition, getObjectPositionFromContentPositionObject } from './positioning';
 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, ...props }, ref) => {
+function getImgPropsFromSource(source) {
+    if (source && 'srcset' in source) {
+        return {
+            srcSet: source.srcset,
+            sizes: source.sizes,
+        };
+    }
+    return {};
+}
+const ImageWrapper = React.forwardRef(({ source, events, contentPosition, hashPlaceholderContentPosition, priority, style, hashPlaceholderStyle, tintColor, className, accessibilityLabel, ...props }, ref) => {
     useEffect(() => {
         events?.onMount?.forEach((e) => e?.());
     }, []);
@@ -43,33 +28,23 @@ const ImageWrapper = React.forwardRef(({ source, events, contentPosition, hashPl
     const thumbhash = source?.uri?.replace(/thumbhash:\//, '');
     const thumbhashUri = useMemo(() => (isThumbhash ? thumbHashStringToDataURL(thumbhash ?? '') : null), [thumbhash]);
     const blurhashUri = useBlurhash(isBlurhash ? source?.uri : null, source?.width, source?.height);
+    if (!source) {
+        return null;
+    }
     const objectPosition = getObjectPositionFromContentPositionObject(isHash ? hashPlaceholderContentPosition : contentPosition);
     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, ...props, style: {
-            width: '100%',
-            height: '100%',
-            position: 'absolute',
-            left: 0,
-            right: 0,
-            objectPosition,
-            ...style,
-            ...(isHash ? hashPlaceholderStyle : {}),
-        }, 
-        // @ts-ignore
-        // eslint-disable-next-line react/no-unknown-property
-        fetchpriority: getFetchPriorityFromImagePriority(priority || 'normal'), onLoad: (event) => {
-            if (typeof window !== 'undefined') {
-                // 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
-                window.requestAnimationFrame(() => {
-                    events?.onLoad?.forEach((e) => e?.(event));
-                });
-            }
-            else {
-                events?.onLoad?.forEach((e) => e?.(event));
-            }
-        }, onTransitionEnd: () => events?.onTransitionEnd?.forEach((e) => e?.()), onError: () => events?.onError?.forEach((e) => e?.({ source: source || null })) }));
+    return (React.createElement(React.Fragment, null,
+        React.createElement(ColorTintFilter, { tintColor: tintColor }),
+        React.createElement("img", { ref: ref, alt: accessibilityLabel, className: className, src: uri || undefined, key: source?.uri, style: {
+                objectPosition,
+                ...absoluteFilledPosition,
+                ...getTintColorStyle(tintColor),
+                ...(isHash ? hashPlaceholderStyle : {}),
+                ...style,
+            }, 
+            // @ts-ignore
+            // eslint-disable-next-line react/no-unknown-property
+            fetchpriority: getFetchPriorityFromImagePriority(priority || 'normal'), ...getImageWrapperEventHandler(events, source), ...getImgPropsFromSource(source), ...props })));
 });
 export default ImageWrapper;
 //# sourceMappingURL=ImageWrapper.js.map