url() support in background image on android

Author: intergalacticspacehighway

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

@@ -8,6 +8,7 @@
 package com.facebook.react.uimanager.drawable
 
 import android.content.Context
+import android.graphics.Bitmap
 import android.graphics.Canvas
 import android.graphics.ColorFilter
 import android.graphics.Paint
@@ -45,11 +46,13 @@ internal class BackgroundImageDrawable(
   private var backgroundImageClipPath: Path? = null
   private var backgroundPositioningArea: RectF? = null
   private var backgroundPaintingArea: RectF? = null
+  private val urlImageLoader = BackgroundImageURLLoader()
 
   var backgroundImageLayers: List<BackgroundImageLayer>? = null
     set(value) {
       if (field != value) {
         field = value
+        loadUrlImages(value)
         invalidateSelf()
       }
     }
@@ -111,7 +114,7 @@ internal class BackgroundImageDrawable(
   }
 
   override fun draw(canvas: Canvas) {
-    if (backgroundImageLayers == null || backgroundImageLayers?.isEmpty() == true) {
+    if (backgroundImageLayers.isNullOrEmpty()) {
       return
     }
 
@@ -138,13 +141,29 @@ internal class BackgroundImageDrawable(
         val repeat = backgroundRepeat?.let { it.getOrNull(index % it.size) }
         val position = backgroundPosition?.let { it.getOrNull(index % it.size) }
 
+        val urlBitmap: Bitmap?
+        val (intrinsicWidth, intrinsicHeight) = when (backgroundImageLayer) {
+          is BackgroundImageLayer.GradientLayer -> {
+            urlBitmap = null
+            backgroundPositioningArea.width() to backgroundPositioningArea.height()
+          }
+          is BackgroundImageLayer.URLImageLayer -> {
+            val bitmap = backgroundImageLayer.loadedBitmap
+            if (bitmap == null) {
+              continue
+            }
+            urlBitmap = bitmap
+            bitmap.width.toFloat() to bitmap.height.toFloat()
+          }
+        }
+
         // 2. Calculate the size of a single tile.
         val (tileWidth, tileHeight) =
             calculateBackgroundImageSize(
                 backgroundPositioningArea.width(),
                 backgroundPositioningArea.height(),
-                backgroundPositioningArea.width(),
-                backgroundPositioningArea.height(),
+                intrinsicWidth,
+                intrinsicHeight,
                 size,
                 repeat,
             )
@@ -153,8 +172,12 @@ internal class BackgroundImageDrawable(
           continue
         }
 
-        // 3. Set paint shader
-        backgroundPaint.setShader(backgroundImageLayer.getShader(tileWidth, tileHeight))
+        // 3. Set paint shader for gradients (URL images don't use shaders)
+        if (backgroundImageLayer is BackgroundImageLayer.GradientLayer) {
+          backgroundPaint.setShader(backgroundImageLayer.getShader(tileWidth, tileHeight))
+        } else {
+          backgroundPaint.setShader(null)
+        }
 
         // 4. Calculate spacing, x and y tiles count and position for tiles
         var (initialX, initialY) = calculateBackgroundPosition(tileWidth, tileHeight, position)
@@ -253,7 +276,13 @@ internal class BackgroundImageDrawable(
           repeat(yTilesCount) {
             canvas.save()
             canvas.translate(translateX, translateY)
-            canvas.drawRect(0f, 0f, tileWidth, tileHeight, backgroundPaint)
+            if (urlBitmap != null) {
+              val srcRect = Rect(0, 0, urlBitmap.width, urlBitmap.height)
+              val dstRect = RectF(0f, 0f, tileWidth, tileHeight)
+              canvas.drawBitmap(urlBitmap, srcRect, dstRect, backgroundPaint)
+            } else {
+              canvas.drawRect(0f, 0f, tileWidth, tileHeight, backgroundPaint)
+            }
             canvas.restore()
             translateY += tileHeight + ySpacing
           }
@@ -412,4 +441,14 @@ internal class BackgroundImageDrawable(
 
     return translateX to translateY
   }
+
+  private fun loadUrlImages(layers: List<BackgroundImageLayer>?) {
+    val urlLayers = layers?.filterIsInstance<BackgroundImageLayer.URLImageLayer>()
+    if (urlLayers.isNullOrEmpty()) {
+      urlImageLoader.cancelAllRequests()
+      return
+    }
+
+    urlImageLoader.loadImages(urlLayers) { invalidateSelf() }
+  }
 }

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

@@ -0,0 +1,82 @@
+/*
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+package com.facebook.react.uimanager.drawable
+
+import android.graphics.Bitmap
+import android.net.Uri
+import com.facebook.common.executors.UiThreadImmediateExecutorService
+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
+
+public class BackgroundImageURLLoader {
+  private companion object {
+    private const val TAG = "BackgroundImageURLLoader"
+  }
+
+  private val pendingRequests = mutableMapOf<String, DataSource<CloseableReference<CloseableImage>>>()
+  private var onComplete: (() -> Unit)? = null
+
+  public fun loadImages(
+    layers: List<BackgroundImageLayer.URLImageLayer>,
+    onComplete: () -> Unit
+  ) {
+    cancelAllRequests()
+
+    if (layers.isEmpty()) {
+      onComplete()
+      return
+    }
+
+    this.onComplete = onComplete
+    for (layer in layers) {
+      val imageRequest = ImageRequestBuilder.newBuilderWithSource(Uri.parse(layer.uri)).build()
+      val imagePipeline = Fresco.getImagePipeline()
+      val dataSource = imagePipeline.fetchDecodedImage(imageRequest, null)
+
+      pendingRequests[layer.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)
+            }
+            onRequestComplete(layer.uri)
+          }
+
+          override fun onFailureImpl(dataSource: DataSource<CloseableReference<CloseableImage>>) {
+            FLog.w(TAG, "Failed to load background image: ${layer.uri}-${dataSource.failureCause}")
+            onRequestComplete(layer.uri)
+          }
+        },
+        UiThreadImmediateExecutorService.getInstance()
+      )
+    }
+  }
+
+  private fun onRequestComplete(uri: String) {
+    pendingRequests.remove(uri)
+    if (pendingRequests.isEmpty()) {
+      onComplete?.invoke()
+    }
+  }
+
+  public fun cancelAllRequests() {
+    for (dataSource in pendingRequests.values) {
+      dataSource.close()
+    }
+    pendingRequests.clear()
+    onComplete = null
+  }
+}

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

@@ -8,38 +8,45 @@
 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
 
-public class BackgroundImageLayer() {
-  private lateinit var gradient: Gradient
+public sealed class BackgroundImageLayer {
+  public class GradientLayer internal constructor(private val gradient: Gradient) : BackgroundImageLayer() {
+    public fun getShader(width: Float, height: Float): Shader = gradient.getShader(width, height)
+  }
 
-  private constructor(gradient: Gradient) : this() {
-    this.gradient = gradient
+  public class URLImageLayer(public val uri: String) : BackgroundImageLayer() {
+    public var loadedBitmap: Bitmap? = null
   }
 
   public companion object {
-    public fun parse(gradientMap: ReadableMap?, context: Context): BackgroundImageLayer? {
-      if (gradientMap == null) {
+    public fun parse(backgroundImageMap: ReadableMap?, context: Context): BackgroundImageLayer? {
+      if (backgroundImageMap == null) {
         return null
       }
-      val gradient = parseGradient(gradientMap, context) ?: return null
-      return BackgroundImageLayer(gradient)
-    }
 
-    private fun parseGradient(gradientMap: ReadableMap, context: Context): Gradient? {
-      if (!gradientMap.hasKey("type") || gradientMap.getType("type") != ReadableType.String) {
+      if (!backgroundImageMap.hasKey("type") || backgroundImageMap.getType("type") != ReadableType.String) {
         return null
       }
 
-      return when (gradientMap.getString("type")) {
-        "linear-gradient" -> LinearGradient.parse(gradientMap, context)
-        "radial-gradient" -> RadialGradient.parse(gradientMap, context)
+      return when (backgroundImageMap.getString("type")) {
+        "linear-gradient" -> {
+          val gradient = LinearGradient.parse(backgroundImageMap, context) ?: return null
+          GradientLayer(gradient)
+        }
+        "radial-gradient" -> {
+          val gradient = RadialGradient.parse(backgroundImageMap, context) ?: return null
+          GradientLayer(gradient)
+        }
+        "url" -> {
+          val uri = backgroundImageMap.getString("uri") ?: return null
+          URLImageLayer(uri)
+        }
         else -> null
       }
     }
   }
-
-  public fun getShader(width: Float, height: Float): Shader = gradient.getShader(width, height)
 }