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([ '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', () => {