copy bitmap on background thread

Author: intergalacticspacehighway

packages/react-native/ReactAndroid/src/main/java/com/facebook/react/uimanager/drawable/BackgroundImageDrawable.kt

@@ -137,9 +137,9 @@ internal class BackgroundImageDrawable(
       // So we draw in reverse (last drawn in canvas appears closest)
       for (index in layers.indices.reversed()) {
         val backgroundImageLayer = layers[index]
-        val size = backgroundSize?.let { it.getOrNull(index % it.size) }
-        val repeat = backgroundRepeat?.let { it.getOrNull(index % it.size) }
-        val position = backgroundPosition?.let { it.getOrNull(index % it.size) }
+        val size = backgroundSize?.takeIf { it.isNotEmpty() }?.let { it[index % it.size] }
+        val repeat = backgroundRepeat?.takeIf { it.isNotEmpty() }?.let { it[index % it.size] }
+        val position = backgroundPosition?.takeIf { it.isNotEmpty() }?.let { it[index % it.size] }
 
         val urlBitmap: Bitmap?
         val (intrinsicWidth, intrinsicHeight) = when (backgroundImageLayer) {
@@ -148,7 +148,7 @@ internal class BackgroundImageDrawable(
             backgroundPositioningArea.width() to backgroundPositioningArea.height()
           }
           is BackgroundImageLayer.URLImageLayer -> {
-            val bitmap = backgroundImageLayer.loadedBitmap
+            val bitmap = urlImageLoader.loadedBitmapForUri(backgroundImageLayer.uri)
             if (bitmap == null) {
               continue
             }
@@ -443,12 +443,12 @@ internal class BackgroundImageDrawable(
   }
 
   private fun loadUrlImages(layers: List<BackgroundImageLayer>?) {
-    val urlLayers = layers?.filterIsInstance<BackgroundImageLayer.URLImageLayer>()
-    if (urlLayers.isNullOrEmpty()) {
+    val uris = layers?.filterIsInstance<BackgroundImageLayer.URLImageLayer>()?.map { it.uri }
+    if (uris.isNullOrEmpty()) {
       urlImageLoader.cancelAllRequests()
       return
     }
 
-    urlImageLoader.loadImages(urlLayers) { invalidateSelf() }
+    urlImageLoader.loadImages(uris) { invalidateSelf() }
   }
 }

packages/react-native/ReactAndroid/src/main/java/com/facebook/react/uimanager/drawable/BackgroundImageURLLoader.kt

@@ -9,66 +9,70 @@ package com.facebook.react.uimanager.drawable
 
 import android.graphics.Bitmap
 import android.net.Uri
-import com.facebook.common.executors.UiThreadImmediateExecutorService
+import com.facebook.common.executors.CallerThreadExecutor
 import com.facebook.common.logging.FLog
 import com.facebook.common.references.CloseableReference
 import com.facebook.datasource.DataSource
 import com.facebook.drawee.backends.pipeline.Fresco
 import com.facebook.imagepipeline.datasource.BaseBitmapDataSubscriber
 import com.facebook.imagepipeline.image.CloseableImage
 import com.facebook.imagepipeline.request.ImageRequestBuilder
-import com.facebook.react.uimanager.style.BackgroundImageLayer
+import com.facebook.react.bridge.UiThreadUtil
+import java.util.concurrent.ConcurrentHashMap
 
 public class BackgroundImageURLLoader {
   private companion object {
     private const val TAG = "BackgroundImageURLLoader"
   }
 
   private val pendingRequests = mutableMapOf<String, DataSource<CloseableReference<CloseableImage>>>()
+  private val loadedBitmaps = ConcurrentHashMap<String, Bitmap>()
   private var onComplete: (() -> Unit)? = null
 
   public fun loadImages(
-    layers: List<BackgroundImageLayer.URLImageLayer>,
+    uris: List<String>,
     onComplete: () -> Unit
   ) {
     cancelAllRequests()
 
-    if (layers.isEmpty()) {
+    if (uris.isEmpty()) {
       onComplete()
       return
     }
 
     this.onComplete = onComplete
-    for (layer in layers) {
-      val imageRequest = ImageRequestBuilder.newBuilderWithSource(Uri.parse(layer.uri)).build()
+    for (uri in uris) {
+      val imageRequest = ImageRequestBuilder.newBuilderWithSource(Uri.parse(uri)).build()
       val imagePipeline = Fresco.getImagePipeline()
       val dataSource = imagePipeline.fetchDecodedImage(imageRequest, null)
 
-      pendingRequests[layer.uri] = dataSource
+      pendingRequests[uri] = dataSource
 
       dataSource.subscribe(
         object : BaseBitmapDataSubscriber() {
           override fun onNewResultImpl(bitmap: Bitmap?) {
             if (bitmap != null) {
-              layer.loadedBitmap = bitmap.copy(bitmap.config ?: Bitmap.Config.ARGB_8888, false)
+              loadedBitmaps[uri] = bitmap.copy(bitmap.config ?: Bitmap.Config.ARGB_8888, false)
             }
-            onRequestComplete(layer.uri)
+            onRequestComplete(uri)
           }
 
           override fun onFailureImpl(dataSource: DataSource<CloseableReference<CloseableImage>>) {
-            FLog.w(TAG, "Failed to load background image: ${layer.uri}-${dataSource.failureCause}")
-            onRequestComplete(layer.uri)
+            FLog.w(TAG, "Failed to load background image: $uri-${dataSource.failureCause}")
+            onRequestComplete(uri)
           }
         },
-        UiThreadImmediateExecutorService.getInstance()
+        CallerThreadExecutor.getInstance()
       )
     }
   }
 
+  public fun loadedBitmapForUri(uri: String): Bitmap? = loadedBitmaps[uri]
+
   private fun onRequestComplete(uri: String) {
     pendingRequests.remove(uri)
     if (pendingRequests.isEmpty()) {
-      onComplete?.invoke()
+      UiThreadUtil.runOnUiThread { onComplete?.invoke() }
     }
   }
 
@@ -77,6 +81,7 @@ public class BackgroundImageURLLoader {
       dataSource.close()
     }
     pendingRequests.clear()
+    loadedBitmaps.clear()
     onComplete = null
   }
 }

packages/react-native/ReactAndroid/src/main/java/com/facebook/react/uimanager/style/BackgroundImageLayer.kt

@@ -8,7 +8,6 @@
 package com.facebook.react.uimanager.style
 
 import android.content.Context
-import android.graphics.Bitmap
 import android.graphics.Shader
 import com.facebook.react.bridge.ReadableMap
 import com.facebook.react.bridge.ReadableType
@@ -18,9 +17,7 @@ public sealed class BackgroundImageLayer {
     public fun getShader(width: Float, height: Float): Shader = gradient.getShader(width, height)
   }
 
-  public class URLImageLayer(public val uri: String) : BackgroundImageLayer() {
-    public var loadedBitmap: Bitmap? = null
-  }
+  public class URLImageLayer(public val uri: String) : BackgroundImageLayer()
 
   public companion object {
     public fun parse(backgroundImageMap: ReadableMap?, context: Context): BackgroundImageLayer? {