expo-image 1.2.0 → 1.2.1

package/CHANGELOG.md

@@ -10,6 +10,15 @@
 
 ### 💡 Others
 
+## 1.2.1 — 2023-04-17
+
+### 🐛 Bug fixes
+
+- [Android] Fix `url` property returned by the `onLoad` event. ([#22161](https://github.com/expo/expo/pull/22161) by [@lukmccall](https://github.com/lukmccall))
+- [Android] Fix images not loading after the app was foregrounded. ([#22159](https://github.com/expo/expo/pull/22159) by [@lukmccall](https://github.com/lukmccall))
+- [Android] Fixed image was loaded event if the view dimensions were 0. ([#22157](https://github.com/expo/expo/pull/22157) by [@lukmccall](https://github.com/lukmccall))
+- Fix generating the image from ThumbHash that starts with a slash character. ([#22160](https://github.com/expo/expo/pull/22160) by [@tsapeta](https://github.com/tsapeta))
+
 ## 1.2.0 — 2023-04-14
 
 ### 🎉 New features
@@ -22,6 +31,7 @@
 ### 🐛 Bug fixes
 
 - [Web] Prevent breaking in static rendering environments. ([#21883](https://github.com/expo/expo/pull/21883) by [@EvanBacon](https://github.com/EvanBacon))
+- [Android] Fixed image disappearing before navigation animation is complete. ([#22066](https://github.com/expo/expo/pull/22066) by [@sallen450](https://github.com/sallen450))
 - [Web] Fixed monorepo asset resolution in production for Metro web. ([#22094](https://github.com/expo/expo/pull/22094) by [@EvanBacon](https://github.com/EvanBacon))
 
 ## 1.1.0 — 2023-03-25

package/android/build.gradle

@@ -49,7 +49,7 @@ android {
     minSdkVersion safeExtGet("minSdkVersion", 21)
     targetSdkVersion safeExtGet("targetSdkVersion", 33)
     versionCode 1
-    versionName "1.2.0"
+    versionName "1.2.1"
   }
   lintOptions {
     abortOnError false

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

@@ -1,6 +1,7 @@
 package expo.modules.image
 
 import android.view.View
+import androidx.core.view.doOnDetach
 import com.bumptech.glide.Glide
 import com.bumptech.glide.load.model.GlideUrl
 import com.facebook.react.uimanager.PixelUtil
@@ -171,7 +172,9 @@ class ExpoImageModule : Module() {
       }
 
       OnViewDestroys { view: ExpoImageViewWrapper ->
-        view.onViewDestroys()
+        view.doOnDetach {
+          view.onViewDestroys()
+        }
       }
     }
   }

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

@@ -3,7 +3,6 @@ package expo.modules.image
 import android.annotation.SuppressLint
 import android.app.Activity
 import android.content.Context
-import android.graphics.Rect
 import android.graphics.drawable.Animatable
 import android.graphics.drawable.Drawable
 import android.os.Build
@@ -371,13 +370,11 @@ class ExpoImageViewWrapper(context: Context, appContext: AppContext) : ExpoView(
       return sources.first()
     }
 
-    val selfRect = Rect(0, 0, width, height)
-    if (selfRect.isEmpty) {
+    val targetPixelCount = width * height
+    if (targetPixelCount == 0) {
       return null
     }
 
-    val targetPixelCount = selfRect.width() * selfRect.height()
-
     var bestSource: SourceMap? = null
     var bestFit = Double.MAX_VALUE
 
@@ -433,8 +430,8 @@ class ExpoImageViewWrapper(context: Context, appContext: AppContext) : ExpoView(
 
     val sourceToLoad = bestSource?.createGlideModel(context)
     val placeholder = bestPlaceholder?.createGlideModel(context)
-    // We only clean the image when the source is set to null and we don't have a placeholder.
-    if ((bestSource == null || sourceToLoad == null) && placeholder == null) {
+    // We only clean the image when the source is set to null and we don't have a placeholder or the view is empty.
+    if (width == 0 || height == 0 || (bestSource == null || sourceToLoad == null) && placeholder == null) {
       firstView.recycleView()
       secondView.recycleView()
 
@@ -621,6 +618,7 @@ class ExpoImageViewWrapper(context: Context, appContext: AppContext) : ExpoView(
   companion object {
     private var requestManager: RequestManager? = null
     private var appContextRef: WeakReference<AppContext?> = WeakReference(null)
+    private var activityRef: WeakReference<Activity?> = WeakReference(null)
 
     fun getOrCreateRequestManager(
       appContext: AppContext,
@@ -630,13 +628,15 @@ class ExpoImageViewWrapper(context: Context, appContext: AppContext) : ExpoView(
         ?: return createNewRequestManager(activity).also {
           requestManager = it
           appContextRef = WeakReference(appContext)
+          activityRef = WeakReference(activity)
         }
 
-      // Request manager was created using different activity
-      if (appContextRef.get() != appContext) {
+      // Request manager was created using different activity or app context
+      if (appContextRef.get() != appContext || activityRef.get() != activity) {
         return createNewRequestManager(activity).also {
           requestManager = it
           appContextRef = WeakReference(appContext)
+          activityRef = WeakReference(activity)
         }
       }
 

package/android/src/main/java/expo/modules/image/okhttp/ExpoImageOkHttpClientGlideModule.kt

@@ -62,6 +62,10 @@ class GlideUrlWithCustomCacheKey(
  */
 data class GlideUrlWrapper(val glideUrl: GlideUrl) {
   var progressListener: OkHttpProgressListener? = null
+
+  override fun toString(): String {
+    return glideUrl.toString()
+  }
 }
 
 @GlideModule

package/android/src/main/java/expo/modules/image/thumbhash/ThumbhashModelLoader.kt

@@ -13,8 +13,11 @@ class ThumbhashModelLoader : ModelLoader<GlideThumbhashModel, Bitmap> {
   override fun handles(model: GlideThumbhashModel): Boolean = true
 
   override fun buildLoadData(model: GlideThumbhashModel, width: Int, height: Int, options: Options): ModelLoader.LoadData<Bitmap> {
-    // Thumbhash might contain '/' characters
-    val thumbhash = model.uri.pathSegments.joinToString(separator = "/")
+    // The URI looks like this: thumbhash:/3OcRJYB4d3h\iIeHeEh3eIhw+j2w
+    // ThumbHash may include slashes which could break the structure of the URL, so we replace them
+    // with backslashes on the JS side and revert them back to slashes here, before generating the image.
+    val thumbhash = model.uri.pathSegments.joinToString(separator = "/").replace("\\", "/")
+
     return ModelLoader.LoadData(
       ObjectKey(model),
       ThumbhashFetcher(thumbhash)

package/build/utils/resolveHashString.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"resolveHashString.d.ts","sourceRoot":"","sources":["../../src/utils/resolveHashString.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,EAAE,MAAM,gBAAgB,CAAC;AAS7C;;;;KAIK;AACL,wBAAgB,qBAAqB,CAAC,GAAG,EAAE,MAAM,GAAG,WAAW,CAO9D;AAED;;;;KAIK;AACL,wBAAgB,sBAAsB,CAAC,GAAG,EAAE,MAAM,GAAG,WAAW,CAK/D"}
+{"version":3,"file":"resolveHashString.d.ts","sourceRoot":"","sources":["../../src/utils/resolveHashString.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,EAAE,MAAM,gBAAgB,CAAC;AAS7C;;;;KAIK;AACL,wBAAgB,qBAAqB,CAAC,GAAG,EAAE,MAAM,GAAG,WAAW,CAO9D;AAED;;;;KAIK;AACL,wBAAgB,sBAAsB,CAAC,GAAG,EAAE,MAAM,GAAG,WAAW,CAO/D"}

package/build/utils/resolveHashString.js

@@ -21,7 +21,9 @@ export function resolveBlurhashString(str) {
  * @return An ImageSource representing the provided thumbhash.
  * */
 export function resolveThumbhashString(str) {
-    const thumbhash = str.replace(/^thumbhash:\//, '');
+    // ThumbHash may contain slashes that could break the url when the slash is at the beginning.
+    // We replace slashes with backslashes to make sure we don't break the url's path.
+    const thumbhash = str.replace(/^thumbhash:\//, '').replace(/\//g, '\\');
     return {
         uri: hashToUri('thumbhash', thumbhash),
     };

package/build/utils/resolveHashString.js.map

@@ -1 +1 @@
-{"version":3,"file":"resolveHashString.js","sourceRoot":"","sources":["../../src/utils/resolveHashString.tsx"],"names":[],"mappings":"AAIA,SAAS,SAAS,CAAC,IAAmB,EAAE,IAAY;IAClD,MAAM,eAAe,GAAG,SAAS,CAAC,IAAI,CAAC,CAAC,OAAO,CAAC,IAAI,EAAE,KAAK,CAAC,CAAC,OAAO,CAAC,KAAK,EAAE,KAAK,CAAC,CAAC;IACnF,OAAO,GAAG,IAAI,KAAK,eAAe,EAAE,CAAC;AACvC,CAAC;AAED;;;;KAIK;AACL,MAAM,UAAU,qBAAqB,CAAC,GAAW;IAC/C,MAAM,CAAC,QAAQ,EAAE,KAAK,EAAE,MAAM,CAAC,GAAG,GAAG,CAAC,OAAO,CAAC,cAAc,EAAE,EAAE,CAAC,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC;IAC7E,OAAO;QACL,GAAG,EAAE,SAAS,CAAC,UAAU,EAAE,QAAQ,CAAC;QACpC,KAAK,EAAE,QAAQ,CAAC,KAAK,EAAE,EAAE,CAAC,IAAI,EAAE;QAChC,MAAM,EAAE,QAAQ,CAAC,MAAM,EAAE,EAAE,CAAC,IAAI,EAAE;KACnC,CAAC;AACJ,CAAC;AAED;;;;KAIK;AACL,MAAM,UAAU,sBAAsB,CAAC,GAAW;IAChD,MAAM,SAAS,GAAG,GAAG,CAAC,OAAO,CAAC,eAAe,EAAE,EAAE,CAAC,CAAC;IACnD,OAAO;QACL,GAAG,EAAE,SAAS,CAAC,WAAW,EAAE,SAAS,CAAC;KACvC,CAAC;AACJ,CAAC","sourcesContent":["import { ImageSource } from '../Image.types';\n\ntype ImageHashType = 'blurhash' | 'thumbhash';\n\nfunction hashToUri(type: ImageHashType, hash: string): string {\n  const encodedBlurhash = encodeURI(hash).replace(/#/g, '%23').replace(/\\?/g, '%3F');\n  return `${type}:/${encodedBlurhash}`;\n}\n\n/**\n * Converts a blurhash string (`blurhash:/<hash>/<width>/<height>` or <hash>/<width>/<height>) into an `ImageSource`.\n *\n * @return An ImageSource representing the provided blurhash.\n * */\nexport function resolveBlurhashString(str: string): ImageSource {\n  const [blurhash, width, height] = str.replace(/^blurhash:\\//, '').split('/');\n  return {\n    uri: hashToUri('blurhash', blurhash),\n    width: parseInt(width, 10) || 16,\n    height: parseInt(height, 10) || 16,\n  };\n}\n\n/**\n * Converts a thumbhash string (`thumbhash:/<hash>` or `<hash>`) into an `ImageSource`.\n *\n * @return An ImageSource representing the provided thumbhash.\n * */\nexport function resolveThumbhashString(str: string): ImageSource {\n  const thumbhash = str.replace(/^thumbhash:\\//, '');\n  return {\n    uri: hashToUri('thumbhash', thumbhash),\n  };\n}\n"]}
+{"version":3,"file":"resolveHashString.js","sourceRoot":"","sources":["../../src/utils/resolveHashString.tsx"],"names":[],"mappings":"AAIA,SAAS,SAAS,CAAC,IAAmB,EAAE,IAAY;IAClD,MAAM,eAAe,GAAG,SAAS,CAAC,IAAI,CAAC,CAAC,OAAO,CAAC,IAAI,EAAE,KAAK,CAAC,CAAC,OAAO,CAAC,KAAK,EAAE,KAAK,CAAC,CAAC;IACnF,OAAO,GAAG,IAAI,KAAK,eAAe,EAAE,CAAC;AACvC,CAAC;AAED;;;;KAIK;AACL,MAAM,UAAU,qBAAqB,CAAC,GAAW;IAC/C,MAAM,CAAC,QAAQ,EAAE,KAAK,EAAE,MAAM,CAAC,GAAG,GAAG,CAAC,OAAO,CAAC,cAAc,EAAE,EAAE,CAAC,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC;IAC7E,OAAO;QACL,GAAG,EAAE,SAAS,CAAC,UAAU,EAAE,QAAQ,CAAC;QACpC,KAAK,EAAE,QAAQ,CAAC,KAAK,EAAE,EAAE,CAAC,IAAI,EAAE;QAChC,MAAM,EAAE,QAAQ,CAAC,MAAM,EAAE,EAAE,CAAC,IAAI,EAAE;KACnC,CAAC;AACJ,CAAC;AAED;;;;KAIK;AACL,MAAM,UAAU,sBAAsB,CAAC,GAAW;IAChD,6FAA6F;IAC7F,kFAAkF;IAClF,MAAM,SAAS,GAAG,GAAG,CAAC,OAAO,CAAC,eAAe,EAAE,EAAE,CAAC,CAAC,OAAO,CAAC,KAAK,EAAE,IAAI,CAAC,CAAC;IACxE,OAAO;QACL,GAAG,EAAE,SAAS,CAAC,WAAW,EAAE,SAAS,CAAC;KACvC,CAAC;AACJ,CAAC","sourcesContent":["import { ImageSource } from '../Image.types';\n\ntype ImageHashType = 'blurhash' | 'thumbhash';\n\nfunction hashToUri(type: ImageHashType, hash: string): string {\n  const encodedBlurhash = encodeURI(hash).replace(/#/g, '%23').replace(/\\?/g, '%3F');\n  return `${type}:/${encodedBlurhash}`;\n}\n\n/**\n * Converts a blurhash string (`blurhash:/<hash>/<width>/<height>` or <hash>/<width>/<height>) into an `ImageSource`.\n *\n * @return An ImageSource representing the provided blurhash.\n * */\nexport function resolveBlurhashString(str: string): ImageSource {\n  const [blurhash, width, height] = str.replace(/^blurhash:\\//, '').split('/');\n  return {\n    uri: hashToUri('blurhash', blurhash),\n    width: parseInt(width, 10) || 16,\n    height: parseInt(height, 10) || 16,\n  };\n}\n\n/**\n * Converts a thumbhash string (`thumbhash:/<hash>` or `<hash>`) into an `ImageSource`.\n *\n * @return An ImageSource representing the provided thumbhash.\n * */\nexport function resolveThumbhashString(str: string): ImageSource {\n  // ThumbHash may contain slashes that could break the url when the slash is at the beginning.\n  // We replace slashes with backslashes to make sure we don't break the url's path.\n  const thumbhash = str.replace(/^thumbhash:\\//, '').replace(/\\//g, '\\\\');\n  return {\n    uri: hashToUri('thumbhash', thumbhash),\n  };\n}\n"]}

package/ios/ThumbhashLoader.swift

@@ -21,9 +21,10 @@ class ThumbhashLoader: NSObject, SDImageLoader {
       return nil
     }
 
-    // The URI looks like this: thumbhash:/3OcRJYB4d3h/iIeHeEh3eIhw+j2w
-    // the "thumbhash:/" part has to be skipped, but the hash can contain other '/' characters, which need to be included
-    var thumbhash = url.pathComponents[1..<url.pathComponents.count].joined(separator: "/")
+    // The URI looks like this: thumbhash:/3OcRJYB4d3h\iIeHeEh3eIhw+j2w
+    // ThumbHash may include slashes which could break the structure of the URL, so we replace them
+    // with backslashes on the JS side and revert them back to slashes here, before generating the image.
+    var thumbhash = (url.pathComponents[1] ?? "").replacingOccurrences(of: "\\", with: "/")
 
     // Thumbhashes with transparency cause the conversion to data to fail, padding the thumbhash string to correct length fixes that
     let remainder = thumbhash.count % 4
@@ -31,7 +32,7 @@ class ThumbhashLoader: NSObject, SDImageLoader {
       thumbhash = thumbhash.padding(toLength: thumbhash.count + 4 - remainder, withPad: "=", startingAt: 0)
     }
 
-    guard let thumbhashData = Data(base64Encoded: thumbhash, options: .ignoreUnknownCharacters) else {
+    guard !thumbhash.isEmpty, let thumbhashData = Data(base64Encoded: thumbhash, options: .ignoreUnknownCharacters) else {
       let error = makeNSError(description: "URL provided to ThumbhashLoader is invalid")
       completedBlock?(nil, nil, error, false)
       return nil

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "expo-image",
   "title": "Expo Image",
-  "version": "1.2.0",
+  "version": "1.2.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": "cbd598a92d6b14a61b429cf0f900a44ee73f0766"
+  "gitHead": "836bea54c7c2ba747df428d8217d85703a9701fb"
 }

package/src/utils/resolveHashString.tsx

@@ -27,7 +27,9 @@ export function resolveBlurhashString(str: string): ImageSource {
  * @return An ImageSource representing the provided thumbhash.
  * */
 export function resolveThumbhashString(str: string): ImageSource {
-  const thumbhash = str.replace(/^thumbhash:\//, '');
+  // ThumbHash may contain slashes that could break the url when the slash is at the beginning.
+  // We replace slashes with backslashes to make sure we don't break the url's path.
+  const thumbhash = str.replace(/^thumbhash:\//, '').replace(/\//g, '\\');
   return {
     uri: hashToUri('thumbhash', thumbhash),
   };