From 0a8995d4527b36a3a9f4dd763c8b2c1de5a0b4da Mon Sep 17 00:00:00 2001
From: ZainnQureshii <43629888+ZainnQureshii@users.noreply.github.com>
Date: Tue, 10 Nov 2026 16:01:44 +0100
Subject: [PATCH] fix: Correct native matrix translation indices

parseTransform expanded the CSS 2D matrix(a, b, c, d, tx, ty) into a 4x4 matrix with tx and ty at indices 8 and 9. React Native reads the 16 values column-major, with translation at indices 12 and 13 (Transform.cpp sets them there for translate), so the translation was dropped. Place tx and ty at 12 and 13 and keep index 10 as 1.
---
 .../src/native/css/__tests__/parseTransform-test.js |  8 +++++++-
 .../src/native/css/parseTransform.js                |  6 +++---
 .../tests/css/css-create-test.native.js             | 13 +++++++++++++
 3 files changed, 23 insertions(+), 4 deletions(-)

diff --git a/packages/react-strict-dom/src/native/css/__tests__/parseTransform-test.js b/packages/react-strict-dom/src/native/css/__tests__/parseTransform-test.js
index cdf1f8cb..78e62b28 100644
--- a/packages/react-strict-dom/src/native/css/__tests__/parseTransform-test.js
+++ b/packages/react-strict-dom/src/native/css/__tests__/parseTransform-test.js
@@ -66,7 +66,13 @@ describe('parseTransform', () => {
 
   test('matrix', () => {
     expect(parseTransform('matrix(1, 2, 3, 4, 5, 6)')).toEqual([
-      { matrix: [1, 2, 0, 0, 3, 4, 0, 0, 5, 6, 1, 0, 0, 0, 0, 1] }
+      { matrix: [1, 2, 0, 0, 3, 4, 0, 0, 0, 0, 1, 0, 5, 6, 0, 1] }
+    ]);
+  });
+
+  test('matrix translation', () => {
+    expect(parseTransform('matrix(1, 0, 0, 1, 12, -34)')).toEqual([
+      { matrix: [1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 12, -34, 0, 1] }
     ]);
   });
 
diff --git a/packages/react-strict-dom/src/native/css/parseTransform.js b/packages/react-strict-dom/src/native/css/parseTransform.js
index aca32836..c0f7508f 100644
--- a/packages/react-strict-dom/src/native/css/parseTransform.js
+++ b/packages/react-strict-dom/src/native/css/parseTransform.js
@@ -101,12 +101,12 @@ export function parseTransform(transform: string): CSSTransformValue {
           matrix[3],
           0,
           0,
-          matrix[4],
-          matrix[5],
-          1,
           0,
           0,
+          1,
           0,
+          matrix[4],
+          matrix[5],
           0,
           1
         ]
diff --git a/packages/react-strict-dom/tests/css/css-create-test.native.js b/packages/react-strict-dom/tests/css/css-create-test.native.js
index 2067238f..8c2c042a 100644
--- a/packages/react-strict-dom/tests/css/css-create-test.native.js
+++ b/packages/react-strict-dom/tests/css/css-create-test.native.js
@@ -1307,6 +1307,19 @@ describe('css.create()', () => {
       expect(console.warn).toHaveBeenCalledTimes(1);
     });
 
+    test('matrix translation', () => {
+      const styles = css.create({
+        root: { transform: 'matrix(1, 0, 0, 1, 12, -34)' }
+      });
+      let root;
+      act(() => {
+        root = create(<html.div style={styles.root} />);
+      });
+      expect(root.toJSON().props.style.transform).toEqual([
+        { matrix: [1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 12, -34, 0, 1] }
+      ]);
+    });
+
     test('transform', () => {
       const styles = css.create({
         none: {