feat(android): wip

Author: paradowstack

packages/react-native/ReactAndroid/src/main/java/com/facebook/react/ReactRootView.java

@@ -19,6 +19,8 @@
 import android.graphics.Insets;
 import android.graphics.Paint;
 import android.graphics.Point;
+import android.graphics.PorterDuff;
+import android.graphics.PorterDuffXfermode;
 import android.graphics.Rect;
 import android.os.Build;
 import android.os.Bundle;
@@ -70,7 +72,9 @@
 import com.facebook.react.uimanager.UIManagerHelper;
 import com.facebook.react.uimanager.common.UIManagerType;
 import com.facebook.react.uimanager.common.ViewUtil;
+import com.facebook.react.uimanager.drawable.GradientMaskDrawable;
 import com.facebook.react.uimanager.events.EventDispatcher;
+import com.facebook.react.uimanager.style.BackgroundImageLayer;
 import com.facebook.systrace.Systrace;
 import java.util.concurrent.atomic.AtomicInteger;
 
@@ -313,19 +317,40 @@ protected boolean drawChild(Canvas canvas, View child, long drawingTime) {
         && ViewUtil.getUIManagerType(this) == UIManagerType.FABRIC
         && needsIsolatedLayer(this)) {
       mixBlendMode = (BlendMode) child.getTag(R.id.mix_blend_mode);
+
       if (mixBlendMode != null) {
         Paint p = new Paint();
         p.setBlendMode(mixBlendMode);
         canvas.saveLayer(0, 0, getWidth(), getHeight(), p);
       }
     }
 
+//    BackgroundImageLayer mask = (BackgroundImageLayer)child.getTag(R.id.mask_gradient_layer);
+//    int saveCount = -1;
+//    if (mask != null) {
+//      saveCount = canvas.saveLayer(0, 0, getWidth(), getHeight(), null);
+//    }
+
     boolean result = super.drawChild(canvas, child, drawingTime);
 
     if (mixBlendMode != null) {
       canvas.restore();
     }
 
+//    if (mask != null) {
+//      Paint maskPaint = new Paint(Paint.ANTI_ALIAS_FLAG);
+//        maskPaint.setXfermode(new PorterDuffXfermode(PorterDuff.Mode.DST_IN));
+//        maskPaint.setFilterBitmap(true);
+//      GradientMaskDrawable maskDrawable = new GradientMaskDrawable();
+//      maskDrawable.setShader(mask.getShader(child.getWidth(), child.getHeight()));
+//      maskDrawable.setBounds(0, 0, child.getWidth(), child.getHeight());
+//      maskDrawable.drawWithMaskMode(canvas, maskPaint);
+//    }
+//
+//    if (saveCount != -1) {
+//      canvas.restoreToCount(saveCount);
+//    }
+
     return result;
   }
 

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

@@ -20,9 +20,14 @@ import android.os.Build
 import android.view.View
 import android.widget.ImageView
 import androidx.annotation.ColorInt
+import com.facebook.imagepipeline.request.ImageRequest
+import com.facebook.imagepipeline.request.ImageRequestBuilder
+import com.facebook.react.R
 import com.facebook.react.bridge.ReadableArray
+import com.facebook.react.bridge.ReadableMap
 import com.facebook.react.common.annotations.UnstableReactNativeAPI
 import com.facebook.react.internal.featureflags.ReactNativeFeatureFlags
+import com.facebook.react.modules.fresco.ReactNetworkImageRequest
 import com.facebook.react.uimanager.PixelUtil.dpToPx
 import com.facebook.react.uimanager.PixelUtil.pxToDp
 import com.facebook.react.uimanager.common.UIManagerType
@@ -31,9 +36,12 @@ import com.facebook.react.uimanager.drawable.BackgroundDrawable
 import com.facebook.react.uimanager.drawable.BackgroundImageDrawable
 import com.facebook.react.uimanager.drawable.BorderDrawable
 import com.facebook.react.uimanager.drawable.CompositeBackgroundDrawable
