Fix jagged edge rendering on API 28 (#54525)

Summary:
Pull Request resolved: #54525

Older versions of Android's clipPath APIs do not properly support antialiasing and BackgroundStyleApplicator relies on this API to clip to border radii that are smaller than provided images or views. As a result, this often leaves jagged edges on the outer edges of these images. Android even calls this out in their documentation under the "Canvas.clipPath" section of https://developer.android.com/topic/performance/vitals/render#common-jank.

This change introduces a new API in BackgroundStyleApplicator called `clipToPaddingBoxWithAntiAliasing` which takes an additional argument over the existing `clipToPaddingBox`: a draw call. If non-null and the Android API is 28 or lower, a new drawPath operation is used to mark the pixels outside of the drawn contents as transparent.

Changelog: [Android][Fixed] - Fixed antialiasing issues from border radius usage in API <= 28

Reviewed By: haixia-meta, lenaic

Differential Revision: D86263195

fbshipit-source-id: 5dba744da08a3c9297f921baf7d4f1a354404f74

Author: Abbondanzo

packages/react-native/ReactAndroid/api/ReactAndroid.api

@@ -3228,6 +3228,7 @@ public abstract interface class com/facebook/react/turbomodule/core/interfaces/T
 public final class com/facebook/react/uimanager/BackgroundStyleApplicator {
 	public static final field INSTANCE Lcom/facebook/react/uimanager/BackgroundStyleApplicator;
 	public static final fun clipToPaddingBox (Landroid/view/View;Landroid/graphics/Canvas;)V
+	public static final fun clipToPaddingBoxWithAntiAliasing (Landroid/view/View;Landroid/graphics/Canvas;Lkotlin/jvm/functions/Function0;)V
 	public static final fun getBackgroundColor (Landroid/view/View;)Ljava/lang/Integer;
 	public static final fun getBorderColor (Landroid/view/View;Lcom/facebook/react/uimanager/style/LogicalEdge;)Ljava/lang/Integer;
 	public static final fun getBorderRadius (Landroid/view/View;Lcom/facebook/react/uimanager/style/BorderRadiusProp;)Lcom/facebook/react/uimanager/LengthPercentage;

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<<10999fe360a25451c316eed2d27b6d92>>
+ * @generated SignedSource<<b1469e448ca6f773a3095ec2cbf4bc00>>
  */
 
 /**
@@ -114,6 +114,12 @@ public object ReactNativeFeatureFlags {
   @JvmStatic
   public fun enableAccumulatedUpdatesInRawPropsAndroid(): Boolean = accessor.enableAccumulatedUpdatesInRawPropsAndroid()
 
+  /**
+   * Enable antialiased border radius clipping for Android API 28 and below using manual masking with Porter-Duff compositing
+   */
+  @JvmStatic
+  public fun enableAndroidAntialiasedBorderRadiusClipping(): Boolean = accessor.enableAndroidAntialiasedBorderRadiusClipping()
+
   /**
    * Enables linear text rendering on Android wherever subpixel text rendering is enabled
    */

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<<b935cd2546fdba877e317aea30fceaf9>>
+ * @generated SignedSource<<b2c2e874b05283e0ebd62899f7c417d8>>
  */
 
 /**
@@ -34,6 +34,7 @@ internal class ReactNativeFeatureFlagsCxxAccessor : ReactNativeFeatureFlagsAcces
   private var disableViewPreallocationAndroidCache: Boolean? = null
   private var enableAccessibilityOrderCache: Boolean? = null
   private var enableAccumulatedUpdatesInRawPropsAndroidCache: Boolean? = null
+  private var enableAndroidAntialiasedBorderRadiusClippingCache: Boolean? = null
   private var enableAndroidLinearTextCache: Boolean? = null
   private var enableAndroidTextMeasurementOptimizationsCache: Boolean? = null
   private var enableBridgelessArchitectureCache: Boolean? = null
@@ -235,6 +236,15 @@ internal class ReactNativeFeatureFlagsCxxAccessor : ReactNativeFeatureFlagsAcces
     return cached
   }
 
+  override fun enableAndroidAntialiasedBorderRadiusClipping(): Boolean {
+    var cached = enableAndroidAntialiasedBorderRadiusClippingCache
+    if (cached == null) {
+      cached = ReactNativeFeatureFlagsCxxInterop.enableAndroidAntialiasedBorderRadiusClipping()
+      enableAndroidAntialiasedBorderRadiusClippingCache = cached
+    }
+    return cached
+  }
+
   override fun enableAndroidLinearText(): Boolean {
     var cached = enableAndroidLinearTextCache
     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<<b7a9d14c50bae9afa15b3ead8308fc9b>>
+ * @generated SignedSource<<ccb22ddcd1a76b7c52cf0f1b23e6152b>>
  */
 
 /**
@@ -56,6 +56,8 @@ public object ReactNativeFeatureFlagsCxxInterop {
 
   @DoNotStrip @JvmStatic public external fun enableAccumulatedUpdatesInRawPropsAndroid(): Boolean
 
+  @DoNotStrip @JvmStatic public external fun enableAndroidAntialiasedBorderRadiusClipping(): Boolean
+
   @DoNotStrip @JvmStatic public external fun enableAndroidLinearText(): Boolean
 
   @DoNotStrip @JvmStatic public external fun enableAndroidTextMeasurementOptimizations(): 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<<4b24bc3165b6ab1583efc8e1a22444ed>>
+ * @generated SignedSource<<30ca2685ceb6f2733531f5e7fce4416d>>
  */
 
 /**
@@ -51,6 +51,8 @@ public open class ReactNativeFeatureFlagsDefaults : ReactNativeFeatureFlagsProvi
 
   override fun enableAccumulatedUpdatesInRawPropsAndroid(): Boolean = false
 
+  override fun enableAndroidAntialiasedBorderRadiusClipping(): Boolean = false
+
   override fun enableAndroidLinearText(): Boolean = false
 
   override fun enableAndroidTextMeasurementOptimizations(): Boolean = false

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<<bd86cec4dcf659b9586aeee1c141963c>>
+ * @generated SignedSource<<6d1a15e64f42cc7d8869300720276215>>
  */
 
 /**
@@ -38,6 +38,7 @@ internal class ReactNativeFeatureFlagsLocalAccessor : ReactNativeFeatureFlagsAcc
   private var disableViewPreallocationAndroidCache: Boolean? = null
   private var enableAccessibilityOrderCache: Boolean? = null
   private var enableAccumulatedUpdatesInRawPropsAndroidCache: Boolean? = null
+  private var enableAndroidAntialiasedBorderRadiusClippingCache: Boolean? = null
   private var enableAndroidLinearTextCache: Boolean? = null
   private var enableAndroidTextMeasurementOptimizationsCache: Boolean? = null
   private var enableBridgelessArchitectureCache: Boolean? = null
@@ -253,6 +254,16 @@ internal class ReactNativeFeatureFlagsLocalAccessor : ReactNativeFeatureFlagsAcc
     return cached
   }
 
+  override fun enableAndroidAntialiasedBorderRadiusClipping(): Boolean {
+    var cached = enableAndroidAntialiasedBorderRadiusClippingCache
+    if (cached == null) {
+      cached = currentProvider.enableAndroidAntialiasedBorderRadiusClipping()
+      accessedFeatureFlags.add("enableAndroidAntialiasedBorderRadiusClipping")
+      enableAndroidAntialiasedBorderRadiusClippingCache = cached
+    }
+    return cached
+  }
+
   override fun enableAndroidLinearText(): Boolean {
     var cached = enableAndroidLinearTextCache
     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<<90fd5f8d9c5b6833c6fdd10167577bb9>>
+ * @generated SignedSource<<48d0d5486793b60914cfd595f0fc78d1>>
  */
 
 /**
@@ -51,6 +51,8 @@ public interface ReactNativeFeatureFlagsProvider {
 
   @DoNotStrip public fun enableAccumulatedUpdatesInRawPropsAndroid(): Boolean
 
+  @DoNotStrip public fun enableAndroidAntialiasedBorderRadiusClipping(): Boolean
+
   @DoNotStrip public fun enableAndroidLinearText(): Boolean
 
   @DoNotStrip public fun enableAndroidTextMeasurementOptimizations(): Boolean

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

@@ -9,7 +9,10 @@ package com.facebook.react.uimanager
 
 import android.graphics.Canvas
 import android.graphics.Color
+import android.graphics.Paint
 import android.graphics.Path
+import android.graphics.PorterDuff
+import android.graphics.PorterDuffXfermode
 import android.graphics.Rect
 import android.graphics.RectF
 import android.graphics.drawable.Drawable
@@ -19,6 +22,7 @@ import android.widget.ImageView
 import androidx.annotation.ColorInt
 import com.facebook.react.bridge.ReadableArray
 import com.facebook.react.common.annotations.UnstableReactNativeAPI
+import com.facebook.react.internal.featureflags.ReactNativeFeatureFlags
 import com.facebook.react.uimanager.PixelUtil.dpToPx
 import com.facebook.react.uimanager.PixelUtil.pxToDp
 import com.facebook.react.uimanager.common.UIManagerType
@@ -481,12 +485,36 @@ public object BackgroundStyleApplicator {
    */
   @JvmStatic
   public fun clipToPaddingBox(view: View, canvas: Canvas) {
+    clipToPaddingBoxWithAntiAliasing(view, canvas, null)
+  }
+
+  /**
+   * Clips the canvas to the padding box of the view.
+   *
+   * The padding box is the area within the borders of the view, accounting for border radius if
+   * present.
+   *
+   * On Android 28 and below, when border radius is present, this uses an antialiased clipping
+   * approach with Porter-Duff compositing to avoid jagged edges. The drawContent lambda is invoked
+   * to draw the actual content after setting up the layer but before applying the mask.
+   *
+   * @param view The view whose padding box defines the clipping region
+   * @param canvas The canvas to clip
+   * @param drawContent Lambda that draws the content after clipping is set up
+   */
+  @JvmStatic
+  public fun clipToPaddingBoxWithAntiAliasing(
+      view: View,
+      canvas: Canvas,
+      drawContent: (() -> Unit)?,
+  ) {
     val drawingRect = Rect()
     view.getDrawingRect(drawingRect)
 
     val composite = getCompositeBackgroundDrawable(view)
     if (composite == null) {
       canvas.clipRect(drawingRect)
+      drawContent?.invoke()
       return
     }
 
@@ -508,15 +536,69 @@ public object BackgroundStyleApplicator {
               paddingBoxRect,
               computedBorderInsets,
           )
-
       paddingBoxPath.offset(drawingRect.left.toFloat(), drawingRect.top.toFloat())
-      canvas.clipPath(paddingBoxPath)
+
+      // On Android 28 and below, use antialiased clipping with Porter-Duff compositing. On newer
+      // Android versions, use the standard clipPath.
+      if (
+          ReactNativeFeatureFlags.enableAndroidAntialiasedBorderRadiusClipping() &&
+              Build.VERSION.SDK_INT <= Build.VERSION_CODES.P &&
+              view.width > 0 &&
+              view.height > 0 &&
+              drawContent != null
+      ) {
+        clipWithAntiAliasing(
+            view,
+            canvas,
+            paddingBoxPath,
+            drawContent,
+        )
+      } else {
+        canvas.clipPath(paddingBoxPath)
+        drawContent?.invoke()
+      }
     } else {
       paddingBoxRect.offset(drawingRect.left.toFloat(), drawingRect.top.toFloat())
       canvas.clipRect(paddingBoxRect)
+      drawContent?.invoke()
     }
   }
 
+  /**
+   * Applies antialiased clipping using Porter-Duff compositing for Android 28 and below. This draws
+   * content to a layer, then applies an antialiased mask to clip it.
+   */
+  private fun clipWithAntiAliasing(
+      view: View,
+      canvas: Canvas,
+      paddingBoxPath: Path,
+      drawContent: () -> Unit,
+  ) {
+    // Save the layer for Porter-Duff compositing
+    val saveCount = canvas.saveLayer(0f, 0f, view.width.toFloat(), view.height.toFloat(), null)
+
+    // Draw the content first
+    drawContent()
+
+    // Create the antialiased mask path with Porter-Duff DST_IN to clip
+    val maskPaint = Paint(Paint.ANTI_ALIAS_FLAG)
+    maskPaint.style = Paint.Style.FILL
+    maskPaint.xfermode = PorterDuffXfermode(PorterDuff.Mode.DST_IN)
+
+    // Transparent pixels with INVERSE_WINDING only works on API 28
+    if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.P) {
+      maskPaint.color = Color.TRANSPARENT
+      paddingBoxPath.setFillType(Path.FillType.INVERSE_WINDING)
+    } else {
+      maskPaint.color = Color.BLACK
+    }
+
+    canvas.drawPath(paddingBoxPath, maskPaint)
+
+    // Restore the layer
+    canvas.restoreToCount(saveCount)
+  }
+
   /**
    * Resets the background styling of the view to its original state.
    *

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

@@ -372,15 +372,18 @@ public class ReactImageView(
   public override fun hasOverlappingRendering(): Boolean = false
 
   public override fun onDraw(canvas: Canvas) {
-    BackgroundStyleApplicator.clipToPaddingBox(this, canvas)
-    try {
-      super.onDraw(canvas)
-    } catch (e: RuntimeException) {
-      // Only provide updates if downloadListener is set (shouldNotify is true)
-      if (downloadListener != null) {
-        val eventDispatcher =
-            UIManagerHelper.getEventDispatcherForReactTag(context as ReactContext, id)
-        eventDispatcher?.dispatchEvent(createErrorEvent(UIManagerHelper.getSurfaceId(this), id, e))
+    BackgroundStyleApplicator.clipToPaddingBoxWithAntiAliasing(this, canvas) {
+      try {
+        super.onDraw(canvas)
+      } catch (e: RuntimeException) {
+        // Only provide updates if downloadListener is set (shouldNotify is true)
+        if (downloadListener != null) {
+          val eventDispatcher =
+              UIManagerHelper.getEventDispatcherForReactTag(context as ReactContext, id)
+          eventDispatcher?.dispatchEvent(
+              createErrorEvent(UIManagerHelper.getSurfaceId(this), id, e)
+          )
+        }
       }
     }
   }

packages/react-native/ReactAndroid/src/main/jni/react/featureflags/JReactNativeFeatureFlagsCxxInterop.cpp

@@ -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<<a0ef5d4a761067631023f6b5ec797cc6>>
+ * @generated SignedSource<<5e4e22e976ce1724191c7b7e381ea5a1>>
  */
 
 /**
@@ -123,6 +123,12 @@ class ReactNativeFeatureFlagsJavaProvider
     return method(javaProvider_);
   }
 
+  bool enableAndroidAntialiasedBorderRadiusClipping() override {
+    static const auto method =
+        getReactNativeFeatureFlagsProviderJavaClass()->getMethod<jboolean()>("enableAndroidAntialiasedBorderRadiusClipping");
+    return method(javaProvider_);
+  }
+
   bool enableAndroidLinearText() override {
     static const auto method =
         getReactNativeFeatureFlagsProviderJavaClass()->getMethod<jboolean()>("enableAndroidLinearText");
@@ -641,6 +647,11 @@ bool JReactNativeFeatureFlagsCxxInterop::enableAccumulatedUpdatesInRawPropsAndro
   return ReactNativeFeatureFlags::enableAccumulatedUpdatesInRawPropsAndroid();
 }
 
+bool JReactNativeFeatureFlagsCxxInterop::enableAndroidAntialiasedBorderRadiusClipping(
+    facebook::jni::alias_ref<JReactNativeFeatureFlagsCxxInterop> /*unused*/) {
+  return ReactNativeFeatureFlags::enableAndroidAntialiasedBorderRadiusClipping();
+}
+
 bool JReactNativeFeatureFlagsCxxInterop::enableAndroidLinearText(
     facebook::jni::alias_ref<JReactNativeFeatureFlagsCxxInterop> /*unused*/) {
   return ReactNativeFeatureFlags::enableAndroidLinearText();
@@ -1084,6 +1095,9 @@ void JReactNativeFeatureFlagsCxxInterop::registerNatives() {
       makeNativeMethod(
         "enableAccumulatedUpdatesInRawPropsAndroid",
         JReactNativeFeatureFlagsCxxInterop::enableAccumulatedUpdatesInRawPropsAndroid),
+      makeNativeMethod(
+        "enableAndroidAntialiasedBorderRadiusClipping",
+        JReactNativeFeatureFlagsCxxInterop::enableAndroidAntialiasedBorderRadiusClipping),
       makeNativeMethod(
         "enableAndroidLinearText",
         JReactNativeFeatureFlagsCxxInterop::enableAndroidLinearText),