expo-image 1.10.0 → 1.10.2

package/CHANGELOG.md

@@ -10,6 +10,22 @@
 
 ### 💡 Others
 
+## 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))
+
+### 💡 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._
+
 ## 1.10.0 — 2023-12-12
 
 ### 🎉 New features

package/README.md

@@ -21,34 +21,44 @@ A cross-platform, performant image component for React Native and Expo.
 
 ## Supported image formats
 
-|   Format   | Android | iOS |                        Web                        |
-| :--------: | :-----: | :-: | :-----------------------------------------------: |
-|    WebP    |   ✅    | ✅  |   ✅ [~96% adoption](https://caniuse.com/webp)    |
-| PNG / APNG |   ✅    | ✅  | ✅ / ✅ [~96% adoption](https://caniuse.com/apng) |
-|    AVIF    |   ✅    | ✅  |   ⏳ [~79% adoption](https://caniuse.com/avif)    |
-|    HEIC    |   ✅    | ✅  |  ❌ [not adopted yet](https://caniuse.com/heif)   |
-|    JPEG    |   ✅    | ✅  |                        ✅                         |
-|    GIF     |   ✅    | ✅  |                        ✅                         |
-|    SVG     |   ✅    | ✅  |                        ✅                         |
-|    ICO     |   ✅    | ✅  |                        ✅                         |
-|    ICNS    |   ❌    | ✅  |                        ❌                         |
+|   Format   | Android | iOS |                      Web                       |
+| :--------: | :-----: | :-: | :--------------------------------------------: |
+|    WebP    |   ✅    | ✅  |                       ✅                       |
+| PNG / APNG |   ✅    | ✅  |                       ✅                       |
+|    AVIF    |   ✅    | ✅  |  ⏳ [~87% adoption](https://caniuse.com/avif)  |
+|    HEIC    |   ✅    | ✅  | ❌ [not adopted yet](https://caniuse.com/heif) |
+|    JPEG    |   ✅    | ✅  |                       ✅                       |
+|    GIF     |   ✅    | ✅  |                       ✅                       |
+|    SVG     |   ✅    | ✅  |                       ✅                       |
+|    ICO     |   ✅    | ✅  |                       ✅                       |
+|    ICNS    |   ❌    | ✅  |                       ❌                       |
 
 # API documentation
 
-- [Documentation for the latest release](https://docs.expo.dev/versions/unversioned/sdk/image/)
+- [Documentation for the latest stable release](https://docs.expo.dev/versions/latest/sdk/image/)
 
-# Installation
+# Installation in managed Expo projects
 
-> 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.
+For [managed](https://docs.expo.dev/archive/managed-vs-bare/) Expo projects, follow the installation instructions in the [API documentation for the latest stable release](https://docs.expo.dev/versions/latest/sdk/image/).
 
-Add the package to your dependencies with the following commands:
+# Installation in bare React Native projects
+
+For bare React Native projects, you must ensure that you have [installed and configured the `expo` package](https://docs.expo.dev/bare/installing-expo-modules/) before continuing.
+
+### Add the package to your npm dependencies
 
 ```
 npx expo install expo-image
-npx pod-install
 ```
 
+### Configure for iOS
+
+Run `npx pod-install` after installing the npm package.
+
+### Configure for Android
+
+No additional setup necessary.
+
 # Contributing
 
 Contributions are very welcome! Please refer to guidelines described in the [contributing guide](https://github.com/expo/expo#contributing).

package/android/build.gradle

@@ -67,7 +67,7 @@ android {
   namespace "expo.modules.image"
   defaultConfig {
     versionCode 1
-    versionName "1.10.0"
+    versionName "1.10.2"
     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/ImageViewWrapperTarget.kt

@@ -30,7 +30,7 @@ import kotlin.math.max
  * of implementing the transition between bitmaps.
  */
 class ImageViewWrapperTarget(
-  private val imageViewHolder: WeakReference<ExpoImageViewWrapper>,
+  private val imageViewHolder: WeakReference<ExpoImageViewWrapper>
 ) : Target<Drawable> {
   /**
    * Whether the target has a main, non-placeholder source

package/android/src/main/java/expo/modules/image/drawing/OutlineProvider.kt

@@ -15,11 +15,22 @@ import expo.modules.image.ifYogaUndefinedUse
 
 class OutlineProvider(private val mContext: Context) : ViewOutlineProvider() {
   enum class BorderRadiusConfig {
-    ALL, TOP_LEFT, TOP_RIGHT, BOTTOM_RIGHT, BOTTOM_LEFT, TOP_START, TOP_END, BOTTOM_START, BOTTOM_END
+    ALL,
+    TOP_LEFT,
+    TOP_RIGHT,
+    BOTTOM_RIGHT,
+    BOTTOM_LEFT,
+    TOP_START,
+    TOP_END,
+    BOTTOM_START,
+    BOTTOM_END
   }
 
   enum class CornerRadius {
-    TOP_LEFT, TOP_RIGHT, BOTTOM_RIGHT, BOTTOM_LEFT
+    TOP_LEFT,
+    TOP_RIGHT,
+    BOTTOM_RIGHT,
+    BOTTOM_LEFT
   }
 
   private var mLayoutDirection = View.LAYOUT_DIRECTION_LTR

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

@@ -96,10 +96,12 @@ object ThumbhashDecoder {
     hash[2] = (header24 shr 16).toByte()
     hash[3] = header16.toByte()
     hash[4] = (header16 shr 8).toByte()
-    if (hasAlpha) hash[5] = (
-      Math.round(15.0f * a_channel!!.dc)
-        or (Math.round(15.0f * a_channel.scale) shl 4)
-      ).toByte()
+    if (hasAlpha) {
+      hash[5] = (
+        Math.round(15.0f * a_channel!!.dc)
+          or (Math.round(15.0f * a_channel.scale) shl 4)
+        ).toByte()
+    }
 
     // Write the varying factors
     var ac_index = 0

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.0",
+  "version": "1.10.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",
@@ -35,5 +35,5 @@
   "peerDependencies": {
     "expo": "*"
   },
-  "gitHead": "6aca7ce098ddc667776a3d7cf612adbb985e264a"
+  "gitHead": "ca014bf2516c7644ef303f4c21fdd68de4d99f76"
 }