feat(style): remove experimental_ prefix from backgroundImage (#57165)

Summary:
Promote `backgroundImage` from `experimental_backgroundImage` to a stable style prop. It has been available in experimental mode for some time and is already used in popular open-source projects such as NativeWind, Unstyles, Tamagui, React Strict DOM, and others, with no reported issues so far.

`backgroundImage` currently supports `linear-gradient` and `radial-gradient`. `url()` support already has a PR up ([PRs](#54995)), it should not be a blocker imo though as gradient is also a big unlock.

## Changelog:

[GENERAL][CHANGED] - Remove `experimental_` prefix from `backgroundImage`

<!-- Help reviewers and the release process by writing your own changelog entry.

Pick one each for the category and type tags:

[ANDROID|GENERAL|IOS|INTERNAL] [BREAKING|ADDED|CHANGED|DEPRECATED|REMOVED|FIXED|SECURITY] - Message

For more details, see:
https://reactnative.dev/contributing/changelogs-in-pull-requests

Pull Request resolved: #57165

Test Plan: Tested background image screen on RNTester.

Reviewed By: javache

Differential Revision: D108301578

Pulled By: jorge-cab

fbshipit-source-id: 558d1d8943b3cd56557584eaf5e4bda112154298

Author: intergalacticspacehighway

packages/react-native/Libraries/Components/View/ReactNativeStyleAttributes.js

@@ -194,6 +194,7 @@ const ReactNativeStyleAttributes: {[string]: AnyAttributeType, ...} = {
   /**
    * BackgroundImage
    */
+  backgroundImage: backgroundImageAttribute,
   experimental_backgroundImage: backgroundImageAttribute,
 
   /**

packages/react-native/Libraries/Components/View/__tests__/View-itest.js

@@ -335,13 +335,12 @@ describe('<View>', () => {
               <>
                 <View
                   style={{
-                    experimental_backgroundImage:
-                      'radial-gradient(#e66465, #9198e5)',
+                    backgroundImage: 'radial-gradient(#e66465, #9198e5)',
                   }}
                 />
                 <View
                   style={{
-                    experimental_backgroundImage: [
+                    backgroundImage: [
                       {
                         type: 'radial-gradient',
                         shape: 'ellipse',

packages/react-native/Libraries/NativeComponent/BaseViewConfig.android.js

@@ -211,6 +211,7 @@ const validAttributesForNonEventProps = {
   backgroundColor: colorAttribute,
   transform: true,
   transformOrigin: true,
+  backgroundImage: backgroundImageAttribute,
   experimental_backgroundImage: backgroundImageAttribute,
   experimental_backgroundSize: backgroundSizeAttribute,
   experimental_backgroundPosition: backgroundPositionAttribute,

packages/react-native/Libraries/StyleSheet/StyleSheetTypes.d.ts

@@ -517,6 +517,7 @@ export interface ViewStyle extends FlexStyle, ShadowStyleIOS, TransformsStyle {
   filter?: ReadonlyArray<FilterFunction> | string | undefined;
 
   mixBlendMode?: BlendMode | undefined;
+  backgroundImage?: ReadonlyArray<BackgroundImageValue> | string | undefined;
   experimental_backgroundImage?:
     | ReadonlyArray<BackgroundImageValue>
     | string

packages/react-native/Libraries/StyleSheet/StyleSheetTypes.js

@@ -887,6 +887,7 @@ export type ____ViewStyle_InternalBase = Readonly<{
   boxShadow?: ReadonlyArray<BoxShadowValue> | string,
   filter?: ReadonlyArray<FilterFunction> | string,
   mixBlendMode?: ____BlendMode_Internal,
+  backgroundImage?: ReadonlyArray<BackgroundImageValue> | string,
   experimental_backgroundImage?: ReadonlyArray<BackgroundImageValue> | string,
   experimental_backgroundSize?: ReadonlyArray<BackgroundSizeValue> | string,
   experimental_backgroundPosition?:

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

@@ -4509,6 +4509,7 @@ public final class com/facebook/react/uimanager/ViewProps {
 	public static final field ELLIPSIZE_MODE Ljava/lang/String;
 	public static final field ENABLED Ljava/lang/String;
 	public static final field END Ljava/lang/String;
+	public static final field EXPERIMENTAL_BACKGROUND_IMAGE Ljava/lang/String;
 	public static final field FILTER Ljava/lang/String;
 	public static final field FLEX Ljava/lang/String;
 	public static final field FLEX_BASIS Ljava/lang/String;
@@ -6486,6 +6487,7 @@ public class com/facebook/react/views/view/ReactViewManager : com/facebook/react
 	public fun setBorderWidth (Lcom/facebook/react/views/view/ReactViewGroup;IF)V
 	public fun setCollapsable (Lcom/facebook/react/views/view/ReactViewGroup;Z)V
 	public fun setCollapsableChildren (Lcom/facebook/react/views/view/ReactViewGroup;Z)V
+	public fun setExperimentalBackgroundImage (Lcom/facebook/react/views/view/ReactViewGroup;Lcom/facebook/react/bridge/ReadableArray;)V
 	public fun setFocusable (Lcom/facebook/react/views/view/ReactViewGroup;Z)V
 	public fun setHitSlop (Lcom/facebook/react/views/view/ReactViewGroup;Lcom/facebook/react/bridge/Dynamic;)V
 	public fun setNativeBackground (Lcom/facebook/react/views/view/ReactViewGroup;Lcom/facebook/react/bridge/ReadableMap;)V

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

@@ -72,7 +72,9 @@ public object ViewProps {
   // Props that affect more than just layout
   public const val ENABLED: String = "enabled"
   public const val BACKGROUND_COLOR: String = "backgroundColor"
-  public const val BACKGROUND_IMAGE: String = "experimental_backgroundImage"
+  public const val BACKGROUND_IMAGE: String = "backgroundImage"
+  // Backwards-compatible alias for the original experimental_ prefixed prop name.
+  public const val EXPERIMENTAL_BACKGROUND_IMAGE: String = "experimental_backgroundImage"
   public const val BACKGROUND_SIZE: String = "experimental_backgroundSize"
   public const val BACKGROUND_POSITION: String = "experimental_backgroundPosition"
   public const val BACKGROUND_REPEAT: String = "experimental_backgroundRepeat"

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

@@ -150,6 +150,14 @@ public open class ReactViewManager : ReactClippingViewManager<ReactViewGroup>()
     }
   }
 
+  @ReactProp(name = ViewProps.EXPERIMENTAL_BACKGROUND_IMAGE, customType = "BackgroundImage")
+  public open fun setExperimentalBackgroundImage(
+      view: ReactViewGroup,
+      backgroundImage: ReadableArray?,
+  ) {
+    setBackgroundImage(view, backgroundImage)
+  }
+
   @ReactProp(name = ViewProps.BACKGROUND_SIZE, customType = "BackgroundSize")
   public open fun setBackgroundSize(view: ReactViewGroup, backgroundSize: ReadableArray?) {
     if (backgroundSize != null && backgroundSize.size() > 0) {

packages/react-native/ReactCommon/react/renderer/components/view/BaseViewProps.cpp

@@ -223,8 +223,13 @@ BaseViewProps::BaseViewProps(
               : convertRawProp(
                     context,
                     rawProps,
-                    "experimental_backgroundImage",
-                    sourceProps.backgroundImage,
+                    "backgroundImage",
+                    convertRawProp(
+                        context,
+                        rawProps,
+                        "experimental_backgroundImage",
+                        sourceProps.backgroundImage,
+                        {}),
                     {})),
       backgroundSize(
           ReactNativeFeatureFlags::enableCppPropsIteratorSetter()
@@ -403,6 +408,7 @@ void BaseViewProps::setProp(
   switch (hash) {
     RAW_SET_PROP_SWITCH_CASE_BASIC(opacity);
     RAW_SET_PROP_SWITCH_CASE_BASIC(backgroundColor);
+    RAW_SET_PROP_SWITCH_CASE_BASIC(backgroundImage);
     RAW_SET_PROP_SWITCH_CASE(backgroundImage, "experimental_backgroundImage");
     RAW_SET_PROP_SWITCH_CASE(backgroundSize, "experimental_backgroundSize");
     RAW_SET_PROP_SWITCH_CASE(

packages/react-native/ReactCommon/react/renderer/components/view/platform/android/react/renderer/components/view/HostPlatformViewProps.cpp

@@ -625,7 +625,7 @@ folly::dynamic HostPlatformViewProps::getDiffProps(
   }
 
   if (backgroundImage != oldProps->backgroundImage) {
-    result["experimental_backgroundImage"] = toDynamic(backgroundImage);
+    result["backgroundImage"] = toDynamic(backgroundImage);
   }
 
   if (mixBlendMode != oldProps->mixBlendMode) {