feat(JS): background-size, position and repeat styles (#52284)

Summary:
This PR adds support for background size, position and repeat styles. It follows the [CSS](https://www.w3.org/TR/css-backgrounds-3/#backgrounds) spec. Currently we default to `background-origin: padding-box` and `background-clip : border-box` to match the web's behavior. We can introduce these styles later. I have split the PR intro three parts for review. This PR includes JS parsing and style propagation to native changes. I wanted to introduce one style at a time, but CSS spec is such that size, position and repeat are intertwined.

## Changelog:
[GENERAL][ADDED] - Background size, position and repeat styles.
<!-- 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: #52284

Test Plan:
Merge the [iOS](#52283) and [android](#52282) PR into this, this PR includes `BackgroundImageExample`. I have also added testcases for parsing syntax in JS.

https://github.com/user-attachments/assets/b7192fdf-52ba-4eb0-a1be-d47c72d87e92

Reviewed By: joevilches

Differential Revision: D82973282

Pulled By: jorge-cab

fbshipit-source-id: a94e33962c6708be963e1cac049da50d4764da64

Author: intergalacticspacehighway

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

@@ -13,6 +13,9 @@ import type {AnyAttributeType} from '../../Renderer/shims/ReactNativeTypes';
 import * as ReactNativeFeatureFlags from '../../../src/private/featureflags/ReactNativeFeatureFlags';
 import processAspectRatio from '../../StyleSheet/processAspectRatio';
 import processBackgroundImage from '../../StyleSheet/processBackgroundImage';
+import processBackgroundPosition from '../../StyleSheet/processBackgroundPosition';
+import processBackgroundRepeat from '../../StyleSheet/processBackgroundRepeat';
+import processBackgroundSize from '../../StyleSheet/processBackgroundSize';
 import processBoxShadow from '../../StyleSheet/processBoxShadow';
 import processColor from '../../StyleSheet/processColor';
 import processFilter from '../../StyleSheet/processFilter';
@@ -144,11 +147,25 @@ const ReactNativeStyleAttributes: {[string]: AnyAttributeType, ...} = {
     : {process: processBoxShadow},
 
   /**
-   * Linear Gradient
+   * BackgroundImage
    */
-  experimental_backgroundImage: ReactNativeFeatureFlags.enableNativeCSSParsing()
-    ? true
-    : {process: processBackgroundImage},
+  experimental_backgroundImage: {process: processBackgroundImage},
+
+  /**
+   * BackgroundSize
+   */
+  experimental_backgroundSize: {process: processBackgroundSize},
+
+  /**
+   * BackgroundPosition
+   */
+  experimental_backgroundPosition: {process: processBackgroundPosition},
+
+  /**
+   * BackgroundRepeat
+   */
+  experimental_backgroundRepeat: {process: processBackgroundRepeat},
+
   /**
    * View
    */

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

@@ -182,6 +182,15 @@ const validAttributesForNonEventProps = {
   experimental_backgroundImage: ReactNativeFeatureFlags.enableNativeCSSParsing()
     ? (true as const)
     : {process: require('../StyleSheet/processBackgroundImage').default},
+  experimental_backgroundSize: {
+    process: require('../StyleSheet/processBackgroundSize').default,
+  },
+  experimental_backgroundPosition: {
+    process: require('../StyleSheet/processBackgroundPosition').default,
+  },
+  experimental_backgroundRepeat: {
+    process: require('../StyleSheet/processBackgroundRepeat').default,
+  },
   boxShadow: ReactNativeFeatureFlags.enableNativeCSSParsing()
     ? (true as const)
     : {process: require('../StyleSheet/processBoxShadow').default},

packages/react-native/Libraries/ReactNative/getNativeComponentAttributes.js

@@ -17,6 +17,12 @@ const ReactNativeStyleAttributes =
 const resolveAssetSource = require('../Image/resolveAssetSource').default;
 const processBackgroundImage =
   require('../StyleSheet/processBackgroundImage').default;
+const processBackgroundPosition =
+  require('../StyleSheet/processBackgroundPosition').default;
+const processBackgroundRepeat =
+  require('../StyleSheet/processBackgroundRepeat').default;
+const processBackgroundSize =
+  require('../StyleSheet/processBackgroundSize').default;
 const processColor = require('../StyleSheet/processColor').default;
 const processColorArray = require('../StyleSheet/processColorArray').default;
 const processFilter = require('../StyleSheet/processFilter').default;
@@ -203,6 +209,12 @@ function getProcessorForType(typeName: string): ?(nextProp: any) => any {
       return processFilter;
     case 'BackgroundImage':
       return processBackgroundImage;
+    case 'BackgroundPosition':
+      return processBackgroundPosition;
+    case 'BackgroundRepeat':
+      return processBackgroundRepeat;
+    case 'BackgroundSize':
+      return processBackgroundSize;
     case 'ImageSource':
       return resolveAssetSource;
     case 'BoxShadow':

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

@@ -779,6 +779,43 @@ type RadialGradientValue = {
 
 export type BackgroundImageValue = LinearGradientValue | RadialGradientValue;
 
+export type BackgroundSizeValue =
+  | {
+      x: string | number,
+      y: string | number,
+    }
+  | 'cover'
+  | 'contain';
+
+export type BackgroundRepeatKeyword =
+  | 'repeat'
+  | 'space'
+  | 'round'
+  | 'no-repeat';
+
+export type BackgroundPositionValue =
+  | {
+      top: number | string,
+      left: number | string,
+    }
+  | {
+      top: number | string,
+      right: number | string,
+    }
+  | {
+      bottom: number | string,
+      left: number | string,
+    }
+  | {
+      bottom: number | string,
+      right: number | string,
+    };
+
+export type BackgroundRepeatValue = {
+  x: BackgroundRepeatKeyword,
+  y: BackgroundRepeatKeyword,
+};
+
 export type BoxShadowValue = {
   offsetX: number | string,
   offsetY: number | string,
@@ -853,6 +890,13 @@ export type ____ViewStyle_InternalBase = $ReadOnly<{
   filter?: $ReadOnlyArray<FilterFunction> | string,
   mixBlendMode?: ____BlendMode_Internal,
   experimental_backgroundImage?: $ReadOnlyArray<BackgroundImageValue> | string,
+  experimental_backgroundSize?: $ReadOnlyArray<BackgroundSizeValue> | string,
+  experimental_backgroundPosition?:
+    | $ReadOnlyArray<BackgroundPositionValue>
+    | string,
+  experimental_backgroundRepeat?:
+    | $ReadOnlyArray<BackgroundRepeatValue>
+    | string,
   isolation?: 'auto' | 'isolate',
 }>;