fix(android): preserve border-radius across transparent → opaque backgroundColor transition

Summary:
On Android, a View whose backgroundColor starts as transparent and
later transitions to an opaque color loses its border-radius clipping
and renders as a rectangle. Reported in facebook#52415; iOS is unaffected.

Root cause: `setBorderRadius` only eagerly creates an inner
`BackgroundDrawable` for `ImageView`. For a regular `View` with a
transparent backgroundColor, the composite background drawable ends
up with no inner `BackgroundDrawable` at first. When the color later
becomes opaque, `setBackgroundColor` -> `ensureBackgroundDrawable`
constructs a fresh `BackgroundDrawable` and swaps `view.background`
with a new `CompositeBackgroundDrawable` via `withNewBackground`.
The freshly constructed drawable starts with 0x0 bounds, and on the
first draw the computed path is a zero-radius rectangle.

Fix: always eagerly create the inner `BackgroundDrawable` inside
`setBorderRadius`, not only for `ImageView`. This way subsequent
`setBackgroundColor` calls mutate the existing drawable in place,
avoiding the `view.background` replacement path where bounds/path are
not yet primed.

Changelog:
[ANDROID] [FIXED] - View with borderRadius renders as rectangle after transparent → opaque backgroundColor transition

Test Plan:
Added an RNTester example under Border > "Border radius with transparent → opaque background" that starts with a transparent 50x50 box with borderRadius: 25 and toggles to red on tap. Without this change the opaque state renders as a square on Android; with the fix it renders as a circle. iOS rendering is unchanged.

Author: janicduplessis

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

@@ -211,9 +211,14 @@ public object BackgroundStyleApplicator {
         compositeBackgroundDrawable.borderRadius ?: BorderRadiusStyle()
     compositeBackgroundDrawable.borderRadius?.set(corner, radius)
 
-    if (view is ImageView) {
-      ensureBackgroundDrawable(view)
-    }
+    // Eagerly create the BackgroundDrawable so subsequent backgroundColor
+    // changes can mutate the existing drawable in place instead of
+    // replacing view.background with a freshly-constructed composite whose
+    // inner BackgroundDrawable has 0x0 bounds on first draw. Without this,
+    // a backgroundColor transition from transparent to opaque leaves the
+    // view rendering as a rectangle even though borderRadius is set.
+    // See https://github.com/facebook/react-native/issues/52415.
+    ensureBackgroundDrawable(view)
     compositeBackgroundDrawable.background?.borderRadius = compositeBackgroundDrawable.borderRadius
     compositeBackgroundDrawable.backgroundImage?.borderRadius =
         compositeBackgroundDrawable.borderRadius

packages/rn-tester/js/examples/Border/BorderExample.js

@@ -14,12 +14,15 @@ import type {RNTesterModule} from '../../types/RNTesterTypes';
 
 import hotdog from '../../assets/hotdog.jpg';
 import * as React from 'react';
+import {useState} from 'react';
 import {
   DynamicColorIOS,
   Image,
   Platform,
   PlatformColor,
+  Pressable,
   StyleSheet,
+  Text,
   View,
 } from 'react-native';
 
@@ -622,5 +625,42 @@ export default {
         );
       },
     },
+    {
+      title: 'Border radius with transparent → opaque background',
+      name: 'border-radius-transparent-to-opaque',
+      description:
+        'Tap the box to toggle its background between transparent and opaque. ' +
+        'Both states should render as a circle. Regression guard for #52415.',
+      render: function (): React.Node {
+        return <TransparentToOpaqueBorderRadiusExample />;
+      },
+    },
   ],
 } as RNTesterModule;
+
+function TransparentToOpaqueBorderRadiusExample(): React.Node {
+  const [opaque, setOpaque] = useState(false);
+  return (
+    <Pressable
+      onPress={() => setOpaque(prev => !prev)}
+      testID="border-test-transparent-to-opaque">
+      <View style={{padding: 16, backgroundColor: 'lightgray'}}>
+        <View
+          style={{
+            width: 50,
+            height: 50,
+            borderRadius: 25,
+            backgroundColor: opaque ? 'red' : 'transparent',
+          }}
+        />
+        <Text style={{marginTop: 12}}>
+          Tap to toggle. backgroundColor is currently{' '}
+          <Text style={{fontWeight: 'bold'}}>
+            {opaque ? 'red' : 'transparent'}
+          </Text>
+          . Both states should render the box as a circle.
+        </Text>
+      </View>
+    </Pressable>
+  );
+}