expo-image 2.0.0 → 2.0.1

package/CHANGELOG.md

@@ -10,6 +10,18 @@
 
 ### 💡 Others
 
+## 2.0.1 — 2024-11-19
+
+### 🐛 Bug fixes
+
+- [Android] Fixes Gif animations never stopping even when loop count is set to 1. ([#32944](https://github.com/expo/expo/pull/32944) by [@lukmccall](https://github.com/lukmccall))
+- [Android] Fixed `borderColor` is not applied. ([#33026](https://github.com/expo/expo/pull/33026) by [@lukmccall](https://github.com/lukmccall))
+- [Android] Fixed `border` related props weren't applied correctly. ([#33078](https://github.com/expo/expo/pull/33078) by [@lukmccall](https://github.com/lukmccall))
+
+### 💡 Others
+
+- [Android] migrate ImageView to CSSBackgroundDrawable ([#33024](https://github.com/expo/expo/pull/33024) by [@vonovak](https://github.com/vonovak))
+
 ## 2.0.0 — 2024-11-11
 
 _This version does not introduce any user-facing changes._

package/android/build.gradle

@@ -18,7 +18,7 @@ android {
   namespace "expo.modules.image"
   defaultConfig {
     versionCode 1
-    versionName "2.0.0"
+    versionName "2.0.1"
     consumerProguardFiles("proguard-rules.pro")
 
     buildConfigField("boolean", "ALLOW_GLIDE_LOGS", project.properties.get("EXPO_ALLOW_GLIDE_LOGS", "false"))
@@ -44,7 +44,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:3.0.1"
+  implementation "com.github.penfeizhou.android.animation:glide-plugin:3.0.2"
   implementation "com.github.bumptech.glide:avif-integration:${GLIDE_VERSION}"
 
   api 'com.github.bumptech.glide:okhttp3-integration:4.11.0'

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

@@ -16,10 +16,6 @@ import com.bumptech.glide.load.model.Headers
 import com.bumptech.glide.load.model.LazyHeaders
 import com.bumptech.glide.request.RequestListener
 import com.bumptech.glide.request.target.Target
-import com.facebook.react.uimanager.PixelUtil
-import com.facebook.react.uimanager.Spacing
-import com.facebook.react.uimanager.ViewProps
-import com.facebook.yoga.YogaConstants
 import com.github.penfeizhou.animation.apng.APNGDrawable
 import com.github.penfeizhou.animation.gif.GifDrawable
 import com.github.penfeizhou.animation.webp.WebPDrawable
@@ -231,57 +227,6 @@ class ExpoImageModule : Module() {
         view.transition = transition
       }
 
-      PropGroup(
-        ViewProps.BORDER_RADIUS to 0,
-        ViewProps.BORDER_TOP_LEFT_RADIUS to 1,
-        ViewProps.BORDER_TOP_RIGHT_RADIUS to 2,
-        ViewProps.BORDER_BOTTOM_RIGHT_RADIUS to 3,
-        ViewProps.BORDER_BOTTOM_LEFT_RADIUS to 4,
-        ViewProps.BORDER_TOP_START_RADIUS to 5,
-        ViewProps.BORDER_TOP_END_RADIUS to 6,
-        ViewProps.BORDER_BOTTOM_START_RADIUS to 7,
-        ViewProps.BORDER_BOTTOM_END_RADIUS to 8
-      ) { view: ExpoImageViewWrapper, index: Int, borderRadius: Float? ->
-        val radius = makeYogaUndefinedIfNegative(borderRadius ?: YogaConstants.UNDEFINED)
-        view.setBorderRadius(index, radius)
-      }
-
-      PropGroup(
-        ViewProps.BORDER_WIDTH to Spacing.ALL,
-        ViewProps.BORDER_LEFT_WIDTH to Spacing.LEFT,
-        ViewProps.BORDER_RIGHT_WIDTH to Spacing.RIGHT,
-        ViewProps.BORDER_TOP_WIDTH to Spacing.TOP,
-        ViewProps.BORDER_BOTTOM_WIDTH to Spacing.BOTTOM,
-        ViewProps.BORDER_START_WIDTH to Spacing.START,
-        ViewProps.BORDER_END_WIDTH to Spacing.END
-      ) { view: ExpoImageViewWrapper, index: Int, width: Float? ->
-        val pixelWidth = makeYogaUndefinedIfNegative(width ?: YogaConstants.UNDEFINED)
-          .ifYogaDefinedUse(PixelUtil::toPixelFromDIP)
-        view.setBorderWidth(index, pixelWidth)
-      }
-
-      PropGroup(
-        ViewProps.BORDER_COLOR to Spacing.ALL,
-        ViewProps.BORDER_LEFT_COLOR to Spacing.LEFT,
-        ViewProps.BORDER_RIGHT_COLOR to Spacing.RIGHT,
-        ViewProps.BORDER_TOP_COLOR to Spacing.TOP,
-        ViewProps.BORDER_BOTTOM_COLOR to Spacing.BOTTOM,
-        ViewProps.BORDER_START_COLOR to Spacing.START,
-        ViewProps.BORDER_END_COLOR to Spacing.END
-      ) { view: ExpoImageViewWrapper, index: Int, color: Int? ->
-        val rgbComponent = if (color == null) YogaConstants.UNDEFINED.toInt() else (color and 0x00FFFFFF)
-        val alphaComponent = if (color == null) YogaConstants.UNDEFINED else (color ushr 24).toFloat()
-        view.setBorderColor(index, rgbComponent, alphaComponent)
-      }
-
-      Prop("borderStyle") { view: ExpoImageViewWrapper, borderStyle: String? ->
-        view.borderStyle = borderStyle
-      }
-
-      Prop("backgroundColor") { view: ExpoImageViewWrapper, color: Int? ->
-        view.backgroundColor = color
-      }
-
       Prop("tintColor") { view: ExpoImageViewWrapper, color: Int? ->
         view.tintColor = color
       }

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

@@ -3,7 +3,6 @@ package expo.modules.image
 import android.annotation.SuppressLint
 import android.content.Context
 import android.graphics.Canvas
-import android.graphics.Color
 import android.graphics.PorterDuff
 import android.graphics.RectF
 import android.graphics.drawable.BitmapDrawable
@@ -12,13 +11,11 @@ import android.util.Log
 import androidx.appcompat.widget.AppCompatImageView
 import androidx.core.graphics.transform
 import androidx.core.view.isVisible
-import com.facebook.react.modules.i18nmanager.I18nUtil
-import com.facebook.react.uimanager.PixelUtil
-import com.facebook.react.views.view.ReactViewBackgroundDrawable
-import expo.modules.image.drawing.OutlineProvider
+import com.facebook.react.common.annotations.UnstableReactNativeAPI
 import expo.modules.image.enums.ContentFit
 import expo.modules.image.records.ContentPosition
 
+@OptIn(UnstableReactNativeAPI::class)
 @SuppressLint("ViewConstructor")
 class ExpoImageView(
   context: Context
@@ -40,27 +37,8 @@ class ExpoImageView(
     return target
   }
 
-  private val outlineProvider = OutlineProvider(context)
-
   private var transformationMatrixChanged = false
 
-  private val borderDrawableLazyHolder = lazy {
-    ReactViewBackgroundDrawable(context).apply {
-      callback = this@ExpoImageView
-
-      outlineProvider.borderRadiiConfig
-        .map { it.ifYogaDefinedUse(PixelUtil::toPixelFromDIP) }
-        .withIndex()
-        .forEach { (i, radius) ->
-          if (i == 0) {
-            setRadius(radius)
-          } else {
-            setRadius(radius, i - 1)
-          }
-        }
-    }
-  }
-
   override fun onLayout(changed: Boolean, left: Int, top: Int, right: Int, bottom: Int) {
     super.onLayout(changed, left, top, right, bottom)
     applyTransformationMatrix()
@@ -106,13 +84,9 @@ class ExpoImageView(
     }
   }
 
-  private val borderDrawable
-    get() = borderDrawableLazyHolder.value
-
   init {
     clipToOutline = true
     scaleType = ScaleType.MATRIX
-    super.setOutlineProvider(outlineProvider)
   }
 
   // region Component Props
@@ -134,65 +108,11 @@ class ExpoImageView(
       transformationMatrixChanged = true
     }
 
-  internal fun setBorderRadius(position: Int, borderRadius: Float) {
-    val isInvalidated = outlineProvider.setBorderRadius(borderRadius, position)
-    if (isInvalidated) {
-      invalidateOutline()
-      if (!outlineProvider.hasEqualCorners()) {
-        invalidate()
-      }
-    }
-
-    // Setting the border-radius doesn't necessarily mean that a border
-    // should to be drawn. Only update the border-drawable when needed.
-    if (borderDrawableLazyHolder.isInitialized()) {
-      val radius = borderRadius.ifYogaDefinedUse(PixelUtil::toPixelFromDIP)
-      borderDrawableLazyHolder.value.apply {
-        if (position == 0) {
-          setRadius(radius)
-        } else {
-          setRadius(radius, position - 1)
-        }
-      }
-    }
-  }
-
-  internal fun setBorderWidth(position: Int, width: Float) {
-    borderDrawable.setBorderWidth(position, width)
-  }
-
-  internal fun setBorderColor(position: Int, rgb: Int) {
-    borderDrawable.setBorderColor(position, rgb)
-  }
-
-  internal fun setBorderStyle(style: String?) {
-    borderDrawable.setBorderStyle(style)
-  }
-
-  internal fun setBackgroundColor(color: Int?) {
-    if (color == null) {
-      setBackgroundColor(Color.TRANSPARENT)
-    } else {
-      setBackgroundColor(color)
-    }
-  }
-
   internal fun setTintColor(color: Int?) {
     color?.let { setColorFilter(it, PorterDuff.Mode.SRC_IN) } ?: clearColorFilter()
   }
 
-  override fun invalidateDrawable(drawable: Drawable) {
-    super.invalidateDrawable(drawable)
-    if (borderDrawableLazyHolder.isInitialized() && drawable === borderDrawable) {
-      invalidate()
-    }
-  }
-
   override fun draw(canvas: Canvas) {
-    // When the border-radii are not all the same, a convex-path
-    // is used for the Outline. Unfortunately clipping is not supported
-    // for convex-paths and we fallback to Canvas clipping.
-    outlineProvider.clipCanvasIfNeeded(canvas, this)
     // If we encounter a recycled bitmap here, it suggests an issue where we may have failed to
     // finish clearing the image bitmap before the UI attempts to display it.
     // One solution could be to suppress the error and assume that the second image view is currently responsible for displaying the correct view.
@@ -206,22 +126,4 @@ class ExpoImageView(
     }
     super.draw(canvas)
   }
-
-  public override fun onDraw(canvas: Canvas) {
-    super.onDraw(canvas)
-    // Draw borders on top of the background and image
-    if (borderDrawableLazyHolder.isInitialized()) {
-      val newLayoutDirection = if (I18nUtil.instance.isRTL(context)) {
-        LAYOUT_DIRECTION_RTL
-      } else {
-        LAYOUT_DIRECTION_LTR
-      }
-
-      borderDrawable.apply {
-        layoutDirection = newLayoutDirection
-        setBounds(0, 0, width, height)
-        draw(canvas)
-      }
-    }
-  }
 }

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

@@ -18,7 +18,6 @@ import com.bumptech.glide.RequestManager
 import com.bumptech.glide.load.engine.DiskCacheStrategy
 import com.bumptech.glide.load.resource.bitmap.DownsampleStrategy
 import com.bumptech.glide.request.RequestOptions
-import com.facebook.yoga.YogaConstants
 import expo.modules.image.enums.ContentFit
 import expo.modules.image.enums.Priority
 import expo.modules.image.events.GlideRequestListener
@@ -115,18 +114,6 @@ class ExpoImageViewWrapper(context: Context, appContext: AppContext) : ExpoView(
       transformationMatrixChanged = true
     }
 
-  internal var borderStyle: String? = null
-    set(value) {
-      field = value
-      activeView.setBorderStyle(value)
-    }
-
-  internal var backgroundColor: Int? = null
-    set(value) {
-      field = value
-      activeView.setBackgroundColor(value)
-    }
-
   internal var tintColor: Int? = null
     set(value) {
       field = value
@@ -179,25 +166,6 @@ class ExpoImageViewWrapper(context: Context, appContext: AppContext) : ExpoView(
   internal var priority: Priority = Priority.NORMAL
   internal var cachePolicy: CachePolicy = CachePolicy.DISK
 
-  private var borderRadius = FloatArray(9) { YogaConstants.UNDEFINED }
-  private var borderWidth = FloatArray(9) { YogaConstants.UNDEFINED }
-  private var borderColor = Array(9) { YogaConstants.UNDEFINED.toInt() to YogaConstants.UNDEFINED }
-
-  fun setBorderRadius(index: Int, radius: Float) {
-    borderRadius[index] = radius
-    activeView.setBorderRadius(index, radius)
-  }
-
-  fun setBorderWidth(index: Int, width: Float) {
-    borderWidth[index] = width
-    activeView.setBorderWidth(index, width)
-  }
-
-  fun setBorderColor(index: Int, rgb: Int, alpha: Float) {
-    borderColor[index] = rgb to alpha
-    activeView.setBorderColor(index, rgb)
-  }
-
   fun setIsAnimating(setAnimating: Boolean) {
     val resource = activeView.drawable
 
@@ -237,20 +205,9 @@ class ExpoImageViewWrapper(context: Context, appContext: AppContext) : ExpoView(
   private fun copyProps(view: ExpoImageView) {
     view.contentFit = contentFit
     view.contentPosition = contentPosition
-    view.setBorderStyle(borderStyle)
-    view.setBackgroundColor(backgroundColor)
     view.setTintColor(tintColor)
     view.isFocusable = isFocusableProp
     view.contentDescription = accessibilityLabel
-    borderColor.forEachIndexed { index, (rgb, alpha) ->
-      view.setBorderColor(index, rgb)
-    }
-    borderRadius.forEachIndexed { index, value ->
-      view.setBorderRadius(index, value)
-    }
-    borderWidth.forEachIndexed { index, value ->
-      view.setBorderWidth(index, value)
-    }
     setIsScreenReaderFocusable(view, accessible)
   }
 

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "expo-image",
   "title": "Expo Image",
-  "version": "2.0.0",
+  "version": "2.0.1",
   "description": "A cross-platform, performant image component for React Native and Expo with Web support",
   "main": "src/index.ts",
   "types": "build/index.d.ts",
@@ -41,5 +41,5 @@
       "optional": true
     }
   },
-  "gitHead": "8f2567ad26ca782cd2d7ab7fa77a34979e2b4e01"
+  "gitHead": "128718d43bac2eaed764b3551469b95400f2363e"
 }