+import com.facebook.react.uimanager.drawable.DraweeMaskDrawable
+import com.facebook.react.uimanager.drawable.GradientMaskDrawable
 import com.facebook.react.uimanager.drawable.InsetBoxShadowDrawable
 import com.facebook.react.uimanager.drawable.MIN_INSET_BOX_SHADOW_SDK_VERSION
 import com.facebook.react.uimanager.drawable.MIN_OUTSET_BOX_SHADOW_SDK_VERSION
+import com.facebook.react.uimanager.drawable.MaskDrawable
 import com.facebook.react.uimanager.drawable.OutlineDrawable
 import com.facebook.react.uimanager.drawable.OutsetBoxShadowDrawable
 import com.facebook.react.uimanager.style.BackgroundImageLayer
@@ -47,6 +55,8 @@ import com.facebook.react.uimanager.style.BorderStyle
 import com.facebook.react.uimanager.style.BoxShadow
 import com.facebook.react.uimanager.style.LogicalEdge
 import com.facebook.react.uimanager.style.OutlineStyle
+import com.facebook.react.views.imagehelper.ImageSource
+import com.facebook.react.views.view.ReactViewGroup
 
 /**
  * Utility object responsible for applying backgrounds, borders, and related visual effects to
@@ -795,4 +805,121 @@ public object BackgroundStyleApplicator {
     )
     return paddingBoxPath
   }
+
+  @JvmStatic
+  public fun setMaskImage(
+    view: View,
+    maskImage: ReadableArray?,
+  ) {
+    val composite = ensureCompositeBackgroundDrawable(view)
+    if (ViewUtil.getUIManagerType(view) == UIManagerType.FABRIC) {
+      // Set SOFTWARE layer type immediately when mask is requested
+      // This ensures Porter-Duff compositing works even if view is drawn before image loads
+      if (maskImage != null && maskImage.size() > 0) {
+        view.setLayerType(View.LAYER_TYPE_SOFTWARE, null)
+      } else {
+        view.setLayerType(View.LAYER_TYPE_NONE, null)
+      }
+
+      (composite.mask as? DraweeMaskDrawable)?.onDetach()
+
+      if (maskImage != null && maskImage.size() > 0) {
+        // Use the first mask layer
+        val maskImageMap = maskImage.getMap(0)
+        val type = maskImageMap?.getString("type")
+
+        when (type) {
+          "image" -> {
+            // Load image mask using DraweeHolder (no Bitmap copy needed)
+            val url = maskImageMap.getString("url")
+            if (url != null) {
+              loadMaskDrawable(view, url)
+            }
+          }
+          "linear-gradient", "radial-gradient" -> {
+            // Create gradient mask from shader (still uses Bitmap for gradients)
+            createGradientMask(view, maskImageMap)
+          }
+          else -> {
+            composite.mask = null
+          }
+        }
+      } else {
+        composite.mask = null
+      }
+      if (composite.mask != null && composite.mask is DraweeMaskDrawable) {
+        (composite.mask as DraweeMaskDrawable).onAttach()
+      }
+    }
+  }
+
+
+  /**
+   * Creates a gradient mask from a gradient definition. Uses a GradientMaskDrawable
+   * to draw the gradient directly without creating a Bitmap copy.
+   */
+  private fun createGradientMask(view: View, gradientMap: ReadableMap) {
+    val gradientLayer = BackgroundImageLayer.parse(gradientMap, view.context)
+    val composite = ensureCompositeBackgroundDrawable(view)
+    if (gradientLayer != null) {
+      // Create or get existing GradientMaskDrawable
+      val gradientDrawable = composite.mask as? GradientMaskDrawable
+        ?: GradientMaskDrawable().also {
+          composite.mask = it
+        }
+
+      // Generate mask when view has dimensions
+      view.post {
+        if (view.width > 0 && view.height > 0) {
+          val shader = gradientLayer.getShader(view.width.toFloat(), view.height.toFloat())
+          gradientDrawable.setShader(shader)
+          gradientDrawable.setBounds(0, 0, view.width, view.height)
+          composite.mask = gradientDrawable
+          println("Gradient mask created: ${view.width}x${view.height}")
+          view.setTag(R.id.mask_gradient_layer, gradientLayer)
+          view.invalidate()
+        } else {
+          // Store gradient for later when view gets dimensions
+          view.setTag(R.id.mask_gradient_layer, gradientLayer)
+        }
+      }
+    } else {
+      composite.mask = null
+    }
+  }
+
+  /**
+   * Loads an image mask using DraweeHolder. This avoids creating Bitmap copies and leverages
+   * Fresco's caching and lifecycle management. The DraweeDrawable will be used directly for masking.
+   */
+  private fun loadMaskDrawable(view: View, url: String) {
+    val imageSource = ImageSource(view.context, url)
+    val composite = ensureCompositeBackgroundDrawable(view)
+    val imageRequest: ImageRequest =
+      ReactNetworkImageRequest.fromBuilderWithHeaders(
+        ImageRequestBuilder.newBuilderWithSource(imageSource.uri),
+        null,
+        imageSource.cacheControl
+      )
+
+    // Create or get existing DraweeMaskDrawable
+    val maskDrawable = (composite.mask as DraweeMaskDrawable?)
+      ?: DraweeMaskDrawable(view.context.resources).also {
+        composite.mask = it
+      }
+
+    // Set the ImageRequest - DraweeHolder will handle loading, caching, and lifecycle
+    maskDrawable.setImageRequest(imageRequest)
+
+    // Update bounds if view already has dimensions
+    if (view.width > 0 && view.height > 0) {
+      maskDrawable.setBounds(0, 0, view.width, view.height)
+    }
+
+    composite.mask = maskDrawable
+    view.invalidate()
+  }
+
+  @JvmStatic
+  internal fun getMask(view: View): MaskDrawable? = ensureCompositeBackgroundDrawable(view).mask
 }

