Move multi-source image disk cache checks off the UI thread (#58701)

Summary:

Avoid synchronous disk I/O while Android selects a source for multi-source images. The best source and bitmap-memory-cache preview are selected immediately. More precise alternate sources are ordered by size precision and submitted as a first-available disk-cache-only intermediate request, so Fresco probes them off the UI thread alongside the primary request while preserving the immediate memory preview.

Both Android image-view implementations submit one controller/show request immediately without asynchronous view callbacks or duplicate lifecycles. Drawee snapshots controller instrumentation once per request before its fallback suppliers run. The behavior remains behind a disabled-by-default runtime gate.

Changelog:
[Android][Fixed] - Avoid blocking the UI thread while selecting multi-source images

Reviewed By: javache

Differential Revision: D122082126

Author: Abbondanzo

packages/react-native/ReactAndroid/src/main/java/com/facebook/react/internal/featureflags/ReactNativeFeatureFlags.kt

@@ -4,7 +4,7 @@
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
  *
- * @generated SignedSource<<86390dbd6b2c57cb4f8cdd7cb73cc1f7>>
+ * @generated SignedSource<<5903d783a8d1544f64c0b6b0497ce3c9>>
  */
 
 /**
@@ -120,6 +120,12 @@ public object ReactNativeFeatureFlags {
   @JvmStatic
   public fun enableAndroidTextMeasurementOptimizations(): Boolean = accessor.enableAndroidTextMeasurementOptimizations()
 
+  /**
+   * Runs multi-source image disk-cache checks asynchronously on Android.
+   */
+  @JvmStatic
+  public fun enableAsyncDiskCacheCheckInMultiSourceImageAndroid(): Boolean = accessor.enableAsyncDiskCacheCheckInMultiSourceImageAndroid()
+
   /**
    * Feature flag to enable the new bridgeless architecture.
    */

packages/react-native/ReactAndroid/src/main/java/com/facebook/react/internal/featureflags/ReactNativeFeatureFlagsCxxAccessor.kt

@@ -4,7 +4,7 @@
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
  *
- * @generated SignedSource<<3e939eebe846d12cab15905db8efba18>>
+ * @generated SignedSource<<62f32d29de0188f7fc4fb8610c0f7243>>
  */
 
 /**
@@ -35,6 +35,7 @@ internal class ReactNativeFeatureFlagsCxxAccessor : ReactNativeFeatureFlagsAcces
   private var enableAccumulatedUpdatesInRawPropsAndroidCache: Boolean? = null
   private var enableAndroidAutoOffscreenCompositingForElevationCache: Boolean? = null
   private var enableAndroidTextMeasurementOptimizationsCache: Boolean? = null
+  private var enableAsyncDiskCacheCheckInMultiSourceImageAndroidCache: Boolean? = null
   private var enableBridgelessArchitectureCache: Boolean? = null
   private var enableBufferedCallInvokerCache: Boolean? = null
   private var enableCppPropsIteratorSetterCache: Boolean? = null
@@ -246,6 +247,15 @@ internal class ReactNativeFeatureFlagsCxxAccessor : ReactNativeFeatureFlagsAcces
     return cached
   }
 
+  override fun enableAsyncDiskCacheCheckInMultiSourceImageAndroid(): Boolean {
+    var cached = enableAsyncDiskCacheCheckInMultiSourceImageAndroidCache
+    if (cached == null) {
+      cached = ReactNativeFeatureFlagsCxxInterop.enableAsyncDiskCacheCheckInMultiSourceImageAndroid()
+      enableAsyncDiskCacheCheckInMultiSourceImageAndroidCache = cached
+    }
+    return cached
+  }
+
   override fun enableBridgelessArchitecture(): Boolean {
     var cached = enableBridgelessArchitectureCache
     if (cached == null) {

packages/react-native/ReactAndroid/src/main/java/com/facebook/react/internal/featureflags/ReactNativeFeatureFlagsCxxInterop.kt

@@ -4,7 +4,7 @@
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
  *
- * @generated SignedSource<<da34d40665437b2901de2ca5f0bee7c1>>
+ * @generated SignedSource<<ff20dd706d265e8e21c224ba1bb65668>>
  */
 
 /**
@@ -58,6 +58,8 @@ public object ReactNativeFeatureFlagsCxxInterop {
 
   @DoNotStrip @JvmStatic public external fun enableAndroidTextMeasurementOptimizations(): Boolean
 
+  @DoNotStrip @JvmStatic public external fun enableAsyncDiskCacheCheckInMultiSourceImageAndroid(): Boolean
+
   @DoNotStrip @JvmStatic public external fun enableBridgelessArchitecture(): Boolean
 
   @DoNotStrip @JvmStatic public external fun enableBufferedCallInvoker(): Boolean

packages/react-native/ReactAndroid/src/main/java/com/facebook/react/internal/featureflags/ReactNativeFeatureFlagsDefaults.kt

@@ -4,7 +4,7 @@
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
  *
- * @generated SignedSource<<0f4c074c11c564f05950eab73a8fd452>>
+ * @generated SignedSource<<fe7eec55afb3b82e91491a2bfdd0dd45>>
  */
 
 /**
@@ -53,6 +53,8 @@ public open class ReactNativeFeatureFlagsDefaults : ReactNativeFeatureFlagsProvi
 
   override fun enableAndroidTextMeasurementOptimizations(): Boolean = false
 
+  override fun enableAsyncDiskCacheCheckInMultiSourceImageAndroid(): Boolean = false
+
   override fun enableBridgelessArchitecture(): Boolean = true
 
   override fun enableBufferedCallInvoker(): Boolean = true

packages/react-native/ReactAndroid/src/main/java/com/facebook/react/internal/featureflags/ReactNativeFeatureFlagsLocalAccessor.kt

@@ -4,7 +4,7 @@
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
  *
- * @generated SignedSource<<013790bd2c3fa8b9ff03e8c5e924bf91>>
+ * @generated SignedSource<<0dedeabd0a4104b0498c09bdc84f0e4f>>
  */
 
 /**
@@ -39,6 +39,7 @@ internal class ReactNativeFeatureFlagsLocalAccessor : ReactNativeFeatureFlagsAcc
   private var enableAccumulatedUpdatesInRawPropsAndroidCache: Boolean? = null
   private var enableAndroidAutoOffscreenCompositingForElevationCache: Boolean? = null
   private var enableAndroidTextMeasurementOptimizationsCache: Boolean? = null
+  private var enableAsyncDiskCacheCheckInMultiSourceImageAndroidCache: Boolean? = null
   private var enableBridgelessArchitectureCache: Boolean? = null
   private var enableBufferedCallInvokerCache: Boolean? = null
   private var enableCppPropsIteratorSetterCache: Boolean? = null
@@ -265,6 +266,16 @@ internal class ReactNativeFeatureFlagsLocalAccessor : ReactNativeFeatureFlagsAcc
     return cached
   }
 
+  override fun enableAsyncDiskCacheCheckInMultiSourceImageAndroid(): Boolean {
+    var cached = enableAsyncDiskCacheCheckInMultiSourceImageAndroidCache
+    if (cached == null) {
+      cached = currentProvider.enableAsyncDiskCacheCheckInMultiSourceImageAndroid()
+      accessedFeatureFlags.add("enableAsyncDiskCacheCheckInMultiSourceImageAndroid")
+      enableAsyncDiskCacheCheckInMultiSourceImageAndroidCache = cached
+    }
+    return cached
+  }
+
   override fun enableBridgelessArchitecture(): Boolean {
     var cached = enableBridgelessArchitectureCache
     if (cached == null) {

packages/react-native/ReactAndroid/src/main/java/com/facebook/react/internal/featureflags/ReactNativeFeatureFlagsProvider.kt

@@ -4,7 +4,7 @@
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
  *
- * @generated SignedSource<<6607c8678df2693c361f6d8091483662>>
+ * @generated SignedSource<<9c4c2248532c2a04d150ad7edba28260>>
  */
 
 /**
@@ -53,6 +53,8 @@ public interface ReactNativeFeatureFlagsProvider {
 
   @DoNotStrip public fun enableAndroidTextMeasurementOptimizations(): Boolean
 
+  @DoNotStrip public fun enableAsyncDiskCacheCheckInMultiSourceImageAndroid(): Boolean
+
   @DoNotStrip public fun enableBridgelessArchitecture(): Boolean
 
   @DoNotStrip public fun enableBufferedCallInvoker(): Boolean

packages/react-native/ReactAndroid/src/main/java/com/facebook/react/views/image/ReactImageView.kt

@@ -22,9 +22,14 @@ import android.graphics.Shader.TileMode
 import android.graphics.drawable.Animatable
 import android.graphics.drawable.Drawable
 import android.net.Uri
+import com.facebook.common.internal.Supplier
 import com.facebook.common.references.CloseableReference
 import com.facebook.common.util.UriUtil
+import com.facebook.datasource.DataSource
+import com.facebook.datasource.FirstAvailableDataSourceSupplier
+import com.facebook.datasource.IncreasingQualityDataSourceSupplier
 import com.facebook.drawee.backends.pipeline.Fresco
+import com.facebook.drawee.backends.pipeline.PipelineDraweeController
 import com.facebook.drawee.controller.AbstractDraweeControllerBuilder
 import com.facebook.drawee.controller.ControllerListener
 import com.facebook.drawee.controller.ForwardingControllerListener
@@ -35,6 +40,7 @@ import com.facebook.drawee.generic.RoundingParams
 import com.facebook.drawee.view.GenericDraweeView
 import com.facebook.imagepipeline.bitmaps.PlatformBitmapFactory
 import com.facebook.imagepipeline.common.ResizeOptions
+import com.facebook.imagepipeline.common.RotationOptions
 import com.facebook.imagepipeline.core.DownsampleMode
 import com.facebook.imagepipeline.image.CloseableImage
 import com.facebook.imagepipeline.image.ImageInfo
@@ -50,6 +56,7 @@ import com.facebook.react.bridge.ReadableMap
 import com.facebook.react.common.annotations.UnstableReactNativeAPI
 import com.facebook.react.common.annotations.VisibleForTesting
 import com.facebook.react.common.build.ReactBuildConfig
+import com.facebook.react.internal.featureflags.ReactNativeFeatureFlags
 import com.facebook.react.internal.featureflags.ReactNativeNewArchitectureFeatureFlags
 import com.facebook.react.modules.fresco.ImageCacheControl
 import com.facebook.react.modules.fresco.ReactNetworkImageRequest
@@ -91,6 +98,7 @@ public class ReactImageView(
   private val sources: MutableList<ImageSource> = mutableListOf()
   internal var imageSource: ImageSource? = null
   private var cachedImageSource: ImageSource? = null
+  private var diskCacheProbeCandidates: List<ImageSource> = emptyList()
   private var defaultImageDrawable: Drawable? = null
   private var loadingImageDrawable: Drawable? = null
   private var overlayColor = 0
@@ -396,6 +404,10 @@ public class ReactImageView(
     }
 
     setSourceImage()
+    updateViewForSelectedSource()
+  }
+
+  private fun updateViewForSelectedSource() {
     val imageSourceSafe = this.imageSource ?: return
     val doResize = shouldResize(imageSourceSafe)
 
@@ -458,16 +470,16 @@ public class ReactImageView(
 
     val resizeOptions = if (doResize) resizeOptions else null
 
+    val imagePipeline = Fresco.getImagePipeline()
     if (cacheControl == ImageCacheControl.RELOAD) {
-      val imagePipeline = Fresco.getImagePipeline()
       imagePipeline.evictFromCache(uri)
     }
 
     val imageRequestBuilder =
         ImageRequestBuilder.newBuilderWithSource(uri)
             .setPostprocessor(postprocessor)
             .setResizeOptions(resizeOptions)
-            .setAutoRotateEnabled(true)
+            .setRotationOptions(RotationOptions.autoRotate())
             .setProgressiveRenderingEnabled(progressiveRenderingEnabled)
             .setLowestPermittedRequestLevel(requestLevel)
 
@@ -493,24 +505,101 @@ public class ReactImageView(
 
     // This builder is reused
     builder.reset()
+    builder.setDataSourceSupplier(null)
+
+    builder.setAutoPlayAnimations(true).setOldController(controller)
+
+    val cachedImageRequest =
+        cachedImageSource?.let { cachedSource ->
+          val cachedImageRequestBuilder =
+              ImageRequestBuilder.newBuilderWithSource(cachedSource.uri)
+                  .setPostprocessor(postprocessor)
+                  .setResizeOptions(resizeOptions)
+                  .setRotationOptions(RotationOptions.autoRotate())
+                  .setProgressiveRenderingEnabled(progressiveRenderingEnabled)
+          if (resizeMethod == ImageResizeMethod.NONE) {
+            cachedImageRequestBuilder.setDownsampleOverride(DownsampleMode.NEVER)
+          }
+          cachedImageRequestBuilder.build()
+        }
 
-    builder.setImageRequest(imageRequest).setAutoPlayAnimations(true).setOldController(controller)
-
-    callerContext?.let { builder.setCallerContext(it) }
-
-    cachedImageSource?.let { cachedSource ->
-      val cachedImageRequestBuilder =
-          ImageRequestBuilder.newBuilderWithSource(cachedSource.uri)
-              .setPostprocessor(postprocessor)
-              .setResizeOptions(resizeOptions)
-              .setAutoRotateEnabled(true)
-              .setProgressiveRenderingEnabled(progressiveRenderingEnabled)
-      if (resizeMethod == ImageResizeMethod.NONE) {
-        cachedImageRequestBuilder.setDownsampleOverride(DownsampleMode.NEVER)
+    if (diskCacheProbeCandidates.isEmpty()) {
+      builder.setImageRequest(imageRequest).setLowResImageRequest(cachedImageRequest)
+    } else {
+      val diskCacheRequests = ArrayList<ImageRequest>(diskCacheProbeCandidates.size)
+      for (source in diskCacheProbeCandidates) {
+        val diskCacheRequestBuilder =
+            ImageRequestBuilder.newBuilderWithSource(source.uri)
+                .setPostprocessor(postprocessor)
+                .setResizeOptions(resizeOptions)
+                .setRotationOptions(RotationOptions.autoRotate())
+                .setProgressiveRenderingEnabled(progressiveRenderingEnabled)
+                .setLowestPermittedRequestLevel(RequestLevel.DISK_CACHE)
+        if (resizeMethod == ImageResizeMethod.NONE) {
+          diskCacheRequestBuilder.setDownsampleOverride(DownsampleMode.NEVER)
+        }
+        diskCacheRequests.add(
+            ReactNetworkImageRequest.fromBuilderWithHeaders(
+                diskCacheRequestBuilder,
+                headers,
+                source.cacheControl,
+            ),
+        )
       }
-      builder.setLowResImageRequest(cachedImageRequestBuilder.build())
+      val requestCallerContext = callerContext
+      builder.setDataSourceSupplier(
+          Supplier {
+            val pipelineController = controller as? PipelineDraweeController
+            val requestListener = pipelineController?.requestListener
+            val controllerId = pipelineController?.id
+            fun dataSourceSupplierFor(request: ImageRequest, level: RequestLevel) =
+                imagePipeline.getDataSourceSupplier(
+                    request,
+                    requestCallerContext,
+                    level,
+                    requestListener,
+                    controllerId,
+                )
+
+            val diskCacheDataSourceSuppliers =
+                ArrayList<
+                    Supplier<DataSource<CloseableReference<CloseableImage>>>,
+                >(
+                    diskCacheRequests.size,
+                )
+            for (request in diskCacheRequests) {
+              diskCacheDataSourceSuppliers.add(
+                  dataSourceSupplierFor(request, RequestLevel.FULL_FETCH),
+              )
+            }
+            val diskCacheDataSourceSupplier =
+                FirstAvailableDataSourceSupplier.create(diskCacheDataSourceSuppliers)
+            val lowerResDataSourceSupplier =
+                cachedImageRequest?.let { memoryCacheRequest ->
+                  IncreasingQualityDataSourceSupplier.create(
+                      arrayListOf(
+                          diskCacheDataSourceSupplier,
+                          dataSourceSupplierFor(
+                              memoryCacheRequest,
+                              RequestLevel.BITMAP_MEMORY_CACHE,
+                          ),
+                      ),
+                      imagePipeline.isLazyDataSource.get(),
+                  )
+                } ?: diskCacheDataSourceSupplier
+            val highResDataSourceSupplier =
+                dataSourceSupplierFor(imageRequest, RequestLevel.FULL_FETCH)
+            IncreasingQualityDataSourceSupplier.create(
+                    arrayListOf(highResDataSourceSupplier, lowerResDataSourceSupplier),
+                    imagePipeline.isLazyDataSource.get(),
+                )
+                .get()
+          },
+      )
     }
 
+    callerContext?.let { builder.setCallerContext(it) }
+
     if (downloadListener != null && controllerForTesting != null) {
       val combinedListener: ForwardingControllerListener<ImageInfo> =
           ForwardingControllerListener<ImageInfo>()
@@ -531,6 +620,7 @@ public class ReactImageView(
 
     // Reset again so the DraweeControllerBuilder clears all it's references. Otherwise, this causes
     // a memory leak.
+    builder.setDataSourceSupplier(null)
     builder.reset()
   }
 
@@ -556,12 +646,24 @@ public class ReactImageView(
 
   private fun setSourceImage() {
     imageSource = null
+    cachedImageSource = null
+    diskCacheProbeCandidates = emptyList()
     if (sources.isEmpty()) {
       sources.add(getTransparentBitmapImageSource(context))
     } else if (hasMultipleSources()) {
-      val multiSource = getBestSourceForSize(width, height, sources)
+      val asyncDiskCacheCheckEnabled =
+          ReactNativeFeatureFlags.enableAsyncDiskCacheCheckInMultiSourceImageAndroid()
+      val multiSource =
+          getBestSourceForSize(
+              width,
+              height,
+              sources,
+              1.0,
+              checkDiskCache = !asyncDiskCacheCheckEnabled,
+          )
       imageSource = multiSource.bestResult
       cachedImageSource = multiSource.bestResultInCache
+      diskCacheProbeCandidates = multiSource.diskCacheProbeCandidates
       return
     }
     imageSource = sources[0]