Read only the drawn child's mix-blend-mode in Android drawChild

ReactViewGroup.drawChild and ReactRootView.drawChild asked
BlendModeHelper.needsIsolatedLayer(this) before reading the drawn child's
mix_blend_mode tag. needsIsolatedLayer reads that tag on every child of the
group, and dispatchDraw calls drawChild once per child, so recording a group
of N children read N^2 tags. With no blend mode set anywhere the scan never
short-circuits, so the whole cost lands on views that never use the feature.

A child carrying the tag makes needsIsolatedLayer true by definition, and a
child without it draws with no layer either way, so the group scan adds
nothing to the decision drawChild makes. drawChild now reads the child's own
tag; draw() keeps its group-wide check, which runs once per recording.

Author: YevheniiKotyrlo

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

@@ -8,7 +8,6 @@
 package com.facebook.react;
 
 import static com.facebook.infer.annotation.ThreadConfined.UI;
-import static com.facebook.react.uimanager.BlendModeHelper.needsIsolatedLayer;
 import static com.facebook.react.uimanager.common.UIManagerType.FABRIC;
 import static com.facebook.systrace.Systrace.TRACE_TAG_REACT;
 
@@ -308,7 +307,7 @@ protected void dispatchDraw(Canvas canvas) {
   protected boolean drawChild(Canvas canvas, View child, long drawingTime) {
 
     BlendMode mixBlendMode = null;
-    if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.Q && needsIsolatedLayer(this)) {
+    if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.Q) {
       mixBlendMode = (BlendMode) child.getTag(R.id.mix_blend_mode);
       if (mixBlendMode != null) {
         Paint p = new Paint();

packages/react-native/ReactAndroid/src/main/java/com/facebook/react/views/view/ReactViewGroup.kt

@@ -1003,7 +1003,7 @@ public open class ReactViewGroup public constructor(context: Context?) :
     }
 
     var mixBlendMode: BlendMode? = null
-    if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.Q && needsIsolatedLayer(this)) {
+    if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.Q) {
       mixBlendMode = child.getTag(R.id.mix_blend_mode) as? BlendMode
       if (mixBlendMode != null) {
         val p = Paint()

packages/react-native/ReactAndroid/src/test/java/com/facebook/react/views/view/ReactViewGroupTest.kt

@@ -9,9 +9,13 @@ package com.facebook.react.views.view
 
 import android.app.Activity
 import android.content.Context
+import android.graphics.BlendMode
+import android.graphics.Canvas
+import android.graphics.Paint
 import android.view.View
 import android.view.ViewGroup
 import android.widget.FrameLayout
+import com.facebook.react.R
 import com.facebook.react.internal.featureflags.ReactNativeFeatureFlags
 import com.facebook.react.internal.featureflags.ReactNativeFeatureFlagsDefaults
 import com.facebook.react.internal.featureflags.ReactNativeFeatureFlagsForTests
@@ -67,6 +71,32 @@ class ReactViewGroupTest {
     assertThat(rvg.childCount).isEqualTo(20)
   }
 
+  @Test
+  fun `mix blend mode - drawing a child reads no sibling's blend mode`() {
+    fun blendModeReadsPerChild(childCount: Int): Int {
+      val rvg = ReactViewGroup(context)
+      val children = List(childCount) { BlendModeReadCountingView(context) }
+      children.forEach { rvg.addView(it) }
+      rvg.layout(0, 0, 100, 100)
+      rvg.draw(Canvas())
+      return children.maxOf { it.blendModeReads }
+    }
+
+    assertThat(blendModeReadsPerChild(20)).isEqualTo(blendModeReadsPerChild(2))
+  }
+
+  @Test
+  fun `mix blend mode - a child with a blend mode draws into a layer with that blend mode`() {
+    val rvg = ReactViewGroup(context)
+    rvg.addView(View(context))
+    rvg.addView(View(context).apply { setTag(R.id.mix_blend_mode, BlendMode.MULTIPLY) })
+    rvg.addView(View(context))
+    rvg.layout(0, 0, 100, 100)
+    val canvas = LayerRecordingCanvas()
+    rvg.draw(canvas)
+    assertThat(canvas.layerBlendModes).containsExactly(null, BlendMode.MULTIPLY)
+  }
+
   @Test
   fun `auto offscreen compositing - true when flag on, alpha lt 1, and elevated descendant`() {
     overrideAutoOffscreenFlag(true)
@@ -294,3 +324,23 @@ class TestView(context: Context, yPos: Int) : View(context) {
 class TestParent(context: Context) : ViewGroup(context) {
   override fun onLayout(changed: Boolean, l: Int, t: Int, r: Int, b: Int) = Unit
 }
+
+private class BlendModeReadCountingView(context: Context) : View(context) {
+  var blendModeReads = 0
+
+  override fun getTag(key: Int): Any? {
+    if (key == R.id.mix_blend_mode) {
+      blendModeReads++
+    }
+    return super.getTag(key)
+  }
+}
+
+private class LayerRecordingCanvas : Canvas() {
+  val layerBlendModes = mutableListOf<BlendMode?>()
+
+  override fun saveLayer(left: Float, top: Float, right: Float, bottom: Float, paint: Paint?): Int {
+    layerBlendModes.add(paint?.blendMode)
+    return super.saveLayer(left, top, right, bottom, paint)
+  }
+}