packages/react-native/ReactAndroid/src/main/java/com/facebook/react/uimanager/BaseViewManager.java

@@ -860,6 +860,11 @@ public void setBoxShadow(T view, @Nullable ReadableArray shadows) {
     BackgroundStyleApplicator.setBoxShadow(view, shadows);
   }
 
+  @ReactProp(name = ViewProps.MASK_IMAGE, customType = "BackgroundImage")
+  public void setMaskImage(T view, @Nullable ReadableArray images) {
+    BackgroundStyleApplicator.setMaskImage(view, images);
+  }
+
   private void logUnsupportedPropertyWarning(String propName) {
     FLog.w(ReactConstants.TAG, "%s doesn't support property '%s'", getName(), propName);
   }

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

@@ -88,6 +88,8 @@ public abstract class BaseViewManagerDelegate<
 
       ViewProps.MIX_BLEND_MODE -> mViewManager.setMixBlendMode(view, value as String?)
 
+      ViewProps.MASK_IMAGE -> mViewManager.setMaskImage(view, value as ReadableArray?)
+
       ViewProps.SHADOW_COLOR ->
           mViewManager.setShadowColor(view, ColorPropConverter.getColor(value, view.context, 0))
 

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

@@ -8,14 +8,21 @@
 package com.facebook.react.uimanager.drawable
 
 import android.content.Context
+import android.graphics.Canvas
 import android.graphics.Outline
+import android.graphics.Paint
 import android.graphics.Path
+import android.graphics.PorterDuff
+import android.graphics.PorterDuffXfermode
 import android.graphics.RectF
 import android.graphics.drawable.Drawable
 import android.graphics.drawable.LayerDrawable
 import android.os.Build
 import com.facebook.react.common.annotations.UnstableReactNativeAPI
+import com.facebook.react.uimanager.BlendModeHelper.needsIsolatedLayer
 import com.facebook.react.uimanager.PixelUtil.dpToPx
