expo-image 1.4.1 → 1.5.1

package/CHANGELOG.md

@@ -10,6 +10,23 @@
 
 ### 💡 Others
 
+## 1.5.1 — 2023-09-11
+
+### 🐛 Bug fixes
+
+- Suppress "Operation cancelled by user during sending the request" error when the load request is canceled (interrupted) by a new one. ([#24279](https://github.com/expo/expo/pull/24279) by [@tsapeta](https://github.com/tsapeta))
+- Fixed gif and awebp memory leak on Android. ([#24259](https://github.com/expo/expo/pull/24259) by [@jingpeng](https://github.com/jingpeng))
+
+## 1.5.0 — 2023-09-04
+
+### 🎉 New features
+
+- Added support for React Native 0.73. ([#24018](https://github.com/expo/expo/pull/24018) by [@kudo](https://github.com/kudo))
+
+### 💡 Others
+
+- On iOS, bump SDWebImage versions. ([#23858](https://github.com/expo/expo/pull/23858) by [@alanjhughes](https://github.com/alanjhughes))
+
 ## 1.4.1 — 2023-08-02
 
 _This version does not introduce any user-facing changes._

package/README.md

@@ -39,7 +39,7 @@ A cross-platform, performant image component for React Native and Expo.
 
 # Installation
 
-> 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/).
+> Currently `expo-image` can be used only with [development builds](https://docs.expo.dev/develop/development-builds/introduction/), in Expo Go, and bare React Native apps with [configured Expo modules](https://docs.expo.dev/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

@@ -36,13 +36,16 @@ buildscript {
 android {
   compileSdkVersion safeExtGet("compileSdkVersion", 33)
 
-  compileOptions {
-    sourceCompatibility JavaVersion.VERSION_11
-    targetCompatibility JavaVersion.VERSION_11
-  }
+  def agpVersion = com.android.Version.ANDROID_GRADLE_PLUGIN_VERSION
+  if (agpVersion.tokenize('.')[0].toInteger() < 8) {
+    compileOptions {
+      sourceCompatibility JavaVersion.VERSION_11
+      targetCompatibility JavaVersion.VERSION_11
+    }
 
-  kotlinOptions {
-    jvmTarget = JavaVersion.VERSION_11.majorVersion
+    kotlinOptions {
+      jvmTarget = JavaVersion.VERSION_11.majorVersion
+    }
   }
 
   namespace "expo.modules.image"
@@ -50,7 +53,7 @@ android {
     minSdkVersion safeExtGet("minSdkVersion", 21)
     targetSdkVersion safeExtGet("targetSdkVersion", 33)
     versionCode 1
-    versionName "1.4.1"
+    versionName "1.5.1"
     consumerProguardFiles("proguard-rules.pro")
   }
   lintOptions {
@@ -97,7 +100,7 @@ dependencies {
   kapt "com.github.bumptech.glide:compiler:${GLIDE_VERSION}"
   api 'com.caverock:androidsvg-aar:1.4'
 
-  implementation "com.github.penfeizhou.android.animation:glide-plugin:2.24.0"
+  implementation "com.github.penfeizhou.android.animation:glide-plugin:2.28.0"
   implementation "com.github.bumptech.glide:avif-integration:${GLIDE_VERSION}"
 
   api 'com.github.bumptech.glide:okhttp3-integration:4.11.0'

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

@@ -1 +1 @@
-{"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"}
+{"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,eA8ElB"}

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';\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"]}
+{"version":3,"file":"ExpoImage.web.js","sourceRoot":"","sources":["../src/ExpoImage.web.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,IAAI,EAAE,MAAM,kBAAkB,CAAC;AAGxC,OAAO,gBAA0C,MAAM,wBAAwB,CAAC;AAChF,OAAO,YAAY,MAAM,oBAAoB,CAAC;AAC9C,OAAO,SAAS,MAAM,mBAAmB,CAAC;AAC1C,OAAO,kBAAkB,MAAM,0BAA0B,CAAC;AAE1D,SAAS,EAAE,CAAC;AAEZ,MAAM,CAAC,MAAM,eAAe,GAAG;IAC7B,QAAQ,CAAC,IAAuB;QAC9B,MAAM,SAAS,GAAG,KAAK,CAAC,OAAO,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC;QACtD,SAAS,CAAC,OAAO,CAAC,CAAC,GAAG,EAAE,EAAE;YACxB,MAAM,GAAG,GAAG,IAAI,KAAK,EAAE,CAAC;YACxB,GAAG,CAAC,GAAG,GAAG,GAAG,CAAC;QAChB,CAAC,CAAC,CAAC;IACL,CAAC;IAED,KAAK,CAAC,gBAAgB;QACpB,OAAO,KAAK,CAAC;IACf,CAAC;IAED,KAAK,CAAC,cAAc;QAClB,OAAO,KAAK,CAAC;IACf,CAAC;CACF,CAAC;AAEF,SAAS,aAAa,CAAC,MAA4C;IACjE,OAAO,CAAC,KAAoD,EAAE,EAAE;QAC9D,MAAM,MAAM,GAAG,KAAK,CAAC,MAA0B,CAAC;QAChD,MAAM,EAAE,CAAC;YACP,MAAM,EAAE;gBACN,GAAG,EAAE,MAAM,CAAC,UAAU;gBACtB,KAAK,EAAE,MAAM,CAAC,YAAY;gBAC1B,MAAM,EAAE,MAAM,CAAC,aAAa;gBAC5B,SAAS,EAAE,IAAI;aAChB;YACD,SAAS,EAAE,MAAM;SAClB,CAAC,CAAC;IACL,CAAC,CAAC;AACJ,CAAC;AAED,SAAS,cAAc,CAAC,OAA8C;IACpE,OAAO,CAAC,EAAE,MAAM,EAAmC,EAAE,EAAE;QACrD,OAAO,EAAE,CAAC;YACR,KAAK,EAAE,kCAAkC,MAAM,EAAE,GAAG,EAAE;SACvD,CAAC,CAAC;IACL,CAAC,CAAC;AACJ,CAAC;AAED,uDAAuD;AACvD,MAAM,eAAe,GAAG,CAAC,OAAoB,EAAE,IAAa,EAAE,EAAE;IAC9D,OAAO,EAAE,KAAK,CAAC,WAAW,CAAC,oBAAoB,EAAE,GAAG,IAAI,CAAC,KAAK,IAAI,CAAC,CAAC;IACpE,OAAO,EAAE,KAAK,CAAC,WAAW,CAAC,qBAAqB,EAAE,GAAG,IAAI,CAAC,MAAM,IAAI,CAAC,CAAC;AACxE,CAAC,CAAC;AAEF,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,EACS;IACjB,MAAM,0BAA0B,GAAG,qBAAqB,IAAI,YAAY,CAAC;IACzE,MAAM,aAAa,GAAG;QACpB,SAAS,EAAE,qBAAqB,IAAI,UAAU;KAC/C,CAAC;IACF,MAAM,EAAE,YAAY,EAAE,MAAM,EAAE,cAAc,EAAE,GAAG,kBAAkB,CACjE,MAAM,EACN,gBAAgB,EAChB,eAAe,CAChB,CAAC;IAEF,MAAM,uBAAuB,GAC3B,CAAC,YAAY,CAAC,CAAC,CAAC,GAAG,YAAY,IAAI,WAAW,EAAE,CAAC,CAAC,CAAC,EAAE,GAAG,EAAE,CAAC,CAAC,CAAC,WAAW,EAAE,CAAC,CAAC,CAAC,EAAE,GAAG,CAAC,IAAI,EAAE,CAAC;IAE5F,MAAM,WAAW,GAAgC,WAAW,EAAE,CAAC,CAAC,CAAC,EAAE,GAAG;QACpE,CAAC,CAAC;YACE,uBAAuB;YACvB,CAAC,EAAE,mBAAmB,EAAE,EAAE,EAAE,CAC1B,CAAC,SAAS,EAAE,KAAK,EAAE,EAAE,CAAC,CACpB,oBAAC,YAAY,OACP,KAAK,EACT,MAAM,EAAE,WAAW,EAAE,CAAC,CAAC,CAAC,EACxB,KAAK,EAAE;oBACL,SAAS,EAAE,0BAA0B;oBACrC,GAAG,CAAC,UAAU,CAAC,CAAC,CAAC,EAAE,MAAM,EAAE,QAAQ,UAAU,KAAK,EAAE,CAAC,CAAC,CAAC,EAAE,CAAC;oBAC1D,GAAG,KAAK;iBACT,EACD,SAAS,EAAE,SAAS,EACpB,MAAM,EAAE;oBACN,eAAe,EAAE,CAAC,mBAAmB,CAAC;iBACvC,EACD,eAAe,EAAE,EAAE,IAAI,EAAE,KAAK,EAAE,GAAG,EAAE,KAAK,EAAE,EAC5C,8BAA8B,EAAE,eAAe,EAC/C,oBAAoB,EAAE,aAAa,GACnC,CACH;SACJ;QACH,CAAC,CAAC,IAAI,CAAC;IAET,MAAM,uBAAuB,GAC3B,CAAC,YAAY;QACX,CAAC,CAAC,GAAG,YAAY,IAAI,cAAc,EAAE,GAAG,IAAI,WAAW,EAAE,CAAC,CAAC,CAAC,EAAE,GAAG,EAAE;QACnE,CAAC,CAAC,cAAc,EAAE,GAAG,IAAI,WAAW,EAAE,CAAC,CAAC,CAAC,EAAE,GAAG,CAAC,IAAI,EAAE,CAAC;IAE1D,MAAM,WAAW,GAAyB;QACxC,uBAAuB;QACvB,CAAC,EAAE,mBAAmB,EAAE,OAAO,EAAE,OAAO,EAAE,OAAO,EAAE,YAAY,EAAE,EAAE,EAAE,CACnE,CAAC,SAAS,EAAE,KAAK,EAAE,EAAE,CAAC,CACpB,oBAAC,YAAY,OACP,KAAK,EACT,MAAM,EAAE,cAAc,IAAI,WAAW,EAAE,CAAC,CAAC,CAAC,EAC1C,MAAM,EAAE;gBACN,OAAO,EAAE,CAAC,cAAc,CAAC,OAAO,CAAC,EAAE,SAAS,EAAE,YAAY,CAAC;gBAC3D,MAAM,EAAE,CAAC,aAAa,CAAC,MAAM,CAAC,EAAE,SAAS,EAAE,OAAO,CAAC;gBACnD,OAAO,EAAE,CAAC,OAAO,CAAC;gBAClB,eAAe,EAAE,CAAC,mBAAmB,CAAC;aACvC,EACD,KAAK,EAAE;gBACL,SAAS,EAAE,cAAc,CAAC,CAAC,CAAC,UAAU,CAAC,CAAC,CAAC,0BAA0B;gBACnE,GAAG,CAAC,UAAU,CAAC,CAAC,CAAC,EAAE,MAAM,EAAE,QAAQ,UAAU,KAAK,EAAE,CAAC,CAAC,CAAC,EAAE,CAAC;gBAC1D,GAAG,KAAK;aACT,EACD,SAAS,EAAE,SAAS,EACpB,QAAQ,EAAE,QAAQ,EAClB,eAAe,EAAE,cAAc,CAAC,CAAC,CAAC,eAAe,CAAC,CAAC,CAAC,EAAE,GAAG,EAAE,KAAK,EAAE,IAAI,EAAE,KAAK,EAAE,EAC/E,8BAA8B,EAAE,eAAe,EAC/C,oBAAoB,EAAE,aAAa,EACnC,kBAAkB,EAAE,KAAK,CAAC,kBAAkB,GAC5C,CACH;KACJ,CAAC;IACF,OAAO,CACL,oBAAC,IAAI,IAAC,GAAG,EAAE,YAAY,EAAE,OAAO,EAAE,EAAE,SAAS,EAAE,IAAI,EAAE,EAAE,KAAK,EAAE,CAAC,EAAE,QAAQ,EAAE,QAAQ,EAAE,EAAE,KAAK,CAAC;QAC3F,oBAAC,gBAAgB,IAAC,UAAU,EAAE,UAAU,EAAE,YAAY,EAAE,YAAY,EAAE,OAAO,EAAE,WAAW,IACvF,WAAW,CACK,CACd,CACR,CAAC;AACJ,CAAC","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            <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        <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/utils/resolveSources.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"resolveSources.d.ts","sourceRoot":"","sources":["../../src/utils/resolveSources.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,gBAAgB,EAAE,UAAU,EAAe,MAAM,gBAAgB,CAAC;AAI3E,wBAAgB,gBAAgB,CAAC,GAAG,EAAE,MAAM,GAAG,OAAO,CAErD;AAID,wBAAgB,iBAAiB,CAAC,GAAG,EAAE,MAAM,GAAG,OAAO,CAEtD;AA2BD;;GAEG;AACH,wBAAgB,cAAc,CAAC,OAAO,CAAC,EAAE,UAAU,CAAC,QAAQ,CAAC,GAAG,gBAAgB,CAAC,QAAQ,CAAC,CAKzF"}
+{"version":3,"file":"resolveSources.d.ts","sourceRoot":"","sources":["../../src/utils/resolveSources.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,gBAAgB,EAAE,UAAU,EAAe,MAAM,gBAAgB,CAAC;AAE3E,wBAAgB,gBAAgB,CAAC,GAAG,EAAE,MAAM,GAAG,OAAO,CAErD;AAID,wBAAgB,iBAAiB,CAAC,GAAG,EAAE,MAAM,GAAG,OAAO,CAEtD;AA2BD;;GAEG;AACH,wBAAgB,cAAc,CAAC,OAAO,CAAC,EAAE,UAAU,CAAC,QAAQ,CAAC,GAAG,gBAAgB,CAAC,QAAQ,CAAC,CAKzF"}

package/build/utils/resolveSources.js.map

@@ -1 +1 @@
-{"version":3,"file":"resolveSources.js","sourceRoot":"","sources":["../../src/utils/resolveSources.tsx"],"names":[],"mappings":"AACA,OAAO,kBAAkB,MAAM,sBAAsB,CAAC;AACtD,OAAO,EAAE,qBAAqB,EAAE,sBAAsB,EAAE,MAAM,qBAAqB,CAAC;AAEpF,MAAM,UAAU,gBAAgB,CAAC,GAAW;IAC1C,OAAO,yDAAyD,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC;AAC7E,CAAC;AAED,oFAAoF;AACpF,gEAAgE;AAChE,MAAM,UAAU,iBAAiB,CAAC,GAAW;IAC3C,OAAO,GAAG,CAAC,UAAU,CAAC,aAAa,CAAC,CAAC;AACvC,CAAC;AAED,SAAS,aAAa,CAAC,MAA6C;IAClE,IAAI,OAAO,MAAM,KAAK,QAAQ,EAAE;QAC9B,IAAI,gBAAgB,CAAC,MAAM,CAAC,EAAE;YAC5B,OAAO,qBAAqB,CAAC,MAAM,CAAC,CAAC;SACtC;aAAM,IAAI,iBAAiB,CAAC,MAAM,CAAC,EAAE;YACpC,OAAO,sBAAsB,CAAC,MAAM,CAAC,CAAC;SACvC;QACD,OAAO,EAAE,GAAG,EAAE,MAAM,EAAE,CAAC;KACxB;IACD,IAAI,OAAO,MAAM,KAAK,QAAQ,EAAE;QAC9B,OAAO,kBAAkB,CAAC,MAAM,CAAC,CAAC;KACnC;IACD,IAAI,OAAO,MAAM,KAAK,QAAQ,IAAI,CAAC,MAAM,EAAE,QAAQ,IAAI,MAAM,EAAE,SAAS,CAAC,EAAE;QACzE,MAAM,EAAE,QAAQ,EAAE,SAAS,EAAE,GAAG,UAAU,EAAE,GAAG,MAAM,CAAC;QACtD,MAAM,QAAQ,GAAG,SAAS;YACxB,CAAC,CAAC,sBAAsB,CAAC,SAAS,CAAC;YACnC,CAAC,CAAC,qBAAqB,CAAC,QAAkB,CAAC,CAAC;QAC9C,OAAO;YACL,GAAG,QAAQ;YACX,GAAG,UAAU;SACd,CAAC;KACH;IACD,OAAO,MAAM,IAAI,IAAI,CAAC;AACxB,CAAC;AAED;;GAEG;AACH,MAAM,UAAU,cAAc,CAAC,OAA8B;IAC3D,IAAI,KAAK,CAAC,OAAO,CAAC,OAAO,CAAC,EAAE;QAC1B,OAAO,OAAO,CAAC,GAAG,CAAC,aAAa,CAAC,CAAC,MAAM,CAAC,OAAO,CAAkB,CAAC;KACpE;IACD,OAAO,CAAC,aAAa,CAAC,OAAO,CAAC,CAAC,CAAC,MAAM,CAAC,OAAO,CAAkB,CAAC;AACnE,CAAC","sourcesContent":["import { ImageNativeProps, ImageProps, ImageSource } from '../Image.types';\nimport resolveAssetSource from './resolveAssetSource';\nimport { resolveBlurhashString, resolveThumbhashString } from './resolveHashString';\n\nexport function isBlurhashString(str: string): boolean {\n  return /^(blurhash:\\/)?[\\w#$%*+,\\-.:;=?@[\\]^_{}|~]+(\\/[\\d.]+)*$/.test(str);\n}\n\n// Base64 strings will be recognized as blurhash by default (to keep compatibility),\n// interpret as thumbhash only if correct uri scheme is provided\nexport function isThumbhashString(str: string): boolean {\n  return str.startsWith('thumbhash:/');\n}\n\nfunction resolveSource(source?: ImageSource | string | number | null): ImageSource | null {\n  if (typeof source === 'string') {\n    if (isBlurhashString(source)) {\n      return resolveBlurhashString(source);\n    } else if (isThumbhashString(source)) {\n      return resolveThumbhashString(source);\n    }\n    return { uri: source };\n  }\n  if (typeof source === 'number') {\n    return resolveAssetSource(source);\n  }\n  if (typeof source === 'object' && (source?.blurhash || source?.thumbhash)) {\n    const { blurhash, thumbhash, ...restSource } = source;\n    const resolved = thumbhash\n      ? resolveThumbhashString(thumbhash)\n      : resolveBlurhashString(blurhash as string);\n    return {\n      ...resolved,\n      ...restSource,\n    };\n  }\n  return source ?? null;\n}\n\n/**\n * Resolves provided `source` prop to an array of objects expected by the native implementation.\n */\nexport function resolveSources(sources?: ImageProps['source']): ImageNativeProps['source'] {\n  if (Array.isArray(sources)) {\n    return sources.map(resolveSource).filter(Boolean) as ImageSource[];\n  }\n  return [resolveSource(sources)].filter(Boolean) as ImageSource[];\n}\n"]}
+{"version":3,"file":"resolveSources.js","sourceRoot":"","sources":["../../src/utils/resolveSources.tsx"],"names":[],"mappings":"AAAA,OAAO,kBAAkB,MAAM,sBAAsB,CAAC;AACtD,OAAO,EAAE,qBAAqB,EAAE,sBAAsB,EAAE,MAAM,qBAAqB,CAAC;AAGpF,MAAM,UAAU,gBAAgB,CAAC,GAAW;IAC1C,OAAO,yDAAyD,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC;AAC7E,CAAC;AAED,oFAAoF;AACpF,gEAAgE;AAChE,MAAM,UAAU,iBAAiB,CAAC,GAAW;IAC3C,OAAO,GAAG,CAAC,UAAU,CAAC,aAAa,CAAC,CAAC;AACvC,CAAC;AAED,SAAS,aAAa,CAAC,MAA6C;IAClE,IAAI,OAAO,MAAM,KAAK,QAAQ,EAAE;QAC9B,IAAI,gBAAgB,CAAC,MAAM,CAAC,EAAE;YAC5B,OAAO,qBAAqB,CAAC,MAAM,CAAC,CAAC;SACtC;aAAM,IAAI,iBAAiB,CAAC,MAAM,CAAC,EAAE;YACpC,OAAO,sBAAsB,CAAC,MAAM,CAAC,CAAC;SACvC;QACD,OAAO,EAAE,GAAG,EAAE,MAAM,EAAE,CAAC;KACxB;IACD,IAAI,OAAO,MAAM,KAAK,QAAQ,EAAE;QAC9B,OAAO,kBAAkB,CAAC,MAAM,CAAC,CAAC;KACnC;IACD,IAAI,OAAO,MAAM,KAAK,QAAQ,IAAI,CAAC,MAAM,EAAE,QAAQ,IAAI,MAAM,EAAE,SAAS,CAAC,EAAE;QACzE,MAAM,EAAE,QAAQ,EAAE,SAAS,EAAE,GAAG,UAAU,EAAE,GAAG,MAAM,CAAC;QACtD,MAAM,QAAQ,GAAG,SAAS;YACxB,CAAC,CAAC,sBAAsB,CAAC,SAAS,CAAC;YACnC,CAAC,CAAC,qBAAqB,CAAC,QAAkB,CAAC,CAAC;QAC9C,OAAO;YACL,GAAG,QAAQ;YACX,GAAG,UAAU;SACd,CAAC;KACH;IACD,OAAO,MAAM,IAAI,IAAI,CAAC;AACxB,CAAC;AAED;;GAEG;AACH,MAAM,UAAU,cAAc,CAAC,OAA8B;IAC3D,IAAI,KAAK,CAAC,OAAO,CAAC,OAAO,CAAC,EAAE;QAC1B,OAAO,OAAO,CAAC,GAAG,CAAC,aAAa,CAAC,CAAC,MAAM,CAAC,OAAO,CAAkB,CAAC;KACpE;IACD,OAAO,CAAC,aAAa,CAAC,OAAO,CAAC,CAAC,CAAC,MAAM,CAAC,OAAO,CAAkB,CAAC;AACnE,CAAC","sourcesContent":["import resolveAssetSource from './resolveAssetSource';\nimport { resolveBlurhashString, resolveThumbhashString } from './resolveHashString';\nimport { ImageNativeProps, ImageProps, ImageSource } from '../Image.types';\n\nexport function isBlurhashString(str: string): boolean {\n  return /^(blurhash:\\/)?[\\w#$%*+,\\-.:;=?@[\\]^_{}|~]+(\\/[\\d.]+)*$/.test(str);\n}\n\n// Base64 strings will be recognized as blurhash by default (to keep compatibility),\n// interpret as thumbhash only if correct uri scheme is provided\nexport function isThumbhashString(str: string): boolean {\n  return str.startsWith('thumbhash:/');\n}\n\nfunction resolveSource(source?: ImageSource | string | number | null): ImageSource | null {\n  if (typeof source === 'string') {\n    if (isBlurhashString(source)) {\n      return resolveBlurhashString(source);\n    } else if (isThumbhashString(source)) {\n      return resolveThumbhashString(source);\n    }\n    return { uri: source };\n  }\n  if (typeof source === 'number') {\n    return resolveAssetSource(source);\n  }\n  if (typeof source === 'object' && (source?.blurhash || source?.thumbhash)) {\n    const { blurhash, thumbhash, ...restSource } = source;\n    const resolved = thumbhash\n      ? resolveThumbhashString(thumbhash)\n      : resolveBlurhashString(blurhash as string);\n    return {\n      ...resolved,\n      ...restSource,\n    };\n  }\n  return source ?? null;\n}\n\n/**\n * Resolves provided `source` prop to an array of objects expected by the native implementation.\n */\nexport function resolveSources(sources?: ImageProps['source']): ImageNativeProps['source'] {\n  if (Array.isArray(sources)) {\n    return sources.map(resolveSource).filter(Boolean) as ImageSource[];\n  }\n  return [resolveSource(sources)].filter(Boolean) as ImageSource[];\n}\n"]}

package/build/web/AnimationManager.js.map

@@ -1 +1 @@
-{"version":3,"file":"AnimationManager.js","sourceRoot":"","sources":["../../src/web/AnimationManager.tsx"],"names":[],"mappings":"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","sourcesContent":["import React from 'react';\n\nimport { ImageTransition } from '../Image.types';\n\ntype Callbacks = {\n  onReady?: (() => void) | null;\n  onAnimationFinished?: (() => void) | null;\n  onMount?: (() => void) | null;\n  onError?: (() => void) | null;\n};\n\nexport type AnimationManagerNode = [\n  key: string,\n  renderFunction: (\n    renderProps: NonNullable<Callbacks>\n  ) => (className: string, style: React.CSSProperties) => React.ReactElement\n];\n\nconst SUPPORTED_ANIMATIONS: ImageTransition['effect'][] = [\n  'cross-dissolve',\n  'flip-from-left',\n  'flip-from-right',\n  'flip-from-top',\n  'flip-from-bottom',\n];\n\ntype NodeStatus = 'mounted' | 'in' | 'active' | 'out' | 'errored';\n\nfunction useAnimationManagerNode(node: AnimationManagerNode | null, initialStatus?: NodeStatus) {\n  const newNode = React.useMemo(() => {\n    if (!node) {\n      return null;\n    }\n    const [animationKey, renderFunction] = node;\n    // key, ReactElement, ref, callbacks\n    return {\n      animationKey,\n      persistedElement: renderFunction,\n      status: (initialStatus || 'mounted') as NodeStatus,\n    };\n  }, [node?.[0]]);\n  return newNode;\n}\n\nfunction validateTimingFunctionForAnimation(\n  animationClass: ImageTransition['effect'],\n  timingFunction: ImageTransition['timing']\n) {\n  if (animationClass?.includes('flip')) {\n    if (timingFunction?.includes('ease')) {\n      return 'ease-in-out';\n    }\n    return 'linear';\n  }\n  return timingFunction || null;\n}\n\nfunction validateAnimationClass(effect: ImageTransition['effect']) {\n  if (SUPPORTED_ANIMATIONS.includes(effect)) {\n    return effect;\n  }\n  return 'cross-dissolve';\n}\n\nexport function getAnimatorFromTransition(transition: ImageTransition | null | undefined) {\n  if (!transition?.duration) {\n    return null;\n  }\n  const animationClass = validateAnimationClass(transition.effect);\n  if (!animationClass) {\n    return {\n      startingClass: '',\n      animateInClass: '',\n      animateOutClass: '',\n      containerClass: '',\n      timingFunction: 'linear',\n      animationClass: '',\n      duration: 0,\n    };\n  }\n\n  const timingFunction = validateTimingFunctionForAnimation(animationClass, transition.timing);\n  const timingClass = `image-timing-${timingFunction}`;\n\n  return {\n    startingClass: `${animationClass}-start`,\n    animateInClass: [animationClass, 'transitioning', `${animationClass}-active`, timingClass].join(\n      ' '\n    ),\n    animateOutClass: [animationClass, `${animationClass}-end`, timingClass].join(' '),\n    containerClass: `${animationClass}-container`,\n    timingFunction,\n    animationClass,\n    duration: transition?.duration || 0,\n  };\n}\n\ntype MountedAnimationNode = {\n  animationKey: string;\n  persistedElement: (\n    renderProps: Callbacks\n  ) => (className: string, style: React.CSSProperties) => React.ReactElement;\n  status: NodeStatus;\n};\n\nexport default function AnimationManager({\n  children: renderFunction,\n  initial,\n  transition,\n  recyclingKey,\n}: {\n  children: AnimationManagerNode;\n  initial: AnimationManagerNode | null;\n  transition: ImageTransition | null | undefined;\n  recyclingKey?: string | null | undefined;\n}) {\n  const animation = getAnimatorFromTransition(transition);\n\n  const initialNode = useAnimationManagerNode(initial, 'active');\n\n  const [nodes, setNodes] = React.useState<MountedAnimationNode[]>(\n    initialNode ? [initialNode] : []\n  );\n\n  const [prevRecyclingKey, setPrevRecyclingKey] = React.useState<string>(recyclingKey ?? '');\n  if (prevRecyclingKey !== (recyclingKey ?? '')) {\n    setPrevRecyclingKey(recyclingKey ?? '');\n    setNodes(initialNode ? [initialNode] : []);\n  }\n\n  const removeAllNodesOfKeyExceptShowing = (key?: string) => {\n    setNodes((n) =>\n      n.filter(\n        (node) =>\n          (key ? node.animationKey !== key : false) ||\n          node.status === 'in' ||\n          node.status === 'active'\n      )\n    );\n  };\n\n  const newNode = useAnimationManagerNode(renderFunction);\n\n  React.useEffect(() => {\n    setNodes((n) => {\n      if (!newNode) {\n        return n;\n      }\n      const existingNodeIndex = n.findIndex((node) => node.animationKey === newNode.animationKey);\n      if (existingNodeIndex >= 0) {\n        if (animation) {\n          return n.map((n2) =>\n            n2.animationKey === newNode.animationKey\n              ? { ...newNode, status: 'in' }\n              : { ...n2, status: 'out' }\n          );\n        } else {\n          return [{ ...newNode, status: 'in' }];\n        }\n      }\n      return [...n, newNode];\n    });\n  }, [newNode]);\n\n  function wrapNodeWithCallbacks(node: MountedAnimationNode) {\n    if (renderFunction[0] === node.animationKey) {\n      return renderFunction[1]({\n        onReady: () => {\n          if (animation) {\n            setNodes((nodes) =>\n              nodes.map((n) => (n === newNode ? { ...n, status: 'in' } : { ...n, status: 'out' }))\n            );\n          } else {\n            setNodes([{ ...node, status: 'in' }]);\n          }\n        },\n        onAnimationFinished: () => {\n          setNodes([{ ...node, status: 'in' }]);\n        },\n        onError: () => {\n          setNodes((nodes) => nodes.map((n) => (n === node ? { ...n, status: 'errored' } : n)));\n        },\n      });\n    }\n    if (initial?.[0] === node.animationKey) {\n      return initial[1]({\n        onAnimationFinished: () => {\n          if (node.status === 'out') {\n            removeAllNodesOfKeyExceptShowing(node.animationKey);\n          }\n        },\n        onError: () => {\n          setNodes((nodes) => nodes.map((n) => (n === node ? { ...n, status: 'errored' } : n)));\n        },\n      });\n    }\n    return node.persistedElement({\n      onAnimationFinished: () => {\n        removeAllNodesOfKeyExceptShowing(node.animationKey);\n      },\n    });\n  }\n  const styles = {\n    transitionDuration: `${animation?.duration || 0}ms`,\n    transitionTimingFunction: animation?.timingFunction || 'linear',\n  };\n  const classes = {\n    in: animation?.animateInClass,\n    out: animation?.animateOutClass,\n    mounted: animation?.startingClass,\n  };\n\n  return (\n    <>\n      {[...nodes]\n        .filter((n) => n.status !== 'errored')\n        .map((n) => (\n          <div className={animation?.containerClass} key={n.animationKey}>\n            {wrapNodeWithCallbacks(n)(classes[n.status], styles)}\n          </div>\n        ))}\n    </>\n  );\n}\n"]}
+{"version":3,"file":"AnimationManager.js","sourceRoot":"","sources":["../../src/web/AnimationManager.tsx"],"names":[],"mappings":"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","sourcesContent":["import React from 'react';\n\nimport { ImageTransition } from '../Image.types';\n\ntype Callbacks = {\n  onReady?: (() => void) | null;\n  onAnimationFinished?: (() => void) | null;\n  onMount?: (() => void) | null;\n  onError?: (() => void) | null;\n};\n\nexport type AnimationManagerNode = [\n  key: string,\n  renderFunction: (\n    renderProps: NonNullable<Callbacks>\n  ) => (className: string, style: React.CSSProperties) => React.ReactElement,\n];\n\nconst SUPPORTED_ANIMATIONS: ImageTransition['effect'][] = [\n  'cross-dissolve',\n  'flip-from-left',\n  'flip-from-right',\n  'flip-from-top',\n  'flip-from-bottom',\n];\n\ntype NodeStatus = 'mounted' | 'in' | 'active' | 'out' | 'errored';\n\nfunction useAnimationManagerNode(node: AnimationManagerNode | null, initialStatus?: NodeStatus) {\n  const newNode = React.useMemo(() => {\n    if (!node) {\n      return null;\n    }\n    const [animationKey, renderFunction] = node;\n    // key, ReactElement, ref, callbacks\n    return {\n      animationKey,\n      persistedElement: renderFunction,\n      status: (initialStatus || 'mounted') as NodeStatus,\n    };\n  }, [node?.[0]]);\n  return newNode;\n}\n\nfunction validateTimingFunctionForAnimation(\n  animationClass: ImageTransition['effect'],\n  timingFunction: ImageTransition['timing']\n) {\n  if (animationClass?.includes('flip')) {\n    if (timingFunction?.includes('ease')) {\n      return 'ease-in-out';\n    }\n    return 'linear';\n  }\n  return timingFunction || null;\n}\n\nfunction validateAnimationClass(effect: ImageTransition['effect']) {\n  if (SUPPORTED_ANIMATIONS.includes(effect)) {\n    return effect;\n  }\n  return 'cross-dissolve';\n}\n\nexport function getAnimatorFromTransition(transition: ImageTransition | null | undefined) {\n  if (!transition?.duration) {\n    return null;\n  }\n  const animationClass = validateAnimationClass(transition.effect);\n  if (!animationClass) {\n    return {\n      startingClass: '',\n      animateInClass: '',\n      animateOutClass: '',\n      containerClass: '',\n      timingFunction: 'linear',\n      animationClass: '',\n      duration: 0,\n    };\n  }\n\n  const timingFunction = validateTimingFunctionForAnimation(animationClass, transition.timing);\n  const timingClass = `image-timing-${timingFunction}`;\n\n  return {\n    startingClass: `${animationClass}-start`,\n    animateInClass: [animationClass, 'transitioning', `${animationClass}-active`, timingClass].join(\n      ' '\n    ),\n    animateOutClass: [animationClass, `${animationClass}-end`, timingClass].join(' '),\n    containerClass: `${animationClass}-container`,\n    timingFunction,\n    animationClass,\n    duration: transition?.duration || 0,\n  };\n}\n\ntype MountedAnimationNode = {\n  animationKey: string;\n  persistedElement: (\n    renderProps: Callbacks\n  ) => (className: string, style: React.CSSProperties) => React.ReactElement;\n  status: NodeStatus;\n};\n\nexport default function AnimationManager({\n  children: renderFunction,\n  initial,\n  transition,\n  recyclingKey,\n}: {\n  children: AnimationManagerNode;\n  initial: AnimationManagerNode | null;\n  transition: ImageTransition | null | undefined;\n  recyclingKey?: string | null | undefined;\n}) {\n  const animation = getAnimatorFromTransition(transition);\n\n  const initialNode = useAnimationManagerNode(initial, 'active');\n\n  const [nodes, setNodes] = React.useState<MountedAnimationNode[]>(\n    initialNode ? [initialNode] : []\n  );\n\n  const [prevRecyclingKey, setPrevRecyclingKey] = React.useState<string>(recyclingKey ?? '');\n  if (prevRecyclingKey !== (recyclingKey ?? '')) {\n    setPrevRecyclingKey(recyclingKey ?? '');\n    setNodes(initialNode ? [initialNode] : []);\n  }\n\n  const removeAllNodesOfKeyExceptShowing = (key?: string) => {\n    setNodes((n) =>\n      n.filter(\n        (node) =>\n          (key ? node.animationKey !== key : false) ||\n          node.status === 'in' ||\n          node.status === 'active'\n      )\n    );\n  };\n\n  const newNode = useAnimationManagerNode(renderFunction);\n\n  React.useEffect(() => {\n    setNodes((n) => {\n      if (!newNode) {\n        return n;\n      }\n      const existingNodeIndex = n.findIndex((node) => node.animationKey === newNode.animationKey);\n      if (existingNodeIndex >= 0) {\n        if (animation) {\n          return n.map((n2) =>\n            n2.animationKey === newNode.animationKey\n              ? { ...newNode, status: 'in' }\n              : { ...n2, status: 'out' }\n          );\n        } else {\n          return [{ ...newNode, status: 'in' }];\n        }\n      }\n      return [...n, newNode];\n    });\n  }, [newNode]);\n\n  function wrapNodeWithCallbacks(node: MountedAnimationNode) {\n    if (renderFunction[0] === node.animationKey) {\n      return renderFunction[1]({\n        onReady: () => {\n          if (animation) {\n            setNodes((nodes) =>\n              nodes.map((n) => (n === newNode ? { ...n, status: 'in' } : { ...n, status: 'out' }))\n            );\n          } else {\n            setNodes([{ ...node, status: 'in' }]);\n          }\n        },\n        onAnimationFinished: () => {\n          setNodes([{ ...node, status: 'in' }]);\n        },\n        onError: () => {\n          setNodes((nodes) => nodes.map((n) => (n === node ? { ...n, status: 'errored' } : n)));\n        },\n      });\n    }\n    if (initial?.[0] === node.animationKey) {\n      return initial[1]({\n        onAnimationFinished: () => {\n          if (node.status === 'out') {\n            removeAllNodesOfKeyExceptShowing(node.animationKey);\n          }\n        },\n        onError: () => {\n          setNodes((nodes) => nodes.map((n) => (n === node ? { ...n, status: 'errored' } : n)));\n        },\n      });\n    }\n    return node.persistedElement({\n      onAnimationFinished: () => {\n        removeAllNodesOfKeyExceptShowing(node.animationKey);\n      },\n    });\n  }\n  const styles = {\n    transitionDuration: `${animation?.duration || 0}ms`,\n    transitionTimingFunction: animation?.timingFunction || 'linear',\n  };\n  const classes = {\n    in: animation?.animateInClass,\n    out: animation?.animateOutClass,\n    mounted: animation?.startingClass,\n  };\n\n  return (\n    <>\n      {[...nodes]\n        .filter((n) => n.status !== 'errored')\n        .map((n) => (\n          <div className={animation?.containerClass} key={n.animationKey}>\n            {wrapNodeWithCallbacks(n)(classes[n.status], styles)}\n          </div>\n        ))}\n    </>\n  );\n}\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,KAAkC,MAAM,OAAO,CAAC;AAOvD,OAAO,EAAE,iBAAiB,EAAE,MAAM,sBAAsB,CAAC;AAmBzD,QAAA,MAAM,YAAY,4FAqEjB,CAAC;AAEF,eAAe,YAAY,CAAC"}
+{"version":3,"file":"ImageWrapper.d.ts","sourceRoot":"","sources":["../../src/web/ImageWrapper.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAkC,MAAM,OAAO,CAAC;AAGvD,OAAO,EAAE,iBAAiB,EAAE,MAAM,sBAAsB,CAAC;AAuBzD,QAAA,MAAM,YAAY,4FAqEjB,CAAC;AAEF,eAAe,YAAY,CAAC"}

package/build/web/ImageWrapper.js

@@ -1,10 +1,10 @@
 import React, { useEffect, useMemo } from 'react';
-import { useBlurhash } from '../utils/blurhash/useBlurhash';
-import { isBlurhashString, isThumbhashString } from '../utils/resolveSources';
-import { thumbHashStringToDataURL } from '../utils/thumbhash/thumbhash';
 import ColorTintFilter, { getTintColorStyle } from './ColorTintFilter';
 import { getImageWrapperEventHandler } from './getImageWrapperEventHandler';
 import { absoluteFilledPosition, getObjectPositionFromContentPositionObject } from './positioning';
+import { useBlurhash } from '../utils/blurhash/useBlurhash';
+import { isBlurhashString, isThumbhashString } from '../utils/resolveSources';
+import { thumbHashStringToDataURL } from '../utils/thumbhash/thumbhash';
 function getFetchPriorityFromImagePriority(priority = 'normal') {
     return priority && ['low', 'high'].includes(priority) ? priority : 'auto';
 }

package/build/web/ImageWrapper.js.map

@@ -1 +1 @@
-{"version":3,"file":"ImageWrapper.js","sourceRoot":"","sources":["../../src/web/ImageWrapper.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,SAAS,EAAO,OAAO,EAAE,MAAM,OAAO,CAAC;AAGvD,OAAO,EAAE,WAAW,EAAE,MAAM,+BAA+B,CAAC;AAC5D,OAAO,EAAE,gBAAgB,EAAE,iBAAiB,EAAE,MAAM,yBAAyB,CAAC;AAC9E,OAAO,EAAE,wBAAwB,EAAE,MAAM,8BAA8B,CAAC;AACxE,OAAO,eAAe,EAAE,EAAE,iBAAiB,EAAE,MAAM,mBAAmB,CAAC;AAEvE,OAAO,EAAE,2BAA2B,EAAE,MAAM,+BAA+B,CAAC;AAC5E,OAAO,EAAE,sBAAsB,EAAE,0CAA0C,EAAE,MAAM,eAAe,CAAC;AAGnG,SAAS,iCAAiC,CAAC,WAAyC,QAAQ;IAC1F,OAAO,QAAQ,IAAI,CAAC,KAAK,EAAE,MAAM,CAAC,CAAC,QAAQ,CAAC,QAAQ,CAAC,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,MAAM,CAAC;AAC5E,CAAC;AAED,SAAS,qBAAqB,CAAC,MAAqD;IAClF,IAAI,MAAM,IAAI,QAAQ,IAAI,MAAM,EAAE;QAChC,OAAO;YACL,MAAM,EAAE,MAAM,CAAC,MAAM;YACrB,KAAK,EAAE,MAAM,CAAC,KAAK;SACpB,CAAC;KACH;IACD,OAAO,EAAE,CAAC;AACZ,CAAC;AAED,MAAM,YAAY,GAAG,KAAK,CAAC,UAAU,CACnC,CACE,EACE,MAAM,EACN,MAAM,EACN,eAAe,EACf,8BAA8B,EAC9B,QAAQ,EACR,KAAK,EACL,oBAAoB,EACpB,SAAS,EACT,SAAS,EACT,kBAAkB,EAClB,GAAG,KAAK,EACU,EACpB,GAA0B,EAC1B,EAAE;IACF,SAAS,CAAC,GAAG,EAAE;QACb,MAAM,EAAE,OAAO,EAAE,OAAO,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC;IACzC,CAAC,EAAE,EAAE,CAAC,CAAC;IAEP,MAAM,UAAU,GAAG,gBAAgB,CAAC,MAAM,EAAE,GAAG,IAAI,EAAE,CAAC,CAAC;IACvD,MAAM,WAAW,GAAG,iBAAiB,CAAC,MAAM,EAAE,GAAG,IAAI,EAAE,CAAC,CAAC;IACzD,MAAM,MAAM,GAAG,UAAU,IAAI,WAAW,CAAC;IAEzC,uDAAuD;IACvD,MAAM,SAAS,GAAG,MAAM,EAAE,GAAG,EAAE,OAAO,CAAC,cAAc,EAAE,EAAE,CAAC,CAAC;IAC3D,MAAM,YAAY,GAAG,OAAO,CAC1B,GAAG,EAAE,CAAC,CAAC,WAAW,CAAC,CAAC,CAAC,wBAAwB,CAAC,SAAS,IAAI,EAAE,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,EACtE,CAAC,SAAS,CAAC,CACZ,CAAC;IAEF,MAAM,WAAW,GAAG,WAAW,CAAC,UAAU,CAAC,CAAC,CAAC,MAAM,EAAE,GAAG,CAAC,CAAC,CAAC,IAAI,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,EAAE,MAAM,CAAC,CAAC;IAChG,IAAI,CAAC,MAAM,EAAE;QACX,OAAO,IAAI,CAAC;KACb;IAED,MAAM,cAAc,GAAG,0CAA0C,CAC/D,MAAM,CAAC,CAAC,CAAC,8BAA8B,CAAC,CAAC,CAAC,eAAe,CAC1D,CAAC;IAEF,MAAM,GAAG,GAAG,MAAM,CAAC,CAAC,CAAC,WAAW,IAAI,YAAY,CAAC,CAAC,CAAC,MAAM,EAAE,GAAG,CAAC;IAE/D,OAAO,CACL;QACE,oBAAC,eAAe,IAAC,SAAS,EAAE,SAAS,GAAI;QACzC,6BACE,GAAG,EAAE,GAAG,EACR,GAAG,EAAE,kBAAkB,EACvB,SAAS,EAAE,SAAS,EACpB,GAAG,EAAE,GAAG,IAAI,SAAS,EACrB,GAAG,EAAE,MAAM,EAAE,GAAG,EAChB,KAAK,EAAE;gBACL,cAAc;gBACd,GAAG,sBAAsB;gBACzB,GAAG,iBAAiB,CAAC,SAAS,CAAC;gBAC/B,GAAG,CAAC,MAAM,CAAC,CAAC,CAAC,oBAAoB,CAAC,CAAC,CAAC,EAAE,CAAC;gBACvC,GAAG,KAAK;aACT;YACD,aAAa;YACb,qDAAqD;YACrD,aAAa,EAAE,iCAAiC,CAAC,QAAQ,IAAI,QAAQ,CAAC,KAClE,2BAA2B,CAAC,MAAM,EAAE,MAAM,CAAC,KAC3C,qBAAqB,CAAC,MAAM,CAAC,KAC7B,KAAK,GACT,CACD,CACJ,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,eAAe,YAAY,CAAC","sourcesContent":["import React, { useEffect, Ref, useMemo } from 'react';\n\nimport { ImageNativeProps, ImageSource } from '../Image.types';\nimport { useBlurhash } from '../utils/blurhash/useBlurhash';\nimport { isBlurhashString, isThumbhashString } from '../utils/resolveSources';\nimport { thumbHashStringToDataURL } from '../utils/thumbhash/thumbhash';\nimport ColorTintFilter, { getTintColorStyle } from './ColorTintFilter';\nimport { ImageWrapperProps } from './ImageWrapper.types';\nimport { getImageWrapperEventHandler } from './getImageWrapperEventHandler';\nimport { absoluteFilledPosition, getObjectPositionFromContentPositionObject } from './positioning';\nimport { SrcSetSource } from './useSourceSelection';\n\nfunction getFetchPriorityFromImagePriority(priority: ImageNativeProps['priority'] = 'normal') {\n  return priority && ['low', 'high'].includes(priority) ? priority : 'auto';\n}\n\nfunction getImgPropsFromSource(source: ImageSource | SrcSetSource | null | undefined) {\n  if (source && 'srcset' in source) {\n    return {\n      srcSet: source.srcset,\n      sizes: source.sizes,\n    };\n  }\n  return {};\n}\n\nconst ImageWrapper = React.forwardRef(\n  (\n    {\n      source,\n      events,\n      contentPosition,\n      hashPlaceholderContentPosition,\n      priority,\n      style,\n      hashPlaceholderStyle,\n      tintColor,\n      className,\n      accessibilityLabel,\n      ...props\n    }: ImageWrapperProps,\n    ref: Ref<HTMLImageElement>\n  ) => {\n    useEffect(() => {\n      events?.onMount?.forEach((e) => e?.());\n    }, []);\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    if (!source) {\n      return null;\n    }\n\n    const objectPosition = getObjectPositionFromContentPositionObject(\n      isHash ? hashPlaceholderContentPosition : contentPosition\n    );\n\n    const uri = isHash ? blurhashUri ?? thumbhashUri : source?.uri;\n\n    return (\n      <>\n        <ColorTintFilter tintColor={tintColor} />\n        <img\n          ref={ref}\n          alt={accessibilityLabel}\n          className={className}\n          src={uri || undefined}\n          key={source?.uri}\n          style={{\n            objectPosition,\n            ...absoluteFilledPosition,\n            ...getTintColorStyle(tintColor),\n            ...(isHash ? hashPlaceholderStyle : {}),\n            ...style,\n          }}\n          // @ts-ignore\n          // eslint-disable-next-line react/no-unknown-property\n          fetchpriority={getFetchPriorityFromImagePriority(priority || 'normal')}\n          {...getImageWrapperEventHandler(events, source)}\n          {...getImgPropsFromSource(source)}\n          {...props}\n        />\n      </>\n    );\n  }\n);\n\nexport default ImageWrapper;\n"]}
+{"version":3,"file":"ImageWrapper.js","sourceRoot":"","sources":["../../src/web/ImageWrapper.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,SAAS,EAAO,OAAO,EAAE,MAAM,OAAO,CAAC;AAEvD,OAAO,eAAe,EAAE,EAAE,iBAAiB,EAAE,MAAM,mBAAmB,CAAC;AAEvE,OAAO,EAAE,2BAA2B,EAAE,MAAM,+BAA+B,CAAC;AAC5E,OAAO,EAAE,sBAAsB,EAAE,0CAA0C,EAAE,MAAM,eAAe,CAAC;AAGnG,OAAO,EAAE,WAAW,EAAE,MAAM,+BAA+B,CAAC;AAC5D,OAAO,EAAE,gBAAgB,EAAE,iBAAiB,EAAE,MAAM,yBAAyB,CAAC;AAC9E,OAAO,EAAE,wBAAwB,EAAE,MAAM,8BAA8B,CAAC;AAExE,SAAS,iCAAiC,CAAC,WAAyC,QAAQ;IAC1F,OAAO,QAAQ,IAAI,CAAC,KAAK,EAAE,MAAM,CAAC,CAAC,QAAQ,CAAC,QAAQ,CAAC,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,MAAM,CAAC;AAC5E,CAAC;AAED,SAAS,qBAAqB,CAAC,MAAqD;IAClF,IAAI,MAAM,IAAI,QAAQ,IAAI,MAAM,EAAE;QAChC,OAAO;YACL,MAAM,EAAE,MAAM,CAAC,MAAM;YACrB,KAAK,EAAE,MAAM,CAAC,KAAK;SACpB,CAAC;KACH;IACD,OAAO,EAAE,CAAC;AACZ,CAAC;AAED,MAAM,YAAY,GAAG,KAAK,CAAC,UAAU,CACnC,CACE,EACE,MAAM,EACN,MAAM,EACN,eAAe,EACf,8BAA8B,EAC9B,QAAQ,EACR,KAAK,EACL,oBAAoB,EACpB,SAAS,EACT,SAAS,EACT,kBAAkB,EAClB,GAAG,KAAK,EACU,EACpB,GAA0B,EAC1B,EAAE;IACF,SAAS,CAAC,GAAG,EAAE;QACb,MAAM,EAAE,OAAO,EAAE,OAAO,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC;IACzC,CAAC,EAAE,EAAE,CAAC,CAAC;IAEP,MAAM,UAAU,GAAG,gBAAgB,CAAC,MAAM,EAAE,GAAG,IAAI,EAAE,CAAC,CAAC;IACvD,MAAM,WAAW,GAAG,iBAAiB,CAAC,MAAM,EAAE,GAAG,IAAI,EAAE,CAAC,CAAC;IACzD,MAAM,MAAM,GAAG,UAAU,IAAI,WAAW,CAAC;IAEzC,uDAAuD;IACvD,MAAM,SAAS,GAAG,MAAM,EAAE,GAAG,EAAE,OAAO,CAAC,cAAc,EAAE,EAAE,CAAC,CAAC;IAC3D,MAAM,YAAY,GAAG,OAAO,CAC1B,GAAG,EAAE,CAAC,CAAC,WAAW,CAAC,CAAC,CAAC,wBAAwB,CAAC,SAAS,IAAI,EAAE,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,EACtE,CAAC,SAAS,CAAC,CACZ,CAAC;IAEF,MAAM,WAAW,GAAG,WAAW,CAAC,UAAU,CAAC,CAAC,CAAC,MAAM,EAAE,GAAG,CAAC,CAAC,CAAC,IAAI,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,EAAE,MAAM,CAAC,CAAC;IAChG,IAAI,CAAC,MAAM,EAAE;QACX,OAAO,IAAI,CAAC;KACb;IAED,MAAM,cAAc,GAAG,0CAA0C,CAC/D,MAAM,CAAC,CAAC,CAAC,8BAA8B,CAAC,CAAC,CAAC,eAAe,CAC1D,CAAC;IAEF,MAAM,GAAG,GAAG,MAAM,CAAC,CAAC,CAAC,WAAW,IAAI,YAAY,CAAC,CAAC,CAAC,MAAM,EAAE,GAAG,CAAC;IAE/D,OAAO,CACL;QACE,oBAAC,eAAe,IAAC,SAAS,EAAE,SAAS,GAAI;QACzC,6BACE,GAAG,EAAE,GAAG,EACR,GAAG,EAAE,kBAAkB,EACvB,SAAS,EAAE,SAAS,EACpB,GAAG,EAAE,GAAG,IAAI,SAAS,EACrB,GAAG,EAAE,MAAM,EAAE,GAAG,EAChB,KAAK,EAAE;gBACL,cAAc;gBACd,GAAG,sBAAsB;gBACzB,GAAG,iBAAiB,CAAC,SAAS,CAAC;gBAC/B,GAAG,CAAC,MAAM,CAAC,CAAC,CAAC,oBAAoB,CAAC,CAAC,CAAC,EAAE,CAAC;gBACvC,GAAG,KAAK;aACT;YACD,aAAa;YACb,qDAAqD;YACrD,aAAa,EAAE,iCAAiC,CAAC,QAAQ,IAAI,QAAQ,CAAC,KAClE,2BAA2B,CAAC,MAAM,EAAE,MAAM,CAAC,KAC3C,qBAAqB,CAAC,MAAM,CAAC,KAC7B,KAAK,GACT,CACD,CACJ,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,eAAe,YAAY,CAAC","sourcesContent":["import React, { useEffect, Ref, useMemo } from 'react';\n\nimport ColorTintFilter, { getTintColorStyle } from './ColorTintFilter';\nimport { ImageWrapperProps } from './ImageWrapper.types';\nimport { getImageWrapperEventHandler } from './getImageWrapperEventHandler';\nimport { absoluteFilledPosition, getObjectPositionFromContentPositionObject } from './positioning';\nimport { SrcSetSource } from './useSourceSelection';\nimport { ImageNativeProps, ImageSource } from '../Image.types';\nimport { useBlurhash } from '../utils/blurhash/useBlurhash';\nimport { isBlurhashString, isThumbhashString } from '../utils/resolveSources';\nimport { thumbHashStringToDataURL } from '../utils/thumbhash/thumbhash';\n\nfunction getFetchPriorityFromImagePriority(priority: ImageNativeProps['priority'] = 'normal') {\n  return priority && ['low', 'high'].includes(priority) ? priority : 'auto';\n}\n\nfunction getImgPropsFromSource(source: ImageSource | SrcSetSource | null | undefined) {\n  if (source && 'srcset' in source) {\n    return {\n      srcSet: source.srcset,\n      sizes: source.sizes,\n    };\n  }\n  return {};\n}\n\nconst ImageWrapper = React.forwardRef(\n  (\n    {\n      source,\n      events,\n      contentPosition,\n      hashPlaceholderContentPosition,\n      priority,\n      style,\n      hashPlaceholderStyle,\n      tintColor,\n      className,\n      accessibilityLabel,\n      ...props\n    }: ImageWrapperProps,\n    ref: Ref<HTMLImageElement>\n  ) => {\n    useEffect(() => {\n      events?.onMount?.forEach((e) => e?.());\n    }, []);\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    if (!source) {\n      return null;\n    }\n\n    const objectPosition = getObjectPositionFromContentPositionObject(\n      isHash ? hashPlaceholderContentPosition : contentPosition\n    );\n\n    const uri = isHash ? blurhashUri ?? thumbhashUri : source?.uri;\n\n    return (\n      <>\n        <ColorTintFilter tintColor={tintColor} />\n        <img\n          ref={ref}\n          alt={accessibilityLabel}\n          className={className}\n          src={uri || undefined}\n          key={source?.uri}\n          style={{\n            objectPosition,\n            ...absoluteFilledPosition,\n            ...getTintColorStyle(tintColor),\n            ...(isHash ? hashPlaceholderStyle : {}),\n            ...style,\n          }}\n          // @ts-ignore\n          // eslint-disable-next-line react/no-unknown-property\n          fetchpriority={getFetchPriorityFromImagePriority(priority || 'normal')}\n          {...getImageWrapperEventHandler(events, source)}\n          {...getImgPropsFromSource(source)}\n          {...props}\n        />\n      </>\n    );\n  }\n);\n\nexport default ImageWrapper;\n"]}

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

@@ -1,6 +1,6 @@
 import { CSSProperties, SyntheticEvent } from 'react';
-import { ImageContentPositionObject, ImageSource } from '../Image.types';
 import { SrcSetSource } from './useSourceSelection';
+import { ImageContentPositionObject, ImageSource } from '../Image.types';
 export type ImageWrapperEvents = {
     onLoad?: (((event: SyntheticEvent<HTMLImageElement, Event>) => void) | undefined | null)[];
     onError?: ((({ source }: {

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

@@ -1 +1 @@
-{"version":3,"file":"ImageWrapper.types.d.ts","sourceRoot":"","sources":["../../src/web/ImageWrapper.types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,cAAc,EAAE,MAAM,OAAO,CAAC;AAEtD,OAAO,EAAE,0BAA0B,EAAE,WAAW,EAAE,MAAM,gBAAgB,CAAC;AACzE,OAAO,EAAE,YAAY,EAAE,MAAM,sBAAsB,CAAC;AAEpD,MAAM,MAAM,kBAAkB,GAAG;IAC/B,MAAM,CAAC,EAAE,CAAC,CAAC,CAAC,KAAK,EAAE,cAAc,CAAC,gBAAgB,EAAE,KAAK,CAAC,KAAK,IAAI,CAAC,GAAG,SAAS,GAAG,IAAI,CAAC,EAAE,CAAC;IAC3F,OAAO,CAAC,EAAE,CAAC,CAAC,CAAC,EAAE,MAAM,EAAE,EAAE;QAAE,MAAM,EAAE,WAAW,GAAG,IAAI,CAAA;KAAE,KAAK,IAAI,CAAC,GAAG,SAAS,GAAG,IAAI,CAAC,EAAE,CAAC;IACxF,eAAe,CAAC,EAAE,CAAC,CAAC,MAAM,IAAI,CAAC,GAAG,SAAS,GAAG,IAAI,CAAC,EAAE,CAAC;IACtD,OAAO,CAAC,EAAE,CAAC,CAAC,MAAM,IAAI,CAAC,GAAG,SAAS,GAAG,IAAI,CAAC,EAAE,CAAC;CAC/C,CAAC;AAEF,MAAM,MAAM,iBAAiB,GAAG;IAC9B,MAAM,CAAC,EAAE,WAAW,GAAG,YAAY,GAAG,IAAI,CAAC;IAC3C,MAAM,CAAC,EAAE,kBAAkB,CAAC;IAC5B,eAAe,CAAC,EAAE,0BAA0B,CAAC;IAC7C,8BAA8B,CAAC,EAAE,0BAA0B,CAAC;IAC5D,QAAQ,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IACzB,KAAK,EAAE,aAAa,CAAC;IACrB,SAAS,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IAC1B,oBAAoB,CAAC,EAAE,aAAa,CAAC;IACrC,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,kBAAkB,CAAC,EAAE,MAAM,CAAC;CAC7B,CAAC"}
+{"version":3,"file":"ImageWrapper.types.d.ts","sourceRoot":"","sources":["../../src/web/ImageWrapper.types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,cAAc,EAAE,MAAM,OAAO,CAAC;AAEtD,OAAO,EAAE,YAAY,EAAE,MAAM,sBAAsB,CAAC;AACpD,OAAO,EAAE,0BAA0B,EAAE,WAAW,EAAE,MAAM,gBAAgB,CAAC;AAEzE,MAAM,MAAM,kBAAkB,GAAG;IAC/B,MAAM,CAAC,EAAE,CAAC,CAAC,CAAC,KAAK,EAAE,cAAc,CAAC,gBAAgB,EAAE,KAAK,CAAC,KAAK,IAAI,CAAC,GAAG,SAAS,GAAG,IAAI,CAAC,EAAE,CAAC;IAC3F,OAAO,CAAC,EAAE,CAAC,CAAC,CAAC,EAAE,MAAM,EAAE,EAAE;QAAE,MAAM,EAAE,WAAW,GAAG,IAAI,CAAA;KAAE,KAAK,IAAI,CAAC,GAAG,SAAS,GAAG,IAAI,CAAC,EAAE,CAAC;IACxF,eAAe,CAAC,EAAE,CAAC,CAAC,MAAM,IAAI,CAAC,GAAG,SAAS,GAAG,IAAI,CAAC,EAAE,CAAC;IACtD,OAAO,CAAC,EAAE,CAAC,CAAC,MAAM,IAAI,CAAC,GAAG,SAAS,GAAG,IAAI,CAAC,EAAE,CAAC;CAC/C,CAAC;AAEF,MAAM,MAAM,iBAAiB,GAAG;IAC9B,MAAM,CAAC,EAAE,WAAW,GAAG,YAAY,GAAG,IAAI,CAAC;IAC3C,MAAM,CAAC,EAAE,kBAAkB,CAAC;IAC5B,eAAe,CAAC,EAAE,0BAA0B,CAAC;IAC7C,8BAA8B,CAAC,EAAE,0BAA0B,CAAC;IAC5D,QAAQ,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IACzB,KAAK,EAAE,aAAa,CAAC;IACrB,SAAS,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IAC1B,oBAAoB,CAAC,EAAE,aAAa,CAAC;IACrC,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,kBAAkB,CAAC,EAAE,MAAM,CAAC;CAC7B,CAAC"}

package/build/web/ImageWrapper.types.js.map

@@ -1 +1 @@
-{"version":3,"file":"ImageWrapper.types.js","sourceRoot":"","sources":["../../src/web/ImageWrapper.types.ts"],"names":[],"mappings":"","sourcesContent":["import { CSSProperties, SyntheticEvent } from 'react';\n\nimport { ImageContentPositionObject, ImageSource } from '../Image.types';\nimport { SrcSetSource } from './useSourceSelection';\n\nexport type ImageWrapperEvents = {\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\nexport type ImageWrapperProps = {\n  source?: ImageSource | SrcSetSource | null;\n  events?: ImageWrapperEvents;\n  contentPosition?: ImageContentPositionObject;\n  hashPlaceholderContentPosition?: ImageContentPositionObject;\n  priority?: string | null;\n  style: CSSProperties;\n  tintColor?: string | null;\n  hashPlaceholderStyle?: CSSProperties;\n  className?: string;\n  accessibilityLabel?: string;\n};\n"]}
+{"version":3,"file":"ImageWrapper.types.js","sourceRoot":"","sources":["../../src/web/ImageWrapper.types.ts"],"names":[],"mappings":"","sourcesContent":["import { CSSProperties, SyntheticEvent } from 'react';\n\nimport { SrcSetSource } from './useSourceSelection';\nimport { ImageContentPositionObject, ImageSource } from '../Image.types';\n\nexport type ImageWrapperEvents = {\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\nexport type ImageWrapperProps = {\n  source?: ImageSource | SrcSetSource | null;\n  events?: ImageWrapperEvents;\n  contentPosition?: ImageContentPositionObject;\n  hashPlaceholderContentPosition?: ImageContentPositionObject;\n  priority?: string | null;\n  style: CSSProperties;\n  tintColor?: string | null;\n  hashPlaceholderStyle?: CSSProperties;\n  className?: string;\n  accessibilityLabel?: string;\n};\n"]}

package/build/web/getImageWrapperEventHandler.d.ts

@@ -1,5 +1,5 @@
-import { ImageSource } from '../Image.types';
 import { ImageWrapperEvents } from './ImageWrapper.types';
+import { ImageSource } from '../Image.types';
 export declare function getImageWrapperEventHandler(events: ImageWrapperEvents | undefined, source: ImageSource): {
     onLoad: (event: any) => void;
     onTransitionEnd: () => void | undefined;

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

@@ -1 +1 @@
-{"version":3,"file":"getImageWrapperEventHandler.d.ts","sourceRoot":"","sources":["../../src/web/getImageWrapperEventHandler.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,EAAE,MAAM,gBAAgB,CAAC;AAC7C,OAAO,EAAE,kBAAkB,EAAE,MAAM,sBAAsB,CAAC;AAE1D,wBAAgB,2BAA2B,CACzC,MAAM,EAAE,kBAAkB,GAAG,SAAS,EACtC,MAAM,EAAE,WAAW;;;;EAgBpB"}
+{"version":3,"file":"getImageWrapperEventHandler.d.ts","sourceRoot":"","sources":["../../src/web/getImageWrapperEventHandler.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,kBAAkB,EAAE,MAAM,sBAAsB,CAAC;AAC1D,OAAO,EAAE,WAAW,EAAE,MAAM,gBAAgB,CAAC;AAE7C,wBAAgB,2BAA2B,CACzC,MAAM,EAAE,kBAAkB,GAAG,SAAS,EACtC,MAAM,EAAE,WAAW;;;;EAgBpB"}

package/build/web/getImageWrapperEventHandler.js.map

@@ -1 +1 @@
-{"version":3,"file":"getImageWrapperEventHandler.js","sourceRoot":"","sources":["../../src/web/getImageWrapperEventHandler.ts"],"names":[],"mappings":"AAGA,MAAM,UAAU,2BAA2B,CACzC,MAAsC,EACtC,MAAmB;IAEnB,OAAO;QACL,MAAM,EAAE,CAAC,KAAK,EAAE,EAAE;YAChB,IAAI,OAAO,MAAM,KAAK,WAAW,EAAE;gBACjC,qJAAqJ;gBACrJ,MAAM,CAAC,qBAAqB,CAAC,GAAG,EAAE;oBAChC,MAAM,EAAE,MAAM,EAAE,OAAO,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,EAAE,CAAC,KAAK,CAAC,CAAC,CAAC;gBAC7C,CAAC,CAAC,CAAC;aACJ;iBAAM;gBACL,MAAM,EAAE,MAAM,EAAE,OAAO,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,EAAE,CAAC,KAAK,CAAC,CAAC,CAAC;aAC5C;QACH,CAAC;QACD,eAAe,EAAE,GAAG,EAAE,CAAC,MAAM,EAAE,eAAe,EAAE,OAAO,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,EAAE,EAAE,CAAC;QACrE,OAAO,EAAE,GAAG,EAAE,CAAC,MAAM,EAAE,OAAO,EAAE,OAAO,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,EAAE,CAAC,EAAE,MAAM,EAAE,MAAM,IAAI,IAAI,EAAE,CAAC,CAAC;KAChF,CAAC;AACJ,CAAC","sourcesContent":["import { ImageSource } from '../Image.types';\nimport { ImageWrapperEvents } from './ImageWrapper.types';\n\nexport function getImageWrapperEventHandler(\n  events: ImageWrapperEvents | undefined,\n  source: ImageSource\n) {\n  return {\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"]}
+{"version":3,"file":"getImageWrapperEventHandler.js","sourceRoot":"","sources":["../../src/web/getImageWrapperEventHandler.ts"],"names":[],"mappings":"AAGA,MAAM,UAAU,2BAA2B,CACzC,MAAsC,EACtC,MAAmB;IAEnB,OAAO;QACL,MAAM,EAAE,CAAC,KAAK,EAAE,EAAE;YAChB,IAAI,OAAO,MAAM,KAAK,WAAW,EAAE;gBACjC,qJAAqJ;gBACrJ,MAAM,CAAC,qBAAqB,CAAC,GAAG,EAAE;oBAChC,MAAM,EAAE,MAAM,EAAE,OAAO,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,EAAE,CAAC,KAAK,CAAC,CAAC,CAAC;gBAC7C,CAAC,CAAC,CAAC;aACJ;iBAAM;gBACL,MAAM,EAAE,MAAM,EAAE,OAAO,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,EAAE,CAAC,KAAK,CAAC,CAAC,CAAC;aAC5C;QACH,CAAC;QACD,eAAe,EAAE,GAAG,EAAE,CAAC,MAAM,EAAE,eAAe,EAAE,OAAO,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,EAAE,EAAE,CAAC;QACrE,OAAO,EAAE,GAAG,EAAE,CAAC,MAAM,EAAE,OAAO,EAAE,OAAO,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,EAAE,CAAC,EAAE,MAAM,EAAE,MAAM,IAAI,IAAI,EAAE,CAAC,CAAC;KAChF,CAAC;AACJ,CAAC","sourcesContent":["import { ImageWrapperEvents } from './ImageWrapper.types';\nimport { ImageSource } from '../Image.types';\n\nexport function getImageWrapperEventHandler(\n  events: ImageWrapperEvents | undefined,\n  source: ImageSource\n) {\n  return {\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"]}

package/build/web/useSourceSelection.js

@@ -46,7 +46,9 @@ function selectSource(sources, size, responsivePolicy) {
     const srcset = staticSupportedSources
         ?.map((source) => `${source.uri} ${source.width}w`)
         .join(', ');
-    const sizes = `${staticSupportedSources?.map(getCSSMediaQueryForSource).join(', ')}, ${staticSupportedSources[staticSupportedSources.length - 1]?.width}px`;
+    const sizes = `${staticSupportedSources
+        ?.map(getCSSMediaQueryForSource)
+        .join(', ')}, ${staticSupportedSources[staticSupportedSources.length - 1]?.width}px`;
     return {
         srcset,
         sizes,

package/build/web/useSourceSelection.js.map

@@ -1 +1 @@
-{"version":3,"file":"useSourceSelection.js","sourceRoot":"","sources":["../../src/web/useSourceSelection.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,QAAQ,EAAE,MAAM,EAAE,MAAM,OAAO,CAAC;AAGhD,OAAO,EAAE,gBAAgB,EAAE,iBAAiB,EAAE,MAAM,yBAAyB,CAAC;AAE9E,SAAS,qBAAqB,CAC5B,OAAkC,EAClC,IAAoB;IAEpB,IAAI,OAAO,EAAE,MAAM,KAAK,CAAC,EAAE;QACzB,OAAO,OAAO,CAAC,CAAC,CAAC,CAAC;KACnB;IACD,OAAO,CACL,CAAC,GAAG,CAAC,OAAO,IAAI,EAAE,CAAC,CAAC;QAClB,mEAAmE;QACnE,EAAE,GAAG,CAAC,CAAC,MAAM,EAAE,EAAE;QACf,IAAI,CAAC,IAAI,EAAE;YACT,OAAO,EAAE,MAAM,EAAE,OAAO,EAAE,CAAC,EAAE,MAAM,EAAE,KAAK,EAAE,CAAC;SAC9C;QACD,MAAM,EAAE,KAAK,EAAE,MAAM,EAAE,GACrB,OAAO,MAAM,KAAK,QAAQ,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,EAAE,KAAK,EAAE,IAAI,EAAE,MAAM,EAAE,IAAI,EAAE,CAAC;QACtE,IAAI,KAAK,IAAI,IAAI,IAAI,MAAM,IAAI,IAAI,EAAE;YACnC,OAAO,EAAE,MAAM,EAAE,OAAO,EAAE,CAAC,EAAE,MAAM,EAAE,KAAK,EAAE,CAAC;SAC9C;QACD,IAAI,KAAK,GAAG,IAAI,CAAC,KAAK,IAAI,MAAM,GAAG,IAAI,CAAC,MAAM,EAAE;YAC9C,OAAO;gBACL,MAAM;gBACN,OAAO,EAAE,IAAI,CAAC,GAAG,CAAC,IAAI,CAAC,KAAK,GAAG,KAAK,EAAE,IAAI,CAAC,MAAM,GAAG,MAAM,CAAC;gBAC3D,MAAM,EAAE,KAAK;aACd,CAAC;SACH;QACD,OAAO,EAAE,MAAM,EAAE,OAAO,EAAE,CAAC,KAAK,GAAG,IAAI,CAAC,KAAK,CAAC,GAAG,CAAC,MAAM,GAAG,IAAI,CAAC,MAAM,CAAC,EAAE,MAAM,EAAE,IAAI,EAAE,CAAC;IAC1F,CAAC,CAAC;SACD,IAAI,CAAC,CAAC,CAAC,EAAE,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,OAAO,GAAG,CAAC,CAAC,OAAO,CAAC;SACrC,IAAI,CAAC,CAAC,CAAC,EAAE,CAAC,EAAE,EAAE,CAAC,MAAM,CAAC,CAAC,CAAC,MAAM,CAAC,GAAG,MAAM,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,CAAC,EAAE,MAAM,IAAI,IAAI,CAC1E,CAAC;AACJ,CAAC;AAUD,SAAS,yBAAyB,CAAC,MAAmB;IACpD,OAAO,eAAe,MAAM,CAAC,mBAAmB,IAAI,MAAM,CAAC,KAAK,OAAO,MAAM,CAAC,KAAK,IAAI,CAAC;AAC1F,CAAC;AAED,SAAS,YAAY,CACnB,OAAkC,EAClC,IAAoB,EACpB,gBAAgD;IAEhD,IAAI,OAAO,IAAI,IAAI,IAAI,OAAO,CAAC,MAAM,KAAK,CAAC,EAAE;QAC3C,OAAO,IAAI,CAAC;KACb;IAED,IAAI,gBAAgB,KAAK,QAAQ,EAAE;QACjC,OAAO,qBAAqB,CAAC,OAAO,EAAE,IAAI,CAAC,CAAC;KAC7C;IACD,MAAM,sBAAsB,GAAG,OAAO;SACnC,MAAM,CACL,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,GAAG,IAAI,CAAC,CAAC,KAAK,IAAI,IAAI,IAAI,CAAC,gBAAgB,CAAC,CAAC,CAAC,GAAG,CAAC,IAAI,CAAC,iBAAiB,CAAC,CAAC,CAAC,GAAG,CAAC,CACzF;SACA,IAAI,CACH,CAAC,CAAC,EAAE,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,CAAC,mBAAmB,IAAI,CAAC,CAAC,KAAK,IAAI,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,mBAAmB,IAAI,CAAC,CAAC,KAAK,IAAI,CAAC,CAAC,CAC5F,CAAC;IAEJ,IAAI,sBAAsB,CAAC,MAAM,KAAK,CAAC,EAAE;QACvC,OAAO,CAAC,IAAI,CACV,qPAAqP,CACtP,CAAC;QACF,OAAO,qBAAqB,CAAC,OAAO,EAAE,IAAI,CAAC,CAAC;KAC7C;IAED,MAAM,MAAM,GAAG,sBAAsB;QACnC,EAAE,GAAG,CAAC,CAAC,MAAM,EAAE,EAAE,CAAC,GAAG,MAAM,CAAC,GAAG,IAAI,MAAM,CAAC,KAAK,GAAG,CAAC;SAClD,IAAI,CAAC,IAAI,CAAC,CAAC;IACd,MAAM,KAAK,GAAG,GAAG,sBAAsB,EAAE,GAAG,CAAC,yBAAyB,CAAC,CAAC,IAAI,CAAC,IAAI,CAAC,KAChF,sBAAsB,CAAC,sBAAsB,CAAC,MAAM,GAAG,CAAC,CAAC,EAAE,KAC7D,IAAI,CAAC;IACL,OAAO;QACL,MAAM;QACN,KAAK;QACL,GAAG,EAAE,sBAAsB,CAAC,sBAAsB,CAAC,MAAM,GAAG,CAAC,CAAC,EAAE,GAAG,IAAI,EAAE;QACzE,IAAI,EAAE,QAAQ;KACf,CAAC;AACJ,CAAC;AAOD,MAAM,CAAC,OAAO,UAAU,kBAAkB,CACxC,OAAuB,EACvB,mBAAmD,QAAQ,EAC3D,mBAAkE;IAElE,MAAM,oBAAoB,GAAG,CAAC,OAAO,EAAE,MAAM,IAAI,CAAC,CAAC,GAAG,CAAC,CAAC;IACxD,sDAAsD;IACtD,MAAM,CAAC,IAAI,EAAE,OAAO,CAAC,GAAG,QAAQ,CAAiB,IAAI,CAAC,CAAC;IACvD,MAAM,cAAc,GAAG,MAAM,CAAwB,IAAI,CAAC,CAAC;IAE3D,KAAK,CAAC,SAAS,CAAC,GAAG,EAAE;QACnB,OAAO,GAAG,EAAE;YACV,cAAc,CAAC,OAAO,EAAE,UAAU,EAAE,CAAC;QACvC,CAAC,CAAC;IACJ,CAAC,EAAE,EAAE,CAAC,CAAC;IAEP,MAAM,YAAY,GAAG,KAAK,CAAC,WAAW,CACpC,CAAC,OAAuB,EAAE,EAAE;QAC1B,6FAA6F;QAC7F,IAAI,CAAC,oBAAoB,IAAI,CAAC,mBAAmB,EAAE;YACjD,OAAO;SACR;QACD,MAAM,IAAI,GAAG,OAAO,EAAE,qBAAqB,EAAE,CAAC;QAC9C,mBAAmB,EAAE,CAAC,OAAO,EAAE,IAAI,CAAC,CAAC;QACrC,OAAO,CAAC,IAAI,CAAC,CAAC;QAEd,IAAI,gBAAgB,KAAK,MAAM,EAAE;YAC/B,cAAc,CAAC,OAAO,EAAE,UAAU,EAAE,CAAC;YACrC,IAAI,CAAC,OAAO,EAAE;gBACZ,OAAO;aACR;YACD,cAAc,CAAC,OAAO,GAAG,IAAI,cAAc,CAAC,CAAC,OAAO,EAAE,EAAE;gBACtD,OAAO,CAAC,OAAO,CAAC,CAAC,CAAC,CAAC,WAAW,CAAC,CAAC;gBAChC,mBAAmB,EAAE,CAAC,OAAO,CAAC,CAAC,CAAC,CAAC,MAAa,EAAE,OAAO,CAAC,CAAC,CAAC,CAAC,WAAW,CAAC,CAAC;YAC1E,CAAC,CAAC,CAAC;YACH,cAAc,CAAC,OAAO,CAAC,OAAO,CAAC,OAAO,CAAC,CAAC;SACzC;IACH,CAAC,EACD,CAAC,oBAAoB,EAAE,gBAAgB,CAAC,CACzC,CAAC;IAEF,MAAM,MAAM,GAAG,YAAY,CAAC,OAAO,EAAE,IAAI,EAAE,gBAAgB,CAAC,CAAC;IAE7D,OAAO,KAAK,CAAC,OAAO,CAClB,GAAG,EAAE,CAAC,CAAC;QACL,YAAY;QACZ,MAAM;KACP,CAAC,EACF,CAAC,MAAM,CAAC,CACT,CAAC;AACJ,CAAC","sourcesContent":["import React, { useState, useRef } from 'react';\n\nimport { ImageProps, ImageSource } from '../Image.types';\nimport { isBlurhashString, isThumbhashString } from '../utils/resolveSources';\n\nfunction findBestSourceForSize(\n  sources: ImageSource[] | undefined,\n  size: DOMRect | null\n): ImageSource | null {\n  if (sources?.length === 1) {\n    return sources[0];\n  }\n  return (\n    [...(sources || [])]\n      // look for the smallest image that's still larger then a container\n      ?.map((source) => {\n        if (!size) {\n          return { source, penalty: 0, covers: false };\n        }\n        const { width, height } =\n          typeof source === 'object' ? source : { width: null, height: null };\n        if (width == null || height == null) {\n          return { source, penalty: 0, covers: false };\n        }\n        if (width < size.width || height < size.height) {\n          return {\n            source,\n            penalty: Math.max(size.width - width, size.height - height),\n            covers: false,\n          };\n        }\n        return { source, penalty: (width - size.width) * (height - size.height), covers: true };\n      })\n      .sort((a, b) => a.penalty - b.penalty)\n      .sort((a, b) => Number(b.covers) - Number(a.covers))[0]?.source ?? null\n  );\n}\n\nexport interface SrcSetSource extends ImageSource {\n  srcset: string;\n  sizes: string;\n  // used as key and a fallback in case srcset is not supported\n  uri: string;\n  type: 'srcset';\n}\n\nfunction getCSSMediaQueryForSource(source: ImageSource) {\n  return `(max-width: ${source.webMaxViewportWidth ?? source.width}px) ${source.width}px`;\n}\n\nfunction selectSource(\n  sources: ImageSource[] | undefined,\n  size: DOMRect | null,\n  responsivePolicy: ImageProps['responsivePolicy']\n): ImageSource | SrcSetSource | null {\n  if (sources == null || sources.length === 0) {\n    return null;\n  }\n\n  if (responsivePolicy !== 'static') {\n    return findBestSourceForSize(sources, size);\n  }\n  const staticSupportedSources = sources\n    .filter(\n      (s) => s.uri && s.width != null && !isBlurhashString(s.uri) && !isThumbhashString(s.uri)\n    )\n    .sort(\n      (a, b) => (a.webMaxViewportWidth ?? a.width ?? 0) - (b.webMaxViewportWidth ?? b.width ?? 0)\n    );\n\n  if (staticSupportedSources.length === 0) {\n    console.warn(\n      \"You've set the `static` responsivePolicy but none of the sources have the `width` properties set. Make sure you set both `width` and `webMaxViewportWidth` for best results when using static responsiveness. Falling back to the `initial` policy.\"\n    );\n    return findBestSourceForSize(sources, size);\n  }\n\n  const srcset = staticSupportedSources\n    ?.map((source) => `${source.uri} ${source.width}w`)\n    .join(', ');\n  const sizes = `${staticSupportedSources?.map(getCSSMediaQueryForSource).join(', ')}, ${\n    staticSupportedSources[staticSupportedSources.length - 1]?.width\n  }px`;\n  return {\n    srcset,\n    sizes,\n    uri: staticSupportedSources[staticSupportedSources.length - 1]?.uri ?? '',\n    type: 'srcset',\n  };\n}\n\ntype UseSourceSelectionReturn = {\n  containerRef: (element: HTMLDivElement) => void;\n  source: ImageSource | SrcSetSource | null;\n};\n\nexport default function useSourceSelection(\n  sources?: ImageSource[],\n  responsivePolicy: ImageProps['responsivePolicy'] = 'static',\n  measurementCallback?: (target: HTMLElement, size: DOMRect) => void\n): UseSourceSelectionReturn {\n  const hasMoreThanOneSource = (sources?.length ?? 0) > 1;\n  // null - not calculated yet, DOMRect - size available\n  const [size, setSize] = useState<null | DOMRect>(null);\n  const resizeObserver = useRef<ResizeObserver | null>(null);\n\n  React.useEffect(() => {\n    return () => {\n      resizeObserver.current?.disconnect();\n    };\n  }, []);\n\n  const containerRef = React.useCallback(\n    (element: HTMLDivElement) => {\n      // we can't short circuit here since we need to read the size for better animated transitions\n      if (!hasMoreThanOneSource && !measurementCallback) {\n        return;\n      }\n      const rect = element?.getBoundingClientRect();\n      measurementCallback?.(element, rect);\n      setSize(rect);\n\n      if (responsivePolicy === 'live') {\n        resizeObserver.current?.disconnect();\n        if (!element) {\n          return;\n        }\n        resizeObserver.current = new ResizeObserver((entries) => {\n          setSize(entries[0].contentRect);\n          measurementCallback?.(entries[0].target as any, entries[0].contentRect);\n        });\n        resizeObserver.current.observe(element);\n      }\n    },\n    [hasMoreThanOneSource, responsivePolicy]\n  );\n\n  const source = selectSource(sources, size, responsivePolicy);\n\n  return React.useMemo(\n    () => ({\n      containerRef,\n      source,\n    }),\n    [source]\n  );\n}\n"]}
+{"version":3,"file":"useSourceSelection.js","sourceRoot":"","sources":["../../src/web/useSourceSelection.ts"],"names":[],"mappings":"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","sourcesContent":["import React, { useState, useRef } from 'react';\n\nimport { ImageProps, ImageSource } from '../Image.types';\nimport { isBlurhashString, isThumbhashString } from '../utils/resolveSources';\n\nfunction findBestSourceForSize(\n  sources: ImageSource[] | undefined,\n  size: DOMRect | null\n): ImageSource | null {\n  if (sources?.length === 1) {\n    return sources[0];\n  }\n  return (\n    [...(sources || [])]\n      // look for the smallest image that's still larger then a container\n      ?.map((source) => {\n        if (!size) {\n          return { source, penalty: 0, covers: false };\n        }\n        const { width, height } =\n          typeof source === 'object' ? source : { width: null, height: null };\n        if (width == null || height == null) {\n          return { source, penalty: 0, covers: false };\n        }\n        if (width < size.width || height < size.height) {\n          return {\n            source,\n            penalty: Math.max(size.width - width, size.height - height),\n            covers: false,\n          };\n        }\n        return { source, penalty: (width - size.width) * (height - size.height), covers: true };\n      })\n      .sort((a, b) => a.penalty - b.penalty)\n      .sort((a, b) => Number(b.covers) - Number(a.covers))[0]?.source ?? null\n  );\n}\n\nexport interface SrcSetSource extends ImageSource {\n  srcset: string;\n  sizes: string;\n  // used as key and a fallback in case srcset is not supported\n  uri: string;\n  type: 'srcset';\n}\n\nfunction getCSSMediaQueryForSource(source: ImageSource) {\n  return `(max-width: ${source.webMaxViewportWidth ?? source.width}px) ${source.width}px`;\n}\n\nfunction selectSource(\n  sources: ImageSource[] | undefined,\n  size: DOMRect | null,\n  responsivePolicy: ImageProps['responsivePolicy']\n): ImageSource | SrcSetSource | null {\n  if (sources == null || sources.length === 0) {\n    return null;\n  }\n\n  if (responsivePolicy !== 'static') {\n    return findBestSourceForSize(sources, size);\n  }\n  const staticSupportedSources = sources\n    .filter(\n      (s) => s.uri && s.width != null && !isBlurhashString(s.uri) && !isThumbhashString(s.uri)\n    )\n    .sort(\n      (a, b) => (a.webMaxViewportWidth ?? a.width ?? 0) - (b.webMaxViewportWidth ?? b.width ?? 0)\n    );\n\n  if (staticSupportedSources.length === 0) {\n    console.warn(\n      \"You've set the `static` responsivePolicy but none of the sources have the `width` properties set. Make sure you set both `width` and `webMaxViewportWidth` for best results when using static responsiveness. Falling back to the `initial` policy.\"\n    );\n    return findBestSourceForSize(sources, size);\n  }\n\n  const srcset = staticSupportedSources\n    ?.map((source) => `${source.uri} ${source.width}w`)\n    .join(', ');\n  const sizes = `${staticSupportedSources\n    ?.map(getCSSMediaQueryForSource)\n    .join(', ')}, ${staticSupportedSources[staticSupportedSources.length - 1]?.width}px`;\n  return {\n    srcset,\n    sizes,\n    uri: staticSupportedSources[staticSupportedSources.length - 1]?.uri ?? '',\n    type: 'srcset',\n  };\n}\n\ntype UseSourceSelectionReturn = {\n  containerRef: (element: HTMLDivElement) => void;\n  source: ImageSource | SrcSetSource | null;\n};\n\nexport default function useSourceSelection(\n  sources?: ImageSource[],\n  responsivePolicy: ImageProps['responsivePolicy'] = 'static',\n  measurementCallback?: (target: HTMLElement, size: DOMRect) => void\n): UseSourceSelectionReturn {\n  const hasMoreThanOneSource = (sources?.length ?? 0) > 1;\n  // null - not calculated yet, DOMRect - size available\n  const [size, setSize] = useState<null | DOMRect>(null);\n  const resizeObserver = useRef<ResizeObserver | null>(null);\n\n  React.useEffect(() => {\n    return () => {\n      resizeObserver.current?.disconnect();\n    };\n  }, []);\n\n  const containerRef = React.useCallback(\n    (element: HTMLDivElement) => {\n      // we can't short circuit here since we need to read the size for better animated transitions\n      if (!hasMoreThanOneSource && !measurementCallback) {\n        return;\n      }\n      const rect = element?.getBoundingClientRect();\n      measurementCallback?.(element, rect);\n      setSize(rect);\n\n      if (responsivePolicy === 'live') {\n        resizeObserver.current?.disconnect();\n        if (!element) {\n          return;\n        }\n        resizeObserver.current = new ResizeObserver((entries) => {\n          setSize(entries[0].contentRect);\n          measurementCallback?.(entries[0].target as any, entries[0].contentRect);\n        });\n        resizeObserver.current.observe(element);\n      }\n    },\n    [hasMoreThanOneSource, responsivePolicy]\n  );\n\n  const source = selectSource(sources, size, responsivePolicy);\n\n  return React.useMemo(\n    () => ({\n      containerRef,\n      source,\n    }),\n    [source]\n  );\n}\n"]}

package/ios/ExpoImage.podspec

@@ -16,9 +16,9 @@ Pod::Spec.new do |s|
   s.static_framework = true
 
   s.dependency 'ExpoModulesCore'
-  s.dependency 'SDWebImage', '~> 5.15.8'
-  s.dependency 'SDWebImageWebPCoder', '~> 0.11.0'
-  s.dependency 'SDWebImageAVIFCoder', '~> 0.10.0'
+  s.dependency 'SDWebImage', '~> 5.17.0'
+  s.dependency 'SDWebImageWebPCoder', '~> 0.13.0'
+  s.dependency 'SDWebImageAVIFCoder', '~> 0.10.1'
   s.dependency 'SDWebImageSVGCoder', '~> 1.7.0'
 
   # Swift/Objective-C compatibility

package/ios/ImageView.swift

@@ -197,7 +197,13 @@ public final class ImageView: ExpoView {
     _ imageUrl: URL?
   ) {
     if let error = error {
-      onError(["error": error.localizedDescription])
+      let code = (error as NSError).code
+
+      // SDWebImage throws an error when loading operation is canceled (interrupted) by another load request.
+      // We do want to ignore that one and wait for the new request to load.
+      if code != SDWebImageError.cancelled.rawValue {
+        onError(["error": error.localizedDescription])
+      }
       return
     }
     guard finished else {

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "expo-image",
   "title": "Expo Image",
-  "version": "1.4.1",
+  "version": "1.5.1",
   "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": "2240630a92eb79a4e4bf73e1439916c394876478"
+  "gitHead": "abdc0f504e6daa4da247db248bff24850083f673"
 }

package/src/ExpoImage.web.tsx

@@ -90,25 +90,24 @@ export default function ExpoImage({
     ? [
         initialNodeAnimationKey,
         ({ onAnimationFinished }) =>
-          (className, style) =>
-            (
-              <ImageWrapper
-                {...props}
-                source={placeholder?.[0]}
-                style={{
-                  objectFit: imagePlaceholderContentFit,
-                  ...(blurRadius ? { filter: `blur(${blurRadius}px)` } : {}),
-                  ...style,
-                }}
-                className={className}
-                events={{
-                  onTransitionEnd: [onAnimationFinished],
-                }}
-                contentPosition={{ left: '50%', top: '50%' }}
-                hashPlaceholderContentPosition={contentPosition}
-                hashPlaceholderStyle={blurhashStyle}
-              />
-            ),
+          (className, style) => (
+            <ImageWrapper
+              {...props}
+              source={placeholder?.[0]}
+              style={{
+                objectFit: imagePlaceholderContentFit,
+                ...(blurRadius ? { filter: `blur(${blurRadius}px)` } : {}),
+                ...style,
+              }}
+              className={className}
+              events={{
+                onTransitionEnd: [onAnimationFinished],
+              }}
+              contentPosition={{ left: '50%', top: '50%' }}
+              hashPlaceholderContentPosition={contentPosition}
+              hashPlaceholderStyle={blurhashStyle}
+            />
+          ),
       ]
     : null;
 
@@ -120,30 +119,29 @@ export default function ExpoImage({
   const currentNode: AnimationManagerNode = [
     currentNodeAnimationKey,
     ({ onAnimationFinished, onReady, onMount, onError: onErrorInner }) =>
-      (className, style) =>
-        (
-          <ImageWrapper
-            {...props}
-            source={selectedSource || placeholder?.[0]}
-            events={{
-              onError: [onErrorAdapter(onError), onLoadEnd, onErrorInner],
-              onLoad: [onLoadAdapter(onLoad), onLoadEnd, onReady],
-              onMount: [onMount],
-              onTransitionEnd: [onAnimationFinished],
-            }}
-            style={{
-              objectFit: selectedSource ? contentFit : imagePlaceholderContentFit,
-              ...(blurRadius ? { filter: `blur(${blurRadius}px)` } : {}),
-              ...style,
-            }}
-            className={className}
-            priority={priority}
-            contentPosition={selectedSource ? contentPosition : { top: '50%', left: '50%' }}
-            hashPlaceholderContentPosition={contentPosition}
-            hashPlaceholderStyle={blurhashStyle}
-            accessibilityLabel={props.accessibilityLabel}
-          />
-        ),
+      (className, style) => (
+        <ImageWrapper
+          {...props}
+          source={selectedSource || placeholder?.[0]}
+          events={{
+            onError: [onErrorAdapter(onError), onLoadEnd, onErrorInner],
+            onLoad: [onLoadAdapter(onLoad), onLoadEnd, onReady],
+            onMount: [onMount],
+            onTransitionEnd: [onAnimationFinished],
+          }}
+          style={{
+            objectFit: selectedSource ? contentFit : imagePlaceholderContentFit,
+            ...(blurRadius ? { filter: `blur(${blurRadius}px)` } : {}),
+            ...style,
+          }}
+          className={className}
+          priority={priority}
+          contentPosition={selectedSource ? contentPosition : { top: '50%', left: '50%' }}
+          hashPlaceholderContentPosition={contentPosition}
+          hashPlaceholderStyle={blurhashStyle}
+          accessibilityLabel={props.accessibilityLabel}
+        />
+      ),
   ];
   return (
     <View ref={containerRef} dataSet={{ expoimage: true }} style={[{ overflow: 'hidden' }, style]}>

package/src/utils/resolveSources.tsx

@@ -1,6 +1,6 @@
-import { ImageNativeProps, ImageProps, ImageSource } from '../Image.types';
 import resolveAssetSource from './resolveAssetSource';
 import { resolveBlurhashString, resolveThumbhashString } from './resolveHashString';
+import { ImageNativeProps, ImageProps, ImageSource } from '../Image.types';
 
 export function isBlurhashString(str: string): boolean {
   return /^(blurhash:\/)?[\w#$%*+,\-.:;=?@[\]^_{}|~]+(\/[\d.]+)*$/.test(str);

package/src/web/AnimationManager.tsx

@@ -13,7 +13,7 @@ export type AnimationManagerNode = [
   key: string,
   renderFunction: (
     renderProps: NonNullable<Callbacks>
-  ) => (className: string, style: React.CSSProperties) => React.ReactElement
+  ) => (className: string, style: React.CSSProperties) => React.ReactElement,
 ];
 
 const SUPPORTED_ANIMATIONS: ImageTransition['effect'][] = [

package/src/web/ImageWrapper.tsx

@@ -1,14 +1,14 @@
 import React, { useEffect, Ref, useMemo } from 'react';
 
-import { ImageNativeProps, ImageSource } from '../Image.types';
-import { useBlurhash } from '../utils/blurhash/useBlurhash';
-import { isBlurhashString, isThumbhashString } from '../utils/resolveSources';
-import { thumbHashStringToDataURL } from '../utils/thumbhash/thumbhash';
 import ColorTintFilter, { getTintColorStyle } from './ColorTintFilter';
 import { ImageWrapperProps } from './ImageWrapper.types';
 import { getImageWrapperEventHandler } from './getImageWrapperEventHandler';
 import { absoluteFilledPosition, getObjectPositionFromContentPositionObject } from './positioning';
 import { SrcSetSource } from './useSourceSelection';
+import { ImageNativeProps, ImageSource } from '../Image.types';
+import { useBlurhash } from '../utils/blurhash/useBlurhash';
+import { isBlurhashString, isThumbhashString } from '../utils/resolveSources';
+import { thumbHashStringToDataURL } from '../utils/thumbhash/thumbhash';
 
 function getFetchPriorityFromImagePriority(priority: ImageNativeProps['priority'] = 'normal') {
   return priority && ['low', 'high'].includes(priority) ? priority : 'auto';

package/src/web/ImageWrapper.types.ts

@@ -1,7 +1,7 @@
 import { CSSProperties, SyntheticEvent } from 'react';
 
-import { ImageContentPositionObject, ImageSource } from '../Image.types';
 import { SrcSetSource } from './useSourceSelection';
+import { ImageContentPositionObject, ImageSource } from '../Image.types';
 
 export type ImageWrapperEvents = {
   onLoad?: (((event: SyntheticEvent<HTMLImageElement, Event>) => void) | undefined | null)[];

package/src/web/getImageWrapperEventHandler.ts

@@ -1,5 +1,5 @@
-import { ImageSource } from '../Image.types';
 import { ImageWrapperEvents } from './ImageWrapper.types';
+import { ImageSource } from '../Image.types';
 
 export function getImageWrapperEventHandler(
   events: ImageWrapperEvents | undefined,

package/src/web/useSourceSelection.ts

@@ -78,9 +78,9 @@ function selectSource(
   const srcset = staticSupportedSources
     ?.map((source) => `${source.uri} ${source.width}w`)
     .join(', ');
-  const sizes = `${staticSupportedSources?.map(getCSSMediaQueryForSource).join(', ')}, ${
-    staticSupportedSources[staticSupportedSources.length - 1]?.width
-  }px`;
+  const sizes = `${staticSupportedSources
+    ?.map(getCSSMediaQueryForSource)
+    .join(', ')}, ${staticSupportedSources[staticSupportedSources.length - 1]?.width}px`;
   return {
     srcset,
     sizes,