expo-image 1.10.1 → 1.10.3

package/CHANGELOG.md

@@ -10,6 +10,23 @@
 
 ### 💡 Others
 
+## 1.10.3 — 2024-01-12
+
+_This version does not introduce any user-facing changes._
+
+## 1.10.2 — 2024-01-10
+
+### 🐛 Bug fixes
+
+- [Android] Fixed the issue with the application of tint color when an element does not have a style assigned to it. ([#26251](https://github.com/expo/expo/pull/26251) by [@lukmccall](https://github.com/lukmccall))
+- [Android] Fixed the tint color was applied to the mask element. ([#26323](https://github.com/expo/expo/pull/26323) by [@lukmccall](https://github.com/lukmccall))
+- [Android] Fixed the tint color wasn't applied to the root element. ([#26339](https://github.com/expo/expo/pull/26339) by [@lukmccall](https://github.com/lukmccall))
+- [Android] Fixed that the tint color on SVGs can't be changed dynamically. ([#26350](https://github.com/expo/expo/pull/26350) by [@lukmccall](https://github.com/lukmccall))
+
+### 💡 Others
+
+- Replace deprecated `com.facebook.react:react-native:+` Android dependency with `com.facebook.react:react-android`. ([#26237](https://github.com/expo/expo/pull/26237) by [@kudo](https://github.com/kudo))
+
 ## 1.10.1 — 2023-12-19
 
 _This version does not introduce any user-facing changes._

package/android/build.gradle

@@ -67,7 +67,7 @@ android {
   namespace "expo.modules.image"
   defaultConfig {
     versionCode 1
-    versionName "1.10.1"
+    versionName "1.10.3"
     consumerProguardFiles("proguard-rules.pro")
 
     buildConfigField("boolean", "ALLOW_GLIDE_LOGS", project.properties.get("EXPO_ALLOW_GLIDE_LOGS", "false"))
@@ -108,8 +108,7 @@ dependencies {
     implementation "org.jetbrains.kotlin:kotlin-stdlib-jdk7:${getKotlinVersion()}"
   }
 
-  //noinspection GradleDynamicVersion
-  implementation 'com.facebook.react:react-native:+'  // From node_modules
+  implementation 'com.facebook.react:react-android'
 
   api "com.github.bumptech.glide:glide:${GLIDE_VERSION}"
   kapt "com.github.bumptech.glide:compiler:${GLIDE_VERSION}"

package/android/src/main/java/com/caverock/androidsvg/SVGStyler.kt

@@ -1,5 +1,9 @@
 package com.caverock.androidsvg
 
+import com.caverock.androidsvg.SVG.SPECIFIED_COLOR
+import com.caverock.androidsvg.SVG.SPECIFIED_FILL
+import com.caverock.androidsvg.SVG.SvgElementBase
+
 internal fun replaceColor(paint: SVG.SvgPaint?, newColor: Int) {
   if (paint is SVG.Colour && paint !== SVG.Colour.TRANSPARENT) {
     paint.colour = newColor
@@ -19,15 +23,88 @@ internal fun replaceStyles(style: SVG.Style?, newColor: Int) {
   replaceColor(style.viewportFill, newColor)
 }
 
-internal fun applyTintColor(element: SVG.SvgObject, newColor: Int) {
-  if (element is SVG.SvgElementBase) {
+internal fun hasStyle(element: SvgElementBase): Boolean {
+  if (element.style == null && element.baseStyle == null) {
+    return false
+  }
+
+  val style = element.style
+  val hasColorInStyle = style != null &&
+    (
+      style.color != null || style.fill != null || style.stroke != null ||
+        style.stroke != null || style.stopColor != null || style.solidColor != null
+      )
+
+  if (hasColorInStyle) {
+    return true
+  }
+
+  val baseStyle = element.baseStyle ?: return false
+  return baseStyle.color != null || baseStyle.fill != null || baseStyle.stroke != null ||
+    baseStyle.viewportFill != null || baseStyle.stopColor != null || baseStyle.solidColor != null
+}
+
+internal fun defineStyles(element: SvgElementBase, newColor: Int, hasStyle: Boolean) {
+  if (hasStyle) {
+    return
+  }
+
+  val style = if (element.style != null) {
+    element.style
+  } else {
+    SVG.Style().also {
+      element.style = it
+    }
+  }
+
+  val color = SVG.Colour(newColor)
+  when (element) {
+    is SVG.Path,
+    is SVG.Circle,
+    is SVG.Ellipse,
+    is SVG.Rect,
+    is SVG.SolidColor,
+    is SVG.Line,
+    is SVG.Polygon,
+    is SVG.PolyLine -> {
+      style.apply {
+        fill = color
+
+        specifiedFlags = SPECIFIED_FILL
+      }
+    }
+
+    is SVG.TextPath -> {
+      style.apply {
+        this.color = color
+
+        specifiedFlags = SPECIFIED_COLOR
+      }
+    }
+  }
+}
+
+internal fun applyTintColor(element: SVG.SvgObject, newColor: Int, parentDefinesStyle: Boolean) {
+  // We want to keep the colors in the mask as they control the visibility of the element to which the mask is applied.
+  if (element is SVG.Mask) {
+    return
+  }
+
+  val definesStyle = if (element is SvgElementBase) {
+    val hasStyle = parentDefinesStyle || hasStyle(element)
+
     replaceStyles(element.baseStyle, newColor)
     replaceStyles(element.style, newColor)
+    defineStyles(element, newColor, hasStyle)
+
+    hasStyle
+  } else {
+    parentDefinesStyle
   }
 
   if (element is SVG.SvgContainer) {
     for (child in element.children) {
-      applyTintColor(child, newColor)
+      applyTintColor(child, newColor, definesStyle)
     }
   }
 }
@@ -35,9 +112,14 @@ internal fun applyTintColor(element: SVG.SvgObject, newColor: Int) {
 fun applyTintColor(svg: SVG, newColor: Int) {
   val root = svg.rootElement
 
+  svg.cssRules?.forEach { rule ->
+    replaceStyles(rule.style, newColor)
+  }
+  replaceStyles(root.baseStyle, newColor)
   replaceStyles(root.style, newColor)
+  val hasStyle = hasStyle(root)
 
   for (child in root.children) {
-    applyTintColor(child, newColor)
+    applyTintColor(child, newColor, hasStyle)
   }
 }

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

@@ -31,6 +31,7 @@ import expo.modules.image.records.ImageLoadEvent
 import expo.modules.image.records.ImageProgressEvent
 import expo.modules.image.records.ImageTransition
 import expo.modules.image.records.SourceMap
+import expo.modules.image.svg.SVGPictureDrawable
 import expo.modules.kotlin.AppContext
 import expo.modules.kotlin.tracing.beginAsyncTraceBlock
 import expo.modules.kotlin.tracing.trace
@@ -127,7 +128,12 @@ class ExpoImageViewWrapper(context: Context, appContext: AppContext) : ExpoView(
   internal var tintColor: Int? = null
     set(value) {
       field = value
-      activeView.setTintColor(value)
+      // To apply the tint color to the SVG, we need to recreate the drawable.
+      if (activeView.drawable is SVGPictureDrawable) {
+        shouldRerender = true
+      } else {
+        activeView.setTintColor(value)
+      }
     }
 
   internal var isFocusableProp: Boolean = false

package/expo-module.config.json

@@ -1,5 +1,5 @@
 {
-  "platforms": ["ios", "android"],
+  "platforms": ["ios", "android", "tvos"],
   "ios": {
     "modules": ["ImageModule"]
   },

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "expo-image",
   "title": "Expo Image",
-  "version": "1.10.1",
+  "version": "1.10.3",
   "description": "A cross-platform, performant image component for React Native and Expo with Web support",
   "main": "build/index.js",
   "types": "build/index.d.ts",
@@ -35,5 +35,5 @@
   "peerDependencies": {
     "expo": "*"
   },
-  "gitHead": "43f1b4f8a5a9bca649e4e7ca6e4155482a162431"
+  "gitHead": "f9100f83a5d971dbdef83336a8f055046566fa83"
 }