Use a round rect outline for Views with four equal corners on Android (#59376)

Summary:
On Android, a View's background is a `CompositeBackgroundDrawable`, and the View's outline (used for `elevation` shadows) comes from its `getOutline`.

**Current behavior.** For a View with rounded corners, `getOutline` allocates a new `Path`, adds a rounded rect with eight radii, and copies the path into the outline with `Outline.setPath`, every time Android asks for the outline. Android rebuilds the outline whenever the View's size changes and whenever its background drawable invalidates itself, for example when the background color changes or the drawable's bounds are updated during draw, which can happen two or three times for one change. Most rounded Views use the same radius for every corner, and for that shape Android has `Outline.setRoundRect`, which needs no path. On a Samsung Galaxy A14, a path outline costs about 15–19 µs per rebuild, and rebuilding it is 72% of the time to change a rounded View's background color.

**With this change.** When all four corners resolve to the same circular radius (the eight values, including border insets, are equal), `getOutline` uses `Outline.setRoundRect(bounds, radius)`. A radius larger than half the shorter side is reduced to half of it, which is what `Path.addRoundRect` does to such radii (Skia scales all radii by the same factor so that they fit). Corners that differ, elliptical corners, and insets that differ by side still build the path as before.

Two differences that don't change rendering in React Native:
- On Android 12 and lower, a round rect outline can clip and a path outline can't. React Native doesn't set `clipToOutline`, so this only matters for a View where an app sets it, which then clips as requested.
- A reduced radius is computed directly instead of through Skia's scale factor, so it can differ in the last bits of a float.

## Changelog:

[ANDROID] [CHANGED] - Views with four equal rounded corners get their outline without building a path

Pull Request resolved: #59376

Test Plan:
- **Unit tests.** New `CompositeBackgroundDrawableTest` (Robolectric): four equal corners give a round rect outline with the radius in px; a radius larger than half the shorter side is reduced to it; differing corners still give a path outline; no rounded corners give a rect. `./gradlew :packages:react-native:ReactAndroid:testDebugUnitTest --tests "com.facebook.react.uimanager.drawable.CompositeBackgroundDrawableTest"`: 4 passed. On the current code, the first two fail and the other two pass.
- The repo's pinned `ktfmt` check passes on both files.
- **Device:** Samsung Galaxy A14 (SM-A145R, Android 15), RNTester built with Gradle in Release (`assembleRelease`, arm64-v8a) and compiled with `cmd package compile -m speed`. The scenarios are local Playground screens that are not part of this PR.
- **A/B setup:** a single binary with a local switch (an intent extra read in `getOutline`, not part of this PR) that either uses this change or builds the path for every outline as before. Launches alternate between the arms (A B B A A B); each reads the UI thread's and RenderThread's CPU time from `/proc/<pid>/task/*/stat` over the same 20 s window and counts the time spent in `getOutline`.

| 300 rounded cards (`borderRadius: 12`, border, background, two texts), one kind of change every 100 ms, 3 launches per arm | path (before) | this PR | change |
|---|--:|--:|--:|
| time per `getOutline`, cards move (a spacer above them changes height) | 14.6–17.6 µs | 3.6–3.9 µs | −77% |
| time per `getOutline`, cards change background color | 18.5–19.4 µs | ~4.1 µs | −78% |
| UI thread CPU, cards move | 6,870 ms | 5,413 ms | −21% |
| UI thread CPU, cards change background color | 5,703 ms | 4,653 ms | −18% |
| UI thread CPU, cards with `elevation: 3` move | 5,723 ms | 4,870 ms | −15% |

  The RenderThread's CPU time didn't change measurably, including for the cards with shadows.

  Moving cards changes their size too: positions are rounded to whole pixels, so a card's height changes by 1 px when its edges round differently, and each size change rebuilds the outline. Changing a background color doesn't change the shape, but Android rebuilds the outline when the drawable invalidates itself.
- **Scrolling a feed** (a 1,000-row list with rounded cards, avatars and photos, 4 launches per arm): time in `getOutline` went from about 87 to 26 ms per 4,000 calls (−70%). Outlines are about 0.4% of the UI thread there, so its CPU time didn't change measurably.
- **Rendering:** screens captured in both arms and compared pixel by pixel: a local screen of 8 Views with `elevation: 8` (equal corners, a circle, a pill whose radius is larger than half its height, a percentage radius, differing corners, a border, `overflow: hidden` with a child that overflows, square corners), RNTester's View examples and RNTester's Border examples. Every capture is identical between the arms, and between two captures of the same arm.
- **Not run:** other devices, and Android versions other than 15.

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Reviewed By: christophpurrer

Differential Revision: D127120615

Pulled By: javache

fbshipit-source-id: fb75f075af5628e576e6ce495056de06eeae03e2

Author: hryhoriiK97

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

@@ -187,8 +187,6 @@ internal class CompositeBackgroundDrawable(
   elevation shadow. */
   override fun getOutline(outline: Outline) {
     if (borderRadius?.hasRoundedBorders() == true) {
-      val pathForOutline = Path()
-
       val computedBorderRadius =
           borderRadius?.resolve(
               layoutDirection,
@@ -199,9 +197,8 @@ internal class CompositeBackgroundDrawable(
 
       val computedBorderInsets = borderInsets?.resolve(layoutDirection, context)
 
-      computedBorderRadius?.let {
-        pathForOutline.addRoundRect(
-            RectF(bounds),
+      val radii =
+          computedBorderRadius?.let {
             floatArrayOf(
                 (it.topLeft.horizontal + (computedBorderInsets?.left ?: 0f)).dpToPx(),
                 (it.topLeft.vertical + (computedBorderInsets?.top ?: 0f)).dpToPx(),
@@ -211,11 +208,20 @@ internal class CompositeBackgroundDrawable(
                 (it.bottomRight.vertical + (computedBorderInsets?.bottom ?: 0f)).dpToPx(),
                 (it.bottomLeft.horizontal + (computedBorderInsets?.left ?: 0f)).dpToPx(),
                 (it.bottomLeft.vertical + (computedBorderInsets?.bottom ?: 0f)).dpToPx(),
-            ),
-            Path.Direction.CW,
-        )
+            )
+          }
+
+      // Four equal circular corners describe the same shape as the rounded path below, without
+      // building a path. Like the path, a radius larger than half the shorter side is reduced to
+      // it.
+      if (radii != null && radii.all { it == radii[0] }) {
+        outline.setRoundRect(bounds, minOf(radii[0], minOf(bounds.width(), bounds.height()) / 2f))
+        return
       }
 
+      val pathForOutline = Path()
+      radii?.let { pathForOutline.addRoundRect(RectF(bounds), it, Path.Direction.CW) }
+
       if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.R) {
         outline.setPath(pathForOutline)
       } else {

packages/react-native/ReactAndroid/src/test/java/com/facebook/react/uimanager/drawable/CompositeBackgroundDrawableTest.kt

@@ -0,0 +1,100 @@
+/*
+ * 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.content.Context
+import android.graphics.Outline
+import android.graphics.Rect
+import android.util.DisplayMetrics
+import com.facebook.react.internal.featureflags.ReactNativeFeatureFlags
+import com.facebook.react.internal.featureflags.ReactNativeFeatureFlagsForTests
+import com.facebook.react.uimanager.DisplayMetricsHolder
+import com.facebook.react.uimanager.LengthPercentage
+import com.facebook.react.uimanager.LengthPercentageType
+import com.facebook.react.uimanager.style.BorderRadiusProp
+import com.facebook.react.uimanager.style.BorderRadiusStyle
+import org.assertj.core.api.Assertions.assertThat
+import org.junit.After
+import org.junit.Before
+import org.junit.Test
+import org.junit.runner.RunWith
+import org.robolectric.RobolectricTestRunner
+import org.robolectric.RuntimeEnvironment
+
+/** Tests for the outline of [CompositeBackgroundDrawable] */
+@RunWith(RobolectricTestRunner::class)
+class CompositeBackgroundDrawableTest {
+
+  private val context: Context = RuntimeEnvironment.getApplication()
+
+  @Before
+  fun setUp() {
+    ReactNativeFeatureFlagsForTests.setUp()
+    DisplayMetricsHolder.setScreenDisplayMetrics(DisplayMetrics().apply { density = 2f })
+  }
+
+  @After
+  fun tearDown() {
+    DisplayMetricsHolder.setScreenDisplayMetrics(null)
+    ReactNativeFeatureFlags.dangerouslyReset()
+  }
+
+  @Test
+  fun equalCornersGiveARoundRect() {
+    val outline =
+        outlineOf(BorderRadiusStyle(listOf(BorderRadiusProp.BORDER_RADIUS to points(10f))))
+
+    val rect = Rect()
+    assertThat(outline.getRect(rect)).isTrue()
+    assertThat(rect).isEqualTo(Rect(0, 0, 200, 100))
+    assertThat(outline.radius).isEqualTo(20f)
+  }
+
+  @Test
+  fun radiusLargerThanHalfTheShorterSideIsReducedToIt() {
+    val outline =
+        outlineOf(BorderRadiusStyle(listOf(BorderRadiusProp.BORDER_RADIUS to points(80f))))
+
+    assertThat(outline.getRect(Rect())).isTrue()
+    assertThat(outline.radius).isEqualTo(50f)
+  }
+
+  @Test
+  fun differentCornersGiveAPath() {
+    val outline =
+        outlineOf(
+            BorderRadiusStyle(
+                listOf(
+                    BorderRadiusProp.BORDER_RADIUS to points(10f),
+                    BorderRadiusProp.BORDER_TOP_LEFT_RADIUS to points(4f),
+                )
+            )
+        )
+
+    assertThat(outline.isEmpty).isFalse()
+    assertThat(outline.getRect(Rect())).isFalse()
+  }
+
+  @Test
+  fun noRoundedCornersGiveARect() {
+    val outline = outlineOf(null)
+
+    val rect = Rect()
+    assertThat(outline.getRect(rect)).isTrue()
+    assertThat(rect).isEqualTo(Rect(0, 0, 200, 100))
+    assertThat(outline.radius).isEqualTo(0f)
+  }
+
+  private fun points(value: Float) = LengthPercentage(value, LengthPercentageType.POINT)
+
+  private fun outlineOf(borderRadius: BorderRadiusStyle?): Outline {
+    val drawable = CompositeBackgroundDrawable(context = context, borderRadius = borderRadius)
+    drawable.setBounds(0, 0, 200, 100)
+    return Outline().also { drawable.getOutline(it) }
+  }
+}