From 1b88fc7b007b9db3aaf28d1c562059e40ca8f0ff Mon Sep 17 00:00:00 2001
From: Nicolas Gallagher <necolas@meta.com>
Date: Thu, 17 Jul 2025 11:38:20 -0700
Subject: [PATCH] Add support for CSS `backgroundImage` gradients on native

Delegate `backgroundImage` to `experimental_backgroundImage` in React
Native. This should provide support for using linear and radial
gradients.
---
 apps/website/docs/api/02-css/index.md                     | 2 +-
 packages/react-strict-dom/src/native/stylex/index.js      | 3 +++
 .../src/native/stylex/isAllowedStyleKey.js                | 1 +
 .../tests/__snapshots__/css-test.native.js.snap-native    | 8 ++++++++
 packages/react-strict-dom/tests/css-test.native.js        | 5 ++---
 5 files changed, 15 insertions(+), 4 deletions(-)

diff --git a/apps/website/docs/api/02-css/index.md b/apps/website/docs/api/02-css/index.md
index 4e6def24..4a1b567d 100644
--- a/apps/website/docs/api/02-css/index.md
+++ b/apps/website/docs/api/02-css/index.md
@@ -72,7 +72,7 @@ The following tables represent the compatibility status of the strict CSS API fo
 | backdropFilter | ❌ | ❌ | |
 | backfaceVisibility | ✅ | ✅ | |
 | backgroundColor | ✅ | ✅ | |
-| backgroundImage | ❌ | ❌ | |
+| backgroundImage | 🟡 Partial | 🟡 Partial | Support for linear and radial gradients in React Native |
 | backgroundOrigin | ❌ | ❌ | |
 | backgroundPosition | ❌ | ❌ | |
 | backgroundRepeat | ❌ | ❌ | |
diff --git a/packages/react-strict-dom/src/native/stylex/index.js b/packages/react-strict-dom/src/native/stylex/index.js
index 4d2e5f38..d8bf060b 100644
--- a/packages/react-strict-dom/src/native/stylex/index.js
+++ b/packages/react-strict-dom/src/native/stylex/index.js
@@ -127,6 +127,9 @@ function processStyle(
           );
         }
         continue;
+      } else if (propName === 'backgroundImage') {
+        result.experimental_backgroundImage = styleValue;
+        continue;
       }
       // Workaround unsupported objectFit values
       else if (propName === 'objectFit' && styleValue === 'none') {
diff --git a/packages/react-strict-dom/src/native/stylex/isAllowedStyleKey.js b/packages/react-strict-dom/src/native/stylex/isAllowedStyleKey.js
index 35ff6fb1..7f6e0b1c 100644
--- a/packages/react-strict-dom/src/native/stylex/isAllowedStyleKey.js
+++ b/packages/react-strict-dom/src/native/stylex/isAllowedStyleKey.js
@@ -18,6 +18,7 @@ const allowedStyleKeySet = new Set<string>([
   'aspectRatio',
   'backfaceVisibility',
   'backgroundColor',
+  'backgroundImage',
   'blockSize',
   'borderBottomColor',
   'borderBottomLeftRadius',
diff --git a/packages/react-strict-dom/tests/__snapshots__/css-test.native.js.snap-native b/packages/react-strict-dom/tests/__snapshots__/css-test.native.js.snap-native
index 610def8d..a97b6fc0 100644
--- a/packages/react-strict-dom/tests/__snapshots__/css-test.native.js.snap-native
+++ b/packages/react-strict-dom/tests/__snapshots__/css-test.native.js.snap-native
@@ -72,6 +72,14 @@ exports[`properties: general animationDuration 1`] = `
 }
 `;
 
+exports[`properties: general backgroundImage 1`] = `
+{
+  "style": {
+    "experimental_backgroundImage": "linear-gradient(to bottom right, yellow, green)",
+  },
+}
+`;
+
 exports[`properties: general borderColor 1`] = `
 {
   "style": {
diff --git a/packages/react-strict-dom/tests/css-test.native.js b/packages/react-strict-dom/tests/css-test.native.js
index 21e6e654..f34acc44 100644
--- a/packages/react-strict-dom/tests/css-test.native.js
+++ b/packages/react-strict-dom/tests/css-test.native.js
@@ -141,11 +141,10 @@ describe('properties: general', () => {
   test('backgroundImage', () => {
     const styles = css.create({
       root: {
-        backgroundImage: 'url(https://placehold.it/300/300)'
+        backgroundImage: 'linear-gradient(to bottom right, yellow, green)'
       }
     });
-    css.props.call(mockOptions, styles.root);
-    expect(console.warn).toHaveBeenCalled();
+    expect(css.props.call(mockOptions, styles.root)).toMatchSnapshot();
   });
 
   test('borderColor', () => {