expo-image 1.3.0 → 1.3.2

package/CHANGELOG.md

@@ -10,6 +10,18 @@
 
 ### 💡 Others
 
+## 1.3.2 — 2023-07-12
+
+### 🐛 Bug fixes
+
+- [iOS] Fixed `tintColor` prop not working for SVGs. ([#23418](https://github.com/expo/expo/pull/23418) by [@tsapeta](https://github.com/tsapeta))
+
+## 1.3.1 — 2023-06-29
+
+### 🐛 Bug fixes
+
+- Fixed an issue where recyclingKey would reset the image source on mount. ([#23187](https://github.com/expo/expo/pull/23187) by [@hirbod](https://github.com/hirbod))
+
 ## 1.3.0 — 2023-06-13
 
 ### 🎉 New features

package/android/build.gradle

@@ -50,7 +50,7 @@ android {
     minSdkVersion safeExtGet("minSdkVersion", 21)
     targetSdkVersion safeExtGet("targetSdkVersion", 33)
     versionCode 1
-    versionName "1.3.0"
+    versionName "1.3.2"
   }
   lintOptions {
     abortOnError false

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

@@ -151,7 +151,7 @@ class ExpoImageViewWrapper(context: Context, appContext: AppContext) : ExpoView(
 
   var recyclingKey: String? = null
     set(value) {
-      clearViewBeforeChangingSource = value != null && value != field
+      clearViewBeforeChangingSource = field != null && value != null && value != field
       field = value
     }
 

package/ios/ImageModule.swift

@@ -54,7 +54,7 @@ public final class ImageModule: Module {
       }
 
       Prop("tintColor") { (view, tintColor: UIColor?) in
-        view.imageTintColor = tintColor ?? .clear
+        view.imageTintColor = tintColor
       }
 
       Prop("priority") { (view, priority: ImagePriority?) in

package/ios/ImageView.swift

@@ -37,13 +37,13 @@ public final class ImageView: ExpoView {
 
   var blurRadius: CGFloat = 0.0
 
-  var imageTintColor: UIColor = .clear
+  var imageTintColor: UIColor?
 
   var cachePolicy: ImageCachePolicy = .disk
 
   var recyclingKey: String? {
     didSet {
-      if recyclingKey != oldValue {
+      if oldValue != nil && recyclingKey != oldValue {
         sdImageView.image = nil
       }
     }
@@ -128,6 +128,18 @@ public final class ImageView: ExpoView {
     // incorrectly rendered images for resize modes that don't scale (`center` and `repeat`).
     context[.imageScaleFactor] = source.scale
 
+    // It seems that `UIImageView` can't tint some vector graphics. If the `tintColor` prop is specified,
+    // we tell the SVG coder to decode to a bitmap instead. This will become useless when we switch to SVGNative coder.
+    if imageTintColor != nil {
+      context[.imageDecodeOptions] = [
+        SDImageCoderOption.webImageContext: [
+          "svgPrefersBitmap": true,
+          "svgImageSize": sdImageView.bounds.size,
+          "svgImagePreserveAspectRatio": true
+        ]
+      ]
+    }
+
     if source.isCachingAllowed {
       let sdCacheType = cachePolicy.toSdCacheType().rawValue
       context[.originalQueryCacheType] = sdCacheType
@@ -297,15 +309,14 @@ public final class ImageView: ExpoView {
     guard isViewEmpty || !hasAnySource, let placeholder = placeholderImage else {
       return
     }
-    setImage(placeholder, contentFit: placeholderContentFit)
+    setImage(placeholder, contentFit: placeholderContentFit, isPlaceholder: true)
   }
 
   // MARK: - Processing
 
   private func createTransformPipeline() -> SDImagePipelineTransformer {
     let transformers: [SDImageTransformer] = [
-      SDImageBlurTransformer(radius: blurRadius),
-      SDImageTintTransformer(color: imageTintColor)
+      SDImageBlurTransformer(radius: blurRadius)
     ]
     return SDImagePipelineTransformer(transformers: transformers)
   }
@@ -338,17 +349,24 @@ public final class ImageView: ExpoView {
 
       UIView.transition(with: sdImageView, duration: seconds, options: options) { [weak self] in
         if let self = self {
-          self.setImage(image, contentFit: self.contentFit)
+          self.setImage(image, contentFit: self.contentFit, isPlaceholder: false)
         }
       }
     } else {
-      setImage(image, contentFit: contentFit)
+      setImage(image, contentFit: contentFit, isPlaceholder: false)
     }
   }
 
-  private func setImage(_ image: UIImage?, contentFit: ContentFit) {
+  private func setImage(_ image: UIImage?, contentFit: ContentFit, isPlaceholder: Bool) {
     sdImageView.contentMode = contentFit.toContentMode()
-    sdImageView.image = image
+
+    if let imageTintColor, !isPlaceholder {
+      sdImageView.tintColor = imageTintColor
+      sdImageView.image = image?.withRenderingMode(.alwaysTemplate)
+    } else {
+      sdImageView.tintColor = nil
+      sdImageView.image = image
+    }
 
     if enableLiveTextInteraction {
       analyzeImage()

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "expo-image",
   "title": "Expo Image",
-  "version": "1.3.0",
+  "version": "1.3.2",
   "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": "3ccd2edee9cbfed217557675cb50f0ba5e55a9e4"
+  "gitHead": "8fdc53c90c52242a80ea511ee3073d9ab950bc68"
 }