rename background to experimental_backgroundImage

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

@@ -11,7 +11,7 @@
 import type {AnyAttributeType} from '../../Renderer/shims/ReactNativeTypes';
 
 import processAspectRatio from '../../StyleSheet/processAspectRatio';
-import processBackground from '../../StyleSheet/processBackground';
+import processBackgroundImage from '../../StyleSheet/processBackgroundImage';
 import processColor from '../../StyleSheet/processColor';
 import processFilter from '../../StyleSheet/processFilter';
 import processFontVariant from '../../StyleSheet/processFontVariant';
@@ -129,7 +129,7 @@ const ReactNativeStyleAttributes: {[string]: AnyAttributeType, ...} = {
   /**
    * Linear Gradient
    */
-  background: {process: processBackground},
+  experimental_backgroundImage: {process: processBackgroundImage},
 
   /**
    * View

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

@@ -164,7 +164,9 @@ const directEventTypes = {
 const validAttributesForNonEventProps = {
   // @ReactProps from BaseViewManager
   backgroundColor: {process: require('../StyleSheet/processColor').default},
-  background: {process: require('../StyleSheet/processBackground').default},
+  experimental_backgroundImage: {
+    process: require('../StyleSheet/processBackgroundImage').default,
+  },
   transform: true,
   transformOrigin: true,
   experimental_filter: {

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

@@ -23,7 +23,7 @@ export type FilterPrimitive =
   | {sepia: number | string}
   | {'drop-shadow': DropShadowPrimitive | string};
 
-export type BackgroundPrimitive = {
+export type BackgroundImagePrimitive = {
   type: 'linearGradient';
   start: {x: number; y: number};
   end: {x: number; y: number};
@@ -262,7 +262,6 @@ export interface TransformsStyle {
 export interface ViewStyle extends FlexStyle, ShadowStyleIOS, TransformsStyle {
   backfaceVisibility?: 'visible' | 'hidden' | undefined;
   backgroundColor?: ColorValue | undefined;
-  background?: Array<BackgroundPrimitive> | string | undefined;
   borderBlockColor?: ColorValue | undefined;
   borderBlockEndColor?: ColorValue | undefined;
   borderBlockStartColor?: ColorValue | undefined;

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

@@ -11,7 +11,7 @@
 'use strict';
 
 import type AnimatedNode from '../Animated/nodes/AnimatedNode';
-import type {BackgroundPrimitive} from '../StyleSheet/processBackground';
+import type {BackgroundImagePrimitive} from '../StyleSheet/processBackgroundImage';
 import type {
   ____DangerouslyImpreciseStyle_InternalOverrides,
   ____ImageStyle_InternalOverrides,
@@ -731,8 +731,11 @@ export type ____MixBlendMode_Internal =
   | 'saturation'
   | 'color'
   | 'luminosity';
+
 type ____BackgroundStyle_Internal = $ReadOnly<{
-  background?: $ReadOnlyArray<BackgroundPrimitive> | string,
+  experimental_backgroundImage?:
+    | $ReadOnlyArray<BackgroundImagePrimitive>
+    | string,
 }>;
 
 export type ____ViewStyle_InternalCore = $ReadOnly<{

packages/react-native/Libraries/StyleSheet/__tests__/processBackground-test.js → packages/react-native/Libraries/StyleSheet/__tests__/processBackgroundImage-test.js

@@ -10,14 +10,14 @@
 
 'use strict';
 
-import processBackground from '../processBackground';
+import processBackgroundImage from '../processBackgroundImage';
 
 const processColor = require('../processColor').default;
 
-describe('processBackground', () => {
+describe('processBackgroundImage', () => {
   it('should process a simple linear gradient string', () => {
     const input = 'linear-gradient(to right, red, blue)';
-    const result = processBackground(input);
+    const result = processBackgroundImage(input);
     expect(result).toEqual([
       {
         type: 'linearGradient',
@@ -33,7 +33,7 @@ describe('processBackground', () => {
 
   it('should process a linear gradient with angle', () => {
     const input = 'linear-gradient(45deg, red, blue)';
-    const result = processBackground(input);
+    const result = processBackgroundImage(input);
     expect(result[0].type).toBe('linearGradient');
     expect(result[0].start.x).toBeCloseTo(0.146447, 5);
     expect(result[0].start.y).toBeCloseTo(0.853553, 5);
@@ -48,7 +48,7 @@ describe('processBackground', () => {
   it('should process multiple linear gradients', () => {
     const input =
       'linear-gradient(to right, red, blue), linear-gradient(to bottom, green, yellow)';
-    const result = processBackground(input);
+    const result = processBackgroundImage(input);
     expect(result).toHaveLength(2);
     expect(result[0].start).toEqual({x: 0, y: 0.5});
     expect(result[0].end).toEqual({x: 1, y: 0.5});
@@ -58,7 +58,7 @@ describe('processBackground', () => {
 
   it('should process a linear gradient with multiple color stops', () => {
     const input = 'linear-gradient(to right, red 0%, green 50%, blue 100%)';
-    const result = processBackground(input);
+    const result = processBackgroundImage(input);
     expect(result[0].colorStops).toEqual([
       {color: processColor('red'), position: 0},
       {color: processColor('green'), position: 0.5},
@@ -69,7 +69,7 @@ describe('processBackground', () => {
   it('should process a linear gradient with rgba colors', () => {
     const input =
       'linear-gradient(to right, rgba(255,0,0,0.5), rgba(0,0,255,0.8))';
-    const result = processBackground(input);
+    const result = processBackgroundImage(input);
     expect(result[0].colorStops).toEqual([
       {color: processColor('rgba(255,0,0,0.5)'), position: 0},
       {color: processColor('rgba(0,0,255,0.8)'), position: 1},
@@ -78,7 +78,7 @@ describe('processBackground', () => {
 
   it('should process a linear gradient with hsl colors', () => {
     const input = `linear-gradient(hsl(330, 100%, 45.1%), hsl(0, 100%, 50%))`;
-    const result = processBackground(input);
+    const result = processBackgroundImage(input);
     expect(result[0].colorStops).toEqual([
       {color: processColor('hsl(330, 100%, 45.1%)'), position: 0},
       {color: processColor('hsl(0, 100%, 50%)'), position: 1},
@@ -87,7 +87,7 @@ describe('processBackground', () => {
 
   it('should process a linear gradient without direction', () => {
     const input = 'linear-gradient(#e66465, #9198e5)';
-    const result = processBackground(input);
+    const result = processBackgroundImage(input);
     expect(result[0].colorStops).toEqual([
       {color: processColor('#e66465'), position: 0},
       {color: processColor('#9198e5'), position: 1},
@@ -98,7 +98,7 @@ describe('processBackground', () => {
     const input = `linear-gradient(to right , 
     rgba(255,0,0,0.5), rgba(0,0,255,0.8)),
               linear-gradient(to bottom , rgba(255,0,0,0.9)  , rgba(0,0,255,0.2)  )`;
-    const result = processBackground(input);
+    const result = processBackgroundImage(input);
     expect(result).toHaveLength(2);
     expect(result[0].start).toEqual({x: 0, y: 0.5});
     expect(result[0].end).toEqual({x: 1, y: 0.5});
@@ -126,7 +126,7 @@ describe('processBackground', () => {
         ],
       },
     ];
-    const result = processBackground(input);
+    const result = processBackgroundImage(input);
     expect(result).toEqual([
       {
         type: 'linearGradient',

packages/react-native/Libraries/StyleSheet/processBackground.js → packages/react-native/Libraries/StyleSheet/processBackgroundImage.js

@@ -26,7 +26,7 @@ const TO_BOTTOM_START_END_POINTS = {
   end: {x: 0.5, y: 1},
 };
 
-export type BackgroundPrimitive = {
+export type BackgroundImagePrimitive = {
   type: 'linearGradient',
   start: {x: number, y: number},
   end: {x: number, y: number},
@@ -36,14 +36,14 @@ export type BackgroundPrimitive = {
   }>,
 };
 
-export default function processBackground(
-  background: $ReadOnlyArray<BackgroundPrimitive> | string,
-): $ReadOnlyArray<BackgroundPrimitive> {
-  if (typeof background === 'string') {
-    const parsedBackground = parseCSSLinearGradient(background);
-    return parsedBackground;
-  } else if (Array.isArray(background)) {
-    const parsedBackground = background.map(bg => {
+export default function processBackgroundImage(
+  backgroundImage: $ReadOnlyArray<BackgroundImagePrimitive> | string,
+): $ReadOnlyArray<BackgroundImagePrimitive> {
+  if (typeof backgroundImage === 'string') {
+    const parsedBackgroundImage = parseCSSLinearGradient(backgroundImage);
+    return parsedBackgroundImage;
+  } else if (Array.isArray(backgroundImage)) {
+    const parsedBackgroundImage = backgroundImage.map(bg => {
       return {
         type: bg.type,
         start: bg.start,
@@ -57,15 +57,15 @@ export default function processBackground(
         }),
       };
     });
-    return parsedBackground;
+    return parsedBackgroundImage;
   }
 
   return [];
 }
 
 function parseCSSLinearGradient(
   cssString: string,
-): $ReadOnlyArray<BackgroundPrimitive> {
+): $ReadOnlyArray<BackgroundImagePrimitive> {
   const gradients = [];
   let match;
 

packages/react-native/Libraries/__tests__/__snapshots__/public-api-test.js.snap

@@ -7719,7 +7719,9 @@ export type ____MixBlendMode_Internal =
   | \\"color\\"
   | \\"luminosity\\";
 type ____BackgroundStyle_Internal = $ReadOnly<{
-  background?: $ReadOnlyArray<BackgroundPrimitive> | string,
+  experimental_backgroundImage?:
+    | $ReadOnlyArray<BackgroundImagePrimitive>
+    | string,
 }>;
 export type ____ViewStyle_InternalCore = $ReadOnly<{
   ...$Exact<____LayoutStyle_Internal>,
@@ -8007,8 +8009,8 @@ declare module.exports: processAspectRatio;
 "
 `;
 
-exports[`public API should not change unintentionally Libraries/StyleSheet/processBackground.js 1`] = `
-"export type BackgroundPrimitive = {
+exports[`public API should not change unintentionally Libraries/StyleSheet/processBackgroundImage.js 1`] = `
+"export type BackgroundImagePrimitive = {
   type: \\"linearGradient\\",
   start: { x: number, y: number },
   end: { x: number, y: number },
@@ -8017,9 +8019,9 @@ exports[`public API should not change unintentionally Libraries/StyleSheet/proce
     position: number,
   }>,
 };
-declare export default function processBackground(
-  background: $ReadOnlyArray<BackgroundPrimitive> | string
-): $ReadOnlyArray<BackgroundPrimitive>;
+declare export default function processBackgroundImage(
+  backgroundImage: $ReadOnlyArray<BackgroundImagePrimitive> | string
+): $ReadOnlyArray<BackgroundImagePrimitive>;
 "
 `;
 

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

@@ -207,9 +207,9 @@ public void setTransform(@NonNull T view, @Nullable ReadableArray matrix) {
   }
 
   @Override
-  @ReactProp(name = ViewProps.BACKGROUND)
-  public void setBackground(@NonNull T view, @Nullable ReadableArray gradients) {
-    logUnsupportedPropertyWarning(ViewProps.BACKGROUND);
+  @ReactProp(name = ViewProps.BACKGROUND_IMAGE)
+  public void setBackgroundImage(@NonNull T view, @Nullable ReadableArray backgroundImage) {
+    logUnsupportedPropertyWarning(ViewProps.BACKGROUND_IMAGE);
   }
 
   @Override

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

@@ -121,8 +121,8 @@ public void setProperty(T view, String propName, @Nullable Object value) {
       case ViewProps.TRANSFORM:
         mViewManager.setTransform(view, (ReadableArray) value);
         break;
-      case ViewProps.BACKGROUND:
-        mViewManager.setBackground(view, (ReadableArray) value);
+      case ViewProps.BACKGROUND_IMAGE:
+        mViewManager.setBackgroundImage(view, (ReadableArray) value);
         break;
       case ViewProps.TRANSFORM_ORIGIN:
         mViewManager.setTransformOrigin(view, (ReadableArray) value);

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

@@ -76,7 +76,7 @@ public interface BaseViewManagerInterface<T extends View> {
 
   void setTransform(T view, @Nullable ReadableArray matrix);
 
-  void setBackground(T view, @Nullable ReadableArray matrix);
+  void setBackgroundImage(T view, @Nullable ReadableArray backgroundImage);
 
   void setTransformOrigin(T view, @Nullable ReadableArray transformOrigin);
 

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

@@ -74,7 +74,7 @@ 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: String = "background"
+  public const val BACKGROUND_IMAGE: String = "experimental_backgroundImage"
   public const val FOREGROUND_COLOR: String = "foregroundColor"
   public const val COLOR: String = "color"
   public const val FONT_SIZE: String = "fontSize"

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

@@ -89,12 +89,12 @@ public void setTVPreferredFocus(ReactViewGroup view, boolean hasTVPreferredFocus
     }
   }
 
-  @ReactProp(name = ViewProps.BACKGROUND)
-  public void setBackground(ReactViewGroup view, @Nullable ReadableArray background) {
-    if (background != null && background.size() > 0) {
-      CSSGradient[] cssGradients = new CSSGradient[background.size()];
-      for (int i = 0; i < background.size(); i++) {
-        ReadableMap gradientMap = background.getMap(i);
+  @ReactProp(name = ViewProps.BACKGROUND_IMAGE)
+  public void setBackgroundImage(ReactViewGroup view, @Nullable ReadableArray backgroundImage) {
+    if (backgroundImage != null && backgroundImage.size() > 0) {
+      CSSGradient[] cssGradients = new CSSGradient[backgroundImage.size()];
+      for (int i = 0; i < backgroundImage.size(); i++) {
+        ReadableMap gradientMap = backgroundImage.getMap(i);
         cssGradients[i] = new CSSGradient(gradientMap);
       }
       view.setGradients(cssGradients);

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

@@ -166,13 +166,13 @@ BaseViewProps::BaseViewProps(
                                                        "experimental_filter",
                                                        sourceProps.filter,
                                                        {})),
-      background(
-          CoreFeatures::enablePropIteratorSetter ? sourceProps.background
+      backgroundImage(
+          CoreFeatures::enablePropIteratorSetter ? sourceProps.backgroundImage
                                            : convertRawProp(
                                                  context,
                                                  rawProps,
-                                                 "background",
-                                                 sourceProps.background,
+                                                 "experimental_backgroundImage",
+                                                 sourceProps.backgroundImage,
                                                  {})),
       mixBlendMode(
           CoreFeatures::enablePropIteratorSetter

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

@@ -17,7 +17,7 @@
 #include <react/renderer/graphics/Color.h>
 #include <react/renderer/graphics/Filter.h>
 #include <react/renderer/graphics/Transform.h>
-#include <react/renderer/graphics/Background.h>
+#include <react/renderer/graphics/BackgroundImage.h>
 
 #include <optional>
 
@@ -64,7 +64,7 @@ class BaseViewProps : public YogaStylableProps, public AccessibilityProps {
   std::vector<FilterPrimitive> filter{};
 
   // Linear gradient
-  std::vector<BackgroundPrimitive> background{};
+  std::vector<BackgroundImagePrimitive> backgroundImage{};
 
   // MixBlendMode
   std::string mixBlendMode;

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

@@ -62,7 +62,7 @@ void ViewShadowNode::initialize() noexcept {
       viewProps.importantForAccessibility != ImportantForAccessibility::Auto ||
       viewProps.removeClippedSubviews || viewProps.cursor != Cursor::Auto ||
       !viewProps.filter.empty() || !viewProps.mixBlendMode.empty() ||
-      !viewProps.background.empty() ||
+      !viewProps.backgroundImage.empty() ||
       HostPlatformViewTraitsInitializer::formsStackingContext(viewProps);
 
   bool formsView = formsStackingContext ||