From 3488e0526269b985e3e0c7be96e146a1d3d2b0e7 Mon Sep 17 00:00:00 2001 From: MayankSharma-2812 Date: Wed, 8 Jul 2026 21:16:48 +0530 Subject: [PATCH 1/3] fix: support decimal values in transformOrigin string parser --- .../StyleSheet/__tests__/processTransformOrigin-itest.js | 5 +++++ .../Libraries/StyleSheet/processTransformOrigin.js | 2 +- 2 files changed, 6 insertions(+), 1 deletion(-) diff --git a/packages/react-native/Libraries/StyleSheet/__tests__/processTransformOrigin-itest.js b/packages/react-native/Libraries/StyleSheet/__tests__/processTransformOrigin-itest.js index 976060faab26..45ac69da31ee 100644 --- a/packages/react-native/Libraries/StyleSheet/__tests__/processTransformOrigin-itest.js +++ b/packages/react-native/Libraries/StyleSheet/__tests__/processTransformOrigin-itest.js @@ -113,5 +113,10 @@ describe('processTransformOrigin', () => { processTransformOrigin('top 30% center'); }).toThrow('Could not parse transform-origin: top 30% center'); }); + it('should handle decimal percentage and pixel values', () => { + expect(processTransformOrigin('50.5% 30.2%')).toEqual(['50.5%', '30.2%', 0]); + expect(processTransformOrigin('12.5px 7.5px')).toEqual([12.5, 7.5, 0]); + expect(processTransformOrigin('.5% .5px')).toEqual(['.5%', 0.5, 0]); + }); }); }); diff --git a/packages/react-native/Libraries/StyleSheet/processTransformOrigin.js b/packages/react-native/Libraries/StyleSheet/processTransformOrigin.js index 75e4acacbd60..c804fe06ba6f 100644 --- a/packages/react-native/Libraries/StyleSheet/processTransformOrigin.js +++ b/packages/react-native/Libraries/StyleSheet/processTransformOrigin.js @@ -11,7 +11,7 @@ import invariant from 'invariant'; // Pre-compiled regex pattern for performance - avoids regex compilation on each call -const TRANSFORM_ORIGIN_REGEX = /(top|bottom|left|right|center|\d+(?:%|px)|0)/gi; +const TRANSFORM_ORIGIN_REGEX = /(top|bottom|left|right|center|\d*\.?\d+(?:%|px)|0)/gi; const INDEX_X = 0; const INDEX_Y = 1; From d78ceed4b5ead30c47820bdeba540c4902c76afa Mon Sep 17 00:00:00 2001 From: MayankSharma-2812 Date: Thu, 9 Jul 2026 17:39:33 +0530 Subject: [PATCH 2/3] test: cover decimal transform origin values in native parser --- .../css/tests/CSSTransformOriginTest.cpp | 30 +++++++++++++++++++ 1 file changed, 30 insertions(+) diff --git a/packages/react-native/ReactCommon/react/renderer/css/tests/CSSTransformOriginTest.cpp b/packages/react-native/ReactCommon/react/renderer/css/tests/CSSTransformOriginTest.cpp index fbfbeac8bc06..3df2920f069e 100644 --- a/packages/react-native/ReactCommon/react/renderer/css/tests/CSSTransformOriginTest.cpp +++ b/packages/react-native/ReactCommon/react/renderer/css/tests/CSSTransformOriginTest.cpp @@ -425,4 +425,34 @@ TEST(CSSTransformOrigin, percentage_percentage) { EXPECT_EQ(origin.z, CSSLength{}); } +TEST(CSSTransformOrigin, decimal_length_length) { + auto val = parseCSSProperty("12.5px 7.5px"); + EXPECT_TRUE(std::holds_alternative(val)); + auto& origin = std::get(val); + + EXPECT_TRUE(std::holds_alternative(origin.x)); + EXPECT_EQ(std::get(origin.x).value, 12.5f); + EXPECT_EQ(std::get(origin.x).unit, CSSLengthUnit::Px); + + EXPECT_TRUE(std::holds_alternative(origin.y)); + EXPECT_EQ(std::get(origin.y).value, 7.5f); + EXPECT_EQ(std::get(origin.y).unit, CSSLengthUnit::Px); + + EXPECT_EQ(origin.z, CSSLength{}); +} + +TEST(CSSTransformOrigin, decimal_percentage_percentage) { + auto val = parseCSSProperty("50.5% 30.2%"); + EXPECT_TRUE(std::holds_alternative(val)); + auto& origin = std::get(val); + + EXPECT_TRUE(std::holds_alternative(origin.x)); + EXPECT_EQ(std::get(origin.x).value, 50.5f); + + EXPECT_TRUE(std::holds_alternative(origin.y)); + EXPECT_EQ(std::get(origin.y).value, 30.2f); + + EXPECT_EQ(origin.z, CSSLength{}); +} + } // namespace facebook::react From 7fc37cfa4e88fc6d915ceb02d176a4d89d195a68 Mon Sep 17 00:00:00 2001 From: MayankSharma-2812 Date: Fri, 10 Jul 2026 00:11:18 +0530 Subject: [PATCH 3/3] chore: format transformOrigin changes --- .../StyleSheet/__tests__/processTransformOrigin-itest.js | 6 +++++- .../Libraries/StyleSheet/processTransformOrigin.js | 3 ++- 2 files changed, 7 insertions(+), 2 deletions(-) diff --git a/packages/react-native/Libraries/StyleSheet/__tests__/processTransformOrigin-itest.js b/packages/react-native/Libraries/StyleSheet/__tests__/processTransformOrigin-itest.js index 45ac69da31ee..81a882f4175a 100644 --- a/packages/react-native/Libraries/StyleSheet/__tests__/processTransformOrigin-itest.js +++ b/packages/react-native/Libraries/StyleSheet/__tests__/processTransformOrigin-itest.js @@ -114,7 +114,11 @@ describe('processTransformOrigin', () => { }).toThrow('Could not parse transform-origin: top 30% center'); }); it('should handle decimal percentage and pixel values', () => { - expect(processTransformOrigin('50.5% 30.2%')).toEqual(['50.5%', '30.2%', 0]); + expect(processTransformOrigin('50.5% 30.2%')).toEqual([ + '50.5%', + '30.2%', + 0, + ]); expect(processTransformOrigin('12.5px 7.5px')).toEqual([12.5, 7.5, 0]); expect(processTransformOrigin('.5% .5px')).toEqual(['.5%', 0.5, 0]); }); diff --git a/packages/react-native/Libraries/StyleSheet/processTransformOrigin.js b/packages/react-native/Libraries/StyleSheet/processTransformOrigin.js index c804fe06ba6f..96cd040d8142 100644 --- a/packages/react-native/Libraries/StyleSheet/processTransformOrigin.js +++ b/packages/react-native/Libraries/StyleSheet/processTransformOrigin.js @@ -11,7 +11,8 @@ import invariant from 'invariant'; // Pre-compiled regex pattern for performance - avoids regex compilation on each call -const TRANSFORM_ORIGIN_REGEX = /(top|bottom|left|right|center|\d*\.?\d+(?:%|px)|0)/gi; +const TRANSFORM_ORIGIN_REGEX = + /(top|bottom|left|right|center|\d*\.?\d+(?:%|px)|0)/gi; const INDEX_X = 0; const INDEX_Y = 1;