expo-image 1.0.0 → 1.2.0

package/CHANGELOG.md

@@ -10,6 +10,34 @@
 
 ### 💡 Others
 
+## 1.2.0 — 2023-04-14
+
+### 🎉 New features
+
+- [Web] Add support for `require()` assets. ([#21798](https://github.com/expo/expo/pull/21798) by [@aleqsio](https://github.com/aleqsio))
+- Add `alt` prop as an alias to `accessibilityLabel`. ([#21884](https://github.com/expo/expo/pull/21884) by [@EvanBacon](https://github.com/EvanBacon))
+- [Web] Add `accessibilityLabel` support on web. ([#21884](https://github.com/expo/expo/pull/21884) by [@EvanBacon](https://github.com/EvanBacon))
+- Added `ThumbHash` support for Android, iOS and Web. ([#21952](https://github.com/expo/expo/pull/21952) by [@behenate](https://github.com/behenate))
+
+### 🐛 Bug fixes
+
+- [Web] Prevent breaking in static rendering environments. ([#21883](https://github.com/expo/expo/pull/21883) by [@EvanBacon](https://github.com/EvanBacon))
+- [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
+
+### 🎉 New features
+
+- [Android] Add automatic asset downscaling to improve performance. ([#21628](https://github.com/expo/expo/pull/21628) by [@lukmccall](https://github.com/lukmccall))
+
+### 🐛 Bug fixes
+
+- Fixed the `tintColor` not being passed to native view. ([#21576](https://github.com/expo/expo/pull/21576) by [@andrew-levy](https://github.com/andrew-levy))
+- Fixed `canvas: trying to use a recycled bitmap` on Android. ([#21658](https://github.com/expo/expo/pull/21658) by [@lukmccall](https://github.com/lukmccall))
+- Fixed crashes caused by empty placeholder or source on Android. ([#21695](https://github.com/expo/expo/pull/21695) by [@lukmccall](https://github.com/lukmccall))
+- Fixes `shouldDownscale` don't respect the scale factor on iOS. ([#21839](https://github.com/expo/expo/pull/21839) by [@ouabing](https://github.com/ouabing))
+- Fixes cache policy not being correctly applied when set to `none` on iOS. ([#21840](https://github.com/expo/expo/pull/21840) by [@ouabing](https://github.com/ouabing))
+
 ## 1.0.0 — 2023-02-21
 
 _This version does not introduce any user-facing changes._

package/README.md

@@ -14,7 +14,7 @@ A cross-platform, performant image component for React Native and Expo.
 - Designed for speed
 - Support for many image formats (including animated ones)
 - Disk and memory caching
-- Supports [blurhash](https://blurha.sh), a compact representation of a placeholder for an image
+- Supports [BlurHash](https://blurha.sh) and [ThumbHash](https://evanw.github.io/thumbhash/) - compact representations of a placeholder for an image
 - Transitioning between images when the source changes (no more flickering!)
 - Implements the CSS [`object-fit`](https://developer.mozilla.org/en-US/docs/Web/CSS/object-fit) and [`object-position`](https://developer.mozilla.org/en-US/docs/Web/CSS/object-position) properties (see [`contentFit`](#contentfit) and [`contentPosition`](#contentposition) props)
 - Uses performant [`SDWebImage`](https://github.com/SDWebImage/SDWebImage) and [`Glide`](https://github.com/bumptech/glide) under the hood

package/android/build.gradle

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

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

@@ -162,6 +162,10 @@ class ExpoImageModule : Module() {
         view.recyclingKey = recyclingKey
       }
 
+      Prop("allowDownscaling") { view: ExpoImageViewWrapper, allowDownscaling: Boolean? ->
+        view.allowDownscaling = allowDownscaling ?: true
+      }
+
       OnViewDidUpdateProps { view: ExpoImageViewWrapper ->
         view.rerenderIfNeeded()
       }

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

@@ -6,7 +6,9 @@ import android.graphics.Canvas
 import android.graphics.Color
 import android.graphics.PorterDuff
 import android.graphics.RectF
+import android.graphics.drawable.BitmapDrawable
 import android.graphics.drawable.Drawable
+import android.util.Log
 import androidx.appcompat.widget.AppCompatImageView
 import androidx.core.graphics.transform
 import androidx.core.view.isVisible
@@ -84,7 +86,12 @@ class ExpoImageView(
     val imageRect = RectF(0f, 0f, drawable.intrinsicWidth.toFloat(), drawable.intrinsicHeight.toFloat())
     val viewRect = RectF(0f, 0f, width.toFloat(), height.toFloat())
 
-    val matrix = contentFit.toMatrix(imageRect, viewRect)
+    val matrix = contentFit.toMatrix(
+      imageRect,
+      viewRect,
+      currentTarget?.sourceWidth ?: -1,
+      currentTarget?.sourceHeight ?: -1
+    )
     val scaledImageRect = imageRect.transform(matrix)
 
     imageMatrix = matrix.apply {
@@ -179,6 +186,17 @@ class ExpoImageView(
     // 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.
+    if ((drawable as? BitmapDrawable)?.bitmap?.isRecycled == true) {
+      Log.e("ExpoImage", "Trying to use a recycled bitmap")
+      recycleView()?.let { target ->
+        (parent as? ExpoImageViewWrapper)?.requestManager?.let { requestManager ->
+          target.clear(requestManager)
+        }
+      }
+    }
     super.draw(canvas)
   }
 

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

@@ -19,6 +19,7 @@ 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.bumptech.glide.request.target.Target.SIZE_ORIGINAL
 import com.facebook.yoga.YogaConstants
 import expo.modules.image.enums.ContentFit
 import expo.modules.image.enums.Priority
@@ -37,6 +38,7 @@ import expo.modules.kotlin.AppContext
 import expo.modules.kotlin.viewevent.EventDispatcher
 import expo.modules.kotlin.views.ExpoView
 import jp.wasabeef.glide.transformations.BlurTransformation
+import java.lang.Float.max
 import java.lang.ref.WeakReference
 import kotlin.math.abs
 import kotlin.math.min
@@ -46,7 +48,7 @@ class ExpoImageViewWrapper(context: Context, appContext: AppContext) : ExpoView(
   private val activity: Activity
     get() = appContext.currentActivity ?: throw MissingActivity()
 
-  private val requestManager = getOrCreateRequestManager(appContext, activity)
+  internal val requestManager = getOrCreateRequestManager(appContext, activity)
   private val progressListener = OkHttpProgressListener(WeakReference(this))
 
   private val firstView = ExpoImageView(activity)
@@ -154,6 +156,12 @@ class ExpoImageViewWrapper(context: Context, appContext: AppContext) : ExpoView(
       field = value
     }
 
+  internal var allowDownscaling: Boolean = true
+    set(value) {
+      field = value
+      shouldRerender = true
+    }
+
   internal var priority: Priority = Priority.NORMAL
   internal var cachePolicy: CachePolicy = CachePolicy.DISK
 
@@ -339,12 +347,13 @@ class ExpoImageViewWrapper(context: Context, appContext: AppContext) : ExpoView(
 
       it.isVisible = true
 
+      it.currentTarget = target
+
       // The view isn't layout when it's invisible.
       // Therefore, we have to set the correct size manually.
       it.layout(0, 0, width, height)
 
       it.applyTransformationMatrix()
-      it.currentTarget = target
     }
     target.isUsed = true
 
@@ -383,9 +392,13 @@ class ExpoImageViewWrapper(context: Context, appContext: AppContext) : ExpoView(
     return bestSource
   }
 
-  override fun onLayout(changed: Boolean, left: Int, top: Int, right: Int, bottom: Int) {
-    super.onLayout(changed, left, top, right, bottom)
-    rerenderIfNeeded()
+  override fun onSizeChanged(w: Int, h: Int, oldw: Int, oldh: Int) {
+    super.onSizeChanged(w, h, oldw, oldh)
+    rerenderIfNeeded(
+      shouldRerenderBecauseOfResize = allowDownscaling &&
+        contentFit != ContentFit.Fill &&
+        contentFit != ContentFit.None
+    )
   }
 
   private fun createPropOptions(): RequestOptions {
@@ -414,7 +427,7 @@ class ExpoImageViewWrapper(context: Context, appContext: AppContext) : ExpoView(
     requestManager.clear(secondTarget)
   }
 
-  internal fun rerenderIfNeeded() {
+  internal fun rerenderIfNeeded(shouldRerenderBecauseOfResize: Boolean = false) {
     val bestSource = bestSource
     val bestPlaceholder = bestPlaceholder
 
@@ -435,7 +448,8 @@ class ExpoImageViewWrapper(context: Context, appContext: AppContext) : ExpoView(
       return
     }
 
-    if (sourceToLoad != loadedSource || shouldRerender || (sourceToLoad == null && placeholder != null)) {
+    val shouldRerender = sourceToLoad != loadedSource || shouldRerender || (sourceToLoad == null && placeholder != null)
+    if (shouldRerender || shouldRerenderBecauseOfResize) {
       if (clearViewBeforeChangingSource) {
         val activeView = if (firstView.drawable != null) {
           firstView
@@ -450,7 +464,7 @@ class ExpoImageViewWrapper(context: Context, appContext: AppContext) : ExpoView(
           }
       }
 
-      shouldRerender = false
+      this.shouldRerender = false
       loadedSource = sourceToLoad
       val options = bestSource?.createOptions(context)
       val propOptions = createPropOptions()
@@ -468,13 +482,85 @@ class ExpoImageViewWrapper(context: Context, appContext: AppContext) : ExpoView(
       }
       newTarget.hasSource = sourceToLoad != null
 
+      val downsampleStrategy = if (allowDownscaling) {
+        object : DownsampleStrategy() {
+          var wasTriggered = false
+          override fun getScaleFactor(
+            sourceWidth: Int,
+            sourceHeight: Int,
+            requestedWidth: Int,
+            requestedHeight: Int
+          ): Float {
+            // The method is invoked twice per asset, but we only need to preserve the original dimensions for the first call.
+            // As Glide uses Android downsampling, it can only adjust dimensions by a factor of two,
+            // and hence two distinct scaling factors are computed to achieve greater accuracy.
+            if (!wasTriggered) {
+              newTarget.sourceWidth = sourceWidth
+              newTarget.sourceHeight = sourceHeight
+              wasTriggered = true
+            }
+
+            // The size of the container is unknown, we don't know what to do, so we just run the default scale.
+            if (requestedWidth == SIZE_ORIGINAL || requestedHeight == SIZE_ORIGINAL) {
+              return 1f
+            }
+
+            val aspectRation = calculateScaleFactor(
+              sourceWidth.toFloat(),
+              sourceHeight.toFloat(),
+              requestedWidth.toFloat(),
+              requestedHeight.toFloat()
+            )
+
+            // We don't want to upscale the image
+            return min(1f, aspectRation)
+          }
+
+          private fun calculateScaleFactor(
+            sourceWidth: Float,
+            sourceHeight: Float,
+            requestedWidth: Float,
+            requestedHeight: Float
+          ): Float = when (contentFit) {
+            ContentFit.Contain -> min(
+              requestedWidth / sourceWidth,
+              requestedHeight / sourceHeight
+            )
+            ContentFit.Cover -> max(
+              requestedWidth / sourceWidth,
+              requestedHeight / sourceHeight
+            )
+            ContentFit.Fill, ContentFit.None -> 1f
+            ContentFit.ScaleDown -> if (requestedWidth < sourceWidth || requestedHeight < sourceHeight) {
+              // The container is smaller than the image — scale it down and behave like `contain`
+              min(
+                requestedWidth / sourceWidth,
+                requestedHeight / sourceHeight
+              )
+            } else {
+              // The container is bigger than the image — don't scale it and behave like `none`
+              1f
+            }
+          }
+
+          override fun getSampleSizeRounding(
+            sourceWidth: Int,
+            sourceHeight: Int,
+            requestedWidth: Int,
+            requestedHeight: Int
+          ) = SampleSizeRounding.QUALITY
+        }
+      } else {
+        DownsampleStrategy.NONE
+      }
+
       val request = requestManager
         .asDrawable()
         .load(model)
         .apply {
           if (placeholder != null) {
             thumbnail(requestManager.load(placeholder.glideData))
-            val newPlaceholderContentFit = if (bestPlaceholder.isBlurhash()) {
+            val newPlaceholderContentFit = if (bestPlaceholder.isBlurhash() || bestPlaceholder.isThumbhash()) {
               contentFit
             } else {
               placeholderContentFit
@@ -487,7 +573,7 @@ class ExpoImageViewWrapper(context: Context, appContext: AppContext) : ExpoView(
             apply(it)
           }
         }
-        .downsample(DownsampleStrategy.NONE)
+        .downsample(downsampleStrategy)
         .addListener(GlideRequestListener(WeakReference(this)))
         .encodeQuality(100)
         .apply(propOptions)

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

@@ -57,3 +57,17 @@ class GlideBlurhashModel(
     return result
   }
 }
+
+class GlideThumbhashModel(
+  var uri: Uri
+) : GlideModel() {
+  override val glideData: GlideThumbhashModel = this
+
+  override fun equals(other: Any?): Boolean {
+    return (this === other) || other is GlideThumbhashModel && uri == other.uri
+  }
+
+  override fun hashCode(): Int {
+    return uri.hashCode()
+  }
+}

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

@@ -1,13 +1,25 @@
 package expo.modules.image
 
+import android.content.Context
+import android.graphics.Point
 import android.graphics.drawable.Drawable
 import android.util.Log
+import android.view.ViewGroup
+import android.view.ViewTreeObserver
+import android.view.WindowManager
+import androidx.annotation.VisibleForTesting
 import com.bumptech.glide.RequestManager
+import com.bumptech.glide.request.Request
 import com.bumptech.glide.request.ThumbnailRequestCoordinator
+import com.bumptech.glide.request.target.SizeReadyCallback
+import com.bumptech.glide.request.target.Target
 import com.bumptech.glide.request.transition.Transition
+import com.bumptech.glide.util.Preconditions
+import com.bumptech.glide.util.Synthetic
 import expo.modules.core.utilities.ifNull
 import expo.modules.image.enums.ContentFit
 import java.lang.ref.WeakReference
+import kotlin.math.max
 
 /**
  * A custom target to provide a smooth transition between multiple drawables.
@@ -18,11 +30,35 @@ import java.lang.ref.WeakReference
  */
 class ImageViewWrapperTarget(
   private val imageViewHolder: WeakReference<ExpoImageViewWrapper>,
-) : com.bumptech.glide.request.target.CustomTarget<Drawable>(SIZE_ORIGINAL, SIZE_ORIGINAL) {
+) : Target<Drawable> {
+  /**
+   * Whether the target has a main, non-placeholder source
+   */
   var hasSource = false
+
+  /**
+   * Whether the target is used - the asset loaded by it has been drawn in the image view
+   */
   var isUsed = false
+
+  /**
+   * The main source height where -1 means unknown
+   */
+  var sourceHeight = -1
+
+  /**
+   * The main source width where -1 means unknown
+   */
+  var sourceWidth = -1
+
+  /**
+   * The content fit of the placeholder
+   */
   var placeholderContentFit: ContentFit? = null
 
+  private var request: Request? = null
+  private var sizeDeterminer = SizeDeterminer(imageViewHolder)
+
   override fun onResourceReady(resource: Drawable, transition: Transition<in Drawable>?) {
     // The image view should always be valid. When the view is deallocated, all targets should be
     // canceled. Therefore that code shouldn't be called in that case. Instead of crashing, we
@@ -45,9 +81,233 @@ class ImageViewWrapperTarget(
     imageView.onResourceReady(this, resource, isPlaceholder)
   }
 
+  override fun onStart() = Unit
+
+  override fun onStop() = Unit
+
+  override fun onDestroy() = Unit
+
+  override fun onLoadStarted(placeholder: Drawable?) = Unit
+
+  // When loading fails, it's handled by the global listener, therefore that method can be NOOP.
+  override fun onLoadFailed(errorDrawable: Drawable?) = Unit
+
   override fun onLoadCleared(placeholder: Drawable?) = Unit
 
+  override fun getSize(cb: SizeReadyCallback) {
+    // If we can't resolve the image, we just return unknown size.
+    // It shouldn't happen in a production application, because it means that our view was deallocated.
+    if (imageViewHolder.get() == null) {
+      cb.onSizeReady(Target.SIZE_ORIGINAL, Target.SIZE_ORIGINAL)
+      return
+    }
+
+    sizeDeterminer.getSize(cb)
+  }
+
+  override fun removeCallback(cb: SizeReadyCallback) {
+    sizeDeterminer.removeCallback(cb)
+  }
+
+  override fun setRequest(request: Request?) {
+    this.request = request
+  }
+
+  override fun getRequest() = request
+
   fun clear(requestManager: RequestManager) {
+    sizeDeterminer.clearCallbacksAndListener()
     requestManager.clear(this)
   }
 }
+
+// Copied from the Glide codebase.
+// We modified that to receive a weak ref to our view instead of strong one.
+internal class SizeDeterminer(private val imageViewHolder: WeakReference<ExpoImageViewWrapper>) {
+  private val cbs: MutableList<SizeReadyCallback> = ArrayList()
+
+  @Synthetic
+  var waitForLayout = false
+  private var layoutListener: SizeDeterminerLayoutListener? = null
+  private fun notifyCbs(width: Int, height: Int) {
+    // One or more callbacks may trigger the removal of one or more additional callbacks, so we
+    // need a copy of the list to avoid a concurrent modification exception. One place this
+    // happens is when a full request completes from the in memory cache while its thumbnail is
+    // still being loaded asynchronously. See #2237.
+    for (cb in ArrayList(cbs)) {
+      cb.onSizeReady(width, height)
+    }
+  }
+
+  @Synthetic
+  fun checkCurrentDimens() {
+    if (cbs.isEmpty()) {
+      return
+    }
+    val currentWidth = targetWidth
+    val currentHeight = targetHeight
+    if (!isViewStateAndSizeValid(currentWidth, currentHeight)) {
+      return
+    }
+    notifyCbs(currentWidth, currentHeight)
+    clearCallbacksAndListener()
+  }
+
+  fun getSize(cb: SizeReadyCallback) {
+    val view = imageViewHolder.get() ?: return
+
+    val currentWidth = targetWidth
+    val currentHeight = targetHeight
+    if (isViewStateAndSizeValid(currentWidth, currentHeight)) {
+      cb.onSizeReady(currentWidth, currentHeight)
+      return
+    }
+
+    // We want to notify callbacks in the order they were added and we only expect one or two
+    // callbacks to be added a time, so a List is a reasonable choice.
+    if (!cbs.contains(cb)) {
+      cbs.add(cb)
+    }
+    if (layoutListener == null) {
+      val observer = view.viewTreeObserver
+      layoutListener = SizeDeterminerLayoutListener(this)
+      observer.addOnPreDrawListener(layoutListener)
+    }
+  }
+
+  /**
+   * The callback may be called anyway if it is removed by another [SizeReadyCallback] or
+   * otherwise removed while we're notifying the list of callbacks.
+   *
+   *
+   * See #2237.
+   */
+  fun removeCallback(cb: SizeReadyCallback) {
+    cbs.remove(cb)
+  }
+
+  fun clearCallbacksAndListener() {
+    // Keep a reference to the layout attachStateListener and remove it here
+    // rather than having the observer remove itself because the observer
+    // we add the attachStateListener to will be almost immediately merged into
+    // another observer and will therefore never be alive. If we instead
+    // keep a reference to the attachStateListener and remove it here, we get the
+    // current view tree observer and should succeed.
+    val observer = imageViewHolder.get()?.viewTreeObserver
+    if (observer?.isAlive == true) {
+      observer.removeOnPreDrawListener(layoutListener)
+    }
+    layoutListener = null
+    cbs.clear()
+  }
+
+  private fun isViewStateAndSizeValid(width: Int, height: Int): Boolean {
+    return isDimensionValid(width) && isDimensionValid(height)
+  }
+
+  private val targetHeight: Int
+    get() {
+      val view = imageViewHolder.get() ?: return Target.SIZE_ORIGINAL
+      val verticalPadding = view.paddingTop + view.paddingBottom
+      val layoutParams = view.layoutParams
+      val layoutParamSize = layoutParams?.height ?: PENDING_SIZE
+      return getTargetDimen(view.height, layoutParamSize, verticalPadding)
+    }
+  private val targetWidth: Int
+    get() {
+      val view = imageViewHolder.get() ?: return Target.SIZE_ORIGINAL
+      val horizontalPadding = view.paddingLeft + view.paddingRight
+      val layoutParams = view.layoutParams
+      val layoutParamSize = layoutParams?.width ?: PENDING_SIZE
+      return getTargetDimen(view.width, layoutParamSize, horizontalPadding)
+    }
+
+  private fun getTargetDimen(viewSize: Int, paramSize: Int, paddingSize: Int): Int {
+    val view = imageViewHolder.get() ?: return Target.SIZE_ORIGINAL
+
+    // We consider the View state as valid if the View has non-null layout params and a non-zero
+    // layout params width and height. This is imperfect. We're making an assumption that View
+    // parents will obey their child's layout parameters, which isn't always the case.
+    val adjustedParamSize = paramSize - paddingSize
+    if (adjustedParamSize > 0) {
+      return adjustedParamSize
+    }
+
+    // Since we always prefer layout parameters with fixed sizes, even if waitForLayout is true,
+    // we might as well ignore it and just return the layout parameters above if we have them.
+    // Otherwise we should wait for a layout pass before checking the View's dimensions.
+    if (waitForLayout && view.isLayoutRequested) {
+      return PENDING_SIZE
+    }
+
+    // We also consider the View state valid if the View has a non-zero width and height. This
+    // means that the View has gone through at least one layout pass. It does not mean the Views
+    // width and height are from the current layout pass. For example, if a View is re-used in
+    // RecyclerView or ListView, this width/height may be from an old position. In some cases
+    // the dimensions of the View at the old position may be different than the dimensions of the
+    // View in the new position because the LayoutManager/ViewParent can arbitrarily decide to
+    // change them. Nevertheless, in most cases this should be a reasonable choice.
+    val adjustedViewSize = viewSize - paddingSize
+    if (adjustedViewSize > 0) {
+      return adjustedViewSize
+    }
+
+    // Finally we consider the view valid if the layout parameter size is set to wrap_content.
+    // It's difficult for Glide to figure out what to do here. Although Target.SIZE_ORIGINAL is a
+    // coherent choice, it's extremely dangerous because original images may be much too large to
+    // fit in memory or so large that only a couple can fit in memory, causing OOMs. If users want
+    // the original image, they can always use .override(Target.SIZE_ORIGINAL). Since wrap_content
+    // may never resolve to a real size unless we load something, we aim for a square whose length
+    // is the largest screen size. That way we're loading something and that something has some
+    // hope of being downsampled to a size that the device can support. We also log a warning that
+    // tries to explain what Glide is doing and why some alternatives are preferable.
+    // Since WRAP_CONTENT is sometimes used as a default layout parameter, we always wait for
+    // layout to complete before using this fallback parameter (ConstraintLayout among others).
+    if (!view.isLayoutRequested && paramSize == ViewGroup.LayoutParams.WRAP_CONTENT) {
+      return getMaxDisplayLength(view.context)
+    }
+
+    // If the layout parameters are < padding, the view size is < padding, or the layout
+    // parameters are set to match_parent or wrap_content and no layout has occurred, we should
+    // wait for layout and repeat.
+    return PENDING_SIZE
+  }
+
+  private fun isDimensionValid(size: Int): Boolean {
+    return size > 0 || size == Target.SIZE_ORIGINAL
+  }
+
+  private class SizeDeterminerLayoutListener(sizeDeterminer: SizeDeterminer) : ViewTreeObserver.OnPreDrawListener {
+    private val sizeDeterminerRef: WeakReference<SizeDeterminer>
+
+    init {
+      sizeDeterminerRef = WeakReference(sizeDeterminer)
+    }
+
+    override fun onPreDraw(): Boolean {
+      val sizeDeterminer = sizeDeterminerRef.get()
+      sizeDeterminer?.checkCurrentDimens()
+      return true
+    }
+  }
+
+  companion object {
+    // Some negative sizes (Target.SIZE_ORIGINAL) are valid, 0 is never valid.
+    private const val PENDING_SIZE = 0
+
+    @VisibleForTesting
+    var maxDisplayLength: Int? = null
+
+    // Use the maximum to avoid depending on the device's current orientation.
+    private fun getMaxDisplayLength(context: Context): Int {
+      if (maxDisplayLength == null) {
+        val windowManager = context.getSystemService(Context.WINDOW_SERVICE) as WindowManager
+        val display = Preconditions.checkNotNull(windowManager).defaultDisplay
+        val displayDimensions = Point()
+        display.getSize(displayDimensions)
+        maxDisplayLength = max(displayDimensions.x, displayDimensions.y)
+      }
+      return maxDisplayLength!!
+    }
+  }
+}

package/android/src/main/java/expo/modules/image/enums/ContentFit.kt

@@ -41,7 +41,7 @@ enum class ContentFit(val value: String) : Enumerable {
    */
   ScaleDown("scale-down");
 
-  internal fun toMatrix(imageRect: RectF, viewRect: RectF) = Matrix().apply {
+  internal fun toMatrix(imageRect: RectF, viewRect: RectF, sourceWidth: Int, sourceHeight: Int) = Matrix().apply {
     when (this@ContentFit) {
       Contain -> setRectToRect(imageRect, viewRect, Matrix.ScaleToFit.START)
       Cover -> {
@@ -60,8 +60,28 @@ enum class ContentFit(val value: String) : Enumerable {
         // we don't need to do anything
       }
       ScaleDown -> {
-        if (imageRect.width() >= viewRect.width() || imageRect.height() >= viewRect.height()) {
-          setRectToRect(imageRect, viewRect, Matrix.ScaleToFit.START)
+        // If we have information about the original size of the source, we can resize the image more drastically.
+        // In certain situations, we may even permit upscaling when we anticipate the image to be reloaded without any reduction in size,
+        // which will create a seamless transition between various states.
+        if (sourceWidth != -1 && sourceHeight != -1) {
+          val sourceRect = RectF(0f, 0f, sourceWidth.toFloat(), sourceHeight.toFloat())
+          // Rather than checking if the image rectangle is within the bounds of the view rectangle, we verify the original source rectangle.
+          // We know that the newly loaded image has larger dimensions than the current one, and therefore,
+          // it will not be downscaled.
+          if (sourceRect.width() >= viewRect.width() || sourceRect.height() >= viewRect.height()) {
+            setRectToRect(imageRect, viewRect, Matrix.ScaleToFit.START)
+          }
+          // If the source rectangle is larger than the view rectangle and the image rectangle has not been upscaled to match the source rectangle,
+          // temporary upscaling is necessary to ensure a seamless transition.
+          // It should be noted that this upscaling is applied to the downscaled version of the image,
+          // not the original source image, and will be replaced by the original asset shortly thereafter.
+          else {
+            setRectToRect(imageRect, sourceRect, Matrix.ScaleToFit.START)
+          }
+        } else {
+          if (imageRect.width() >= viewRect.width() || imageRect.height() >= viewRect.height()) {
+            setRectToRect(imageRect, viewRect, Matrix.ScaleToFit.START)
+          }
         }
       }
     }