diff --git a/packages/react-strict-dom/src/native/stylex/index.js b/packages/react-strict-dom/src/native/stylex/index.js index a60e6139..da262cee 100644 --- a/packages/react-strict-dom/src/native/stylex/index.js +++ b/packages/react-strict-dom/src/native/stylex/index.js @@ -108,6 +108,11 @@ function processStyle( result[propName] = 0; continue; } + // Polyfill support for string opacity on Android + if (propName === 'opacity') { + result[propName] = parseFloat(styleValue); + continue; + } // Polyfill support for custom property references (do this first) else if (stringContainsVariables(styleValue)) { result[propName] = CSSUnparsedValue.parse(propName, styleValue); 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 704d0c04..e7fd85ab 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 @@ -337,6 +337,14 @@ exports[`properties: general objectFit: scaleDown 1`] = ` } `; +exports[`properties: general opacity string value 1`] = ` +{ + "style": { + "opacity": 0.25, + }, +} +`; + exports[`properties: general outlineColor,Offset,Style,Width 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 a4800832..64dea90b 100644 --- a/packages/react-strict-dom/tests/css-test.native.js +++ b/packages/react-strict-dom/tests/css-test.native.js @@ -442,6 +442,15 @@ describe('properties: general', () => { expect(css.props.call(mockOptions, styles.none)).toMatchSnapshot('none'); }); + test('opacity string value', () => { + const { underTest } = css.create({ + underTest: { + opacity: '0.25' + } + }); + expect(css.props.call(mockOptions, underTest)).toMatchSnapshot(); + }); + test('outlineColor,Offset,Style,Width', () => { const { underTest } = css.create({ underTest: {