feat(JS) - url function support in backgroundImage

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

@@ -12,7 +12,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 processBackgroundImage, {
+  processBackgroundImageAssets,
+} from '../../StyleSheet/processBackgroundImage';
 import processBackgroundPosition from '../../StyleSheet/processBackgroundPosition';
 import processBackgroundRepeat from '../../StyleSheet/processBackgroundRepeat';
 import processBackgroundSize from '../../StyleSheet/processBackgroundSize';
@@ -45,7 +47,7 @@ export const boxShadowAttribute: AnyAttributeType = nativeCSSParsing
   : {process: processBoxShadow};
 
 export const backgroundImageAttribute: AnyAttributeType = nativeCSSParsing
-  ? true
+  ? {process: processBackgroundImageAssets}
   : {process: processBackgroundImage};
 
 export const backgroundSizeAttribute: AnyAttributeType = nativeCSSParsing

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

@@ -353,6 +353,31 @@ describe('<View>', () => {
       });
 
       describe('background-image', () => {
+        it('resolves a require() asset in the object syntax', () => {
+          const root = Fantom.createRoot();
+
+          Fantom.runTask(() => {
+            root.render(
+              <View
+                style={{
+                  backgroundImage: [
+                    {
+                      type: 'url',
+                      uri: require('../../../Image/__tests__/img/img1.png'),
+                    },
+                  ],
+                }}
+              />,
+            );
+          });
+
+          expect(
+            root.getRenderedOutput({props: ['backgroundImage']}).toJSX(),
+          ).toEqual(
+            <rn-view backgroundImage="[url(file://drawable-mdpi/packages_reactnative_libraries_image___tests___img_img1.png)]" />,
+          );
+        });
+
         it('it parses CSS and object syntax', () => {
           const root = Fantom.createRoot();
 

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

@@ -11,6 +11,8 @@
 
 import '@react-native/fantom/src/setUpDefaultReactNativeEnvironment';
 
+import type {BackgroundImageValue} from '../../../StyleSheet/StyleSheetTypes';
+
 import * as Fantom from '@react-native/fantom';
 import * as React from 'react';
 import {View} from 'react-native';
@@ -71,5 +73,66 @@ describe('<View> native CSS parsing', () => {
       expect(backgroundImage).toContain('linear-gradient');
       expect(backgroundImage).toContain('rgba(230, 100, 101, 1)');
     });
+
+    it('keeps a url layer with an empty uri, like web', () => {
+      expect(
+        mountedProp(
+          {backgroundImage: [{type: 'url', uri: ''}]},
+          'backgroundImage',
+        ),
+      ).toBe('[url()]');
+      const backgroundImage = mountedProp(
+        {backgroundImage: 'url(""), linear-gradient(red, blue)'},
+        'backgroundImage',
+      );
+      expect(backgroundImage).toContain('url()');
+      expect(backgroundImage).toContain('linear-gradient');
+    });
+
+    it('drops the whole list when a url layer is invalid, like web', () => {
+      const gradient: BackgroundImageValue = {
+        type: 'linear-gradient',
+        direction: 'to bottom',
+        colorStops: [
+          {color: 'red', positions: ['0%']},
+          {color: 'blue', positions: ['100%']},
+        ],
+      };
+      expect(
+        mountedProp({backgroundImage: [gradient]}, 'backgroundImage'),
+      ).toContain('linear-gradient');
+      // An asset number that the asset registry does not know stays a number,
+      // which is not a valid uri.
+      expect(
+        mountedProp(
+          {backgroundImage: [{type: 'url', uri: 999999}, gradient]},
+          'backgroundImage',
+        ),
+      ).toBeUndefined();
+      expect(
+        mountedProp(
+          {backgroundImage: 'url(my photo.png), linear-gradient(red, blue)'},
+          'backgroundImage',
+        ),
+      ).toBeUndefined();
+    });
+
+    it('resolves a require() asset in the object syntax', () => {
+      expect(
+        mountedProp(
+          {
+            backgroundImage: [
+              {
+                type: 'url',
+                uri: require('../../../Image/__tests__/img/img1.png'),
+              },
+            ],
+          },
+          'backgroundImage',
+        ),
+      ).toBe(
+        '[url(file://drawable-mdpi/packages_reactnative_libraries_image___tests___img_img1.png)]',
+      );
+    });
   });
 });

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

@@ -769,7 +769,16 @@ type RadialGradientValue = {
   }>,
 };
 
-export type BackgroundImageValue = LinearGradientValue | RadialGradientValue;
+type URLBackgroundImageValue = {
+  type: 'url',
+  uri: string | number,
+};
+
+export type GradientBackgroundImageValue =
+  LinearGradientValue | RadialGradientValue;
+
+export type BackgroundImageValue =
+  GradientBackgroundImageValue | URLBackgroundImageValue;
 
 export type BackgroundSizeValue = {
   x: string | number,