+import com.facebook.react.uimanager.common.UIManagerType
+import com.facebook.react.uimanager.common.ViewUtil.getUIManagerType
 import com.facebook.react.uimanager.style.BorderInsets
 import com.facebook.react.uimanager.style.BorderRadiusStyle
 
@@ -58,6 +65,10 @@ internal class CompositeBackgroundDrawable(
 
     // Holder value for currently set border radius
     var borderRadius: BorderRadiusStyle? = null,
+
+    // Mask
+    var mask: MaskDrawable? = null
+
 ) :
     LayerDrawable(
         createLayersArray(
@@ -223,6 +234,43 @@ internal class CompositeBackgroundDrawable(
     }
   }
 
+//  override fun draw(canvas: Canvas) {
+//    val drawable = mask
+//    val width = bounds.width()
+//    val height = bounds.height()
+//    var saveCount: Int? = null;
+//    val useMask = drawable != null && width > 0 && height > 0
+//    if (useMask) {
+//      val bounds = RectF(0f, 0f, width.toFloat(), height.toFloat())
+//      saveCount = canvas.saveLayer(bounds, null)
+//    }
+//
+//    super.draw(canvas)
+//    if (useMask) {
+//
+//      // Now apply the mask Drawable to everything that was drawn (background + children)
+//      // Use Porter-Duff DST_IN mode - the Drawable's alpha channel determines visibility
+//      val maskPaint = Paint(Paint.ANTI_ALIAS_FLAG).apply {
+//        xfermode = PorterDuffXfermode(PorterDuff.Mode.DST_IN)
+//        isFilterBitmap = true
+//      }
+//
+//      if (drawable is DraweeMaskDrawable) {
+//        (drawable as DraweeMaskDrawable?)?.setBounds(0, 0, width, height)
+//      }
+//
+//      // Draw the mask Drawable with Porter-Duff DST_IN mode
+//      // This will mask everything drawn before (background + children)
+////      drawable.drawWithMaskMode(canvas, maskPaint)
+//
+//      // Restore layer (this applies the Porter-Duff compositing)
+//      if (saveCount != null) {
+//        canvas.restoreToCount(saveCount)
+//      }
+//    }
+//  }
+
+
   companion object {
     private fun createLayersArray(
         originalBackground: Drawable?,

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

@@ -45,8 +45,8 @@ internal class DraweeMaskDrawable(
         // Set ourselves as callback to invalidate when DraweeDrawable changes
         // This will be updated when the controller is set
     }
-    
-    /**
+
+  /**
      * Sets the ImageRequest to load as the mask.
      * The DraweeHolder will handle loading, caching, and lifecycle management.
      */
@@ -155,5 +155,14 @@ internal class DraweeMaskDrawable(
     override fun getOpacity(): Int {
         return draweeHolder.topLevelDrawable?.opacity ?: PixelFormat.TRANSLUCENT
     }
+
+
+  override fun getIntrinsicWidth(): Int {
+    return draweeHolder.topLevelDrawable?.intrinsicWidth ?: -1
+  }
+
+  override fun getIntrinsicHeight(): Int {
+    return draweeHolder.topLevelDrawable?.intrinsicHeight ?: -1
+  }
 }
 

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

@@ -15,11 +15,11 @@ import android.graphics.drawable.Drawable
  * Common interface for mask Drawables that can be used to mask view content.
  * Both DraweeMaskDrawable and GradientMaskDrawable implement this interface.
  */
-internal interface MaskDrawable {
+public interface MaskDrawable {
     /**
      * Draws this Drawable with Porter-Duff compositing applied.
      * This is called from ReactViewGroup.draw() to apply the mask.
      */
-    fun drawWithMaskMode(canvas: Canvas, maskPaint: Paint)
-    fun onAttach()
+    public fun drawWithMaskMode(canvas: Canvas, maskPaint: Paint)
+    public fun onAttach()
 }