9-element (2d) transform matrix is not applied properly

[MatiPl01]

Description

While working on transform matrices optimization in CSS animations transformation in Reanimated, I noticed that I am getting weird results while trying to apply a 2d transform matrix. Even though the JS validator says that 9-element matrices are supported, it seems that the CPP logic is missing or implemented incorrectly.

After lookin at the implementation in the ReactCommon/react/renderer/components/view/conversions.h file, I noticed this line, which seems to be incorrect. The loop fills the transformMatrix.matrix, which always has 16 elements (see this line), in the same way as it does for the 16-element matrix. In the end, we end up filling the first 2 4-element rows and the first element of the 3rd row of the matrix instead of filling it properly:

// 2D to 3D matrix conversion
{
 m[0], m[1], 0, m[2],
 m[3], m[4], 0, m[5],
   0,    0,  1,   0,
 m[6], m[7], 0, m[8]
}

I also think that 2d transforms could be handled separately as 3d matrix multiplication and decomposition is much slower, so it would be worth having the optimized version when 3d matrices aren't needed.

Steps to reproduce

1. Render a View with the 2d (9-element) identity matrix transformation [{ matrix: [1, 0, 0, 0, 1, 0, 0, 0, 1] and observe that the View is no longer visible because of the invalid transformation (likely it results in the scale: 0 or sth after putting values into the 3d matrix)
2. Render a View with the 3d (16-element) identity matrix and observe that everything works

React Native Version

0.82.0

Affected Platforms

Runtime - iOS, Runtime - Android

Output of npx @react-native-community/cli info

System:
  OS: macOS 15.6
  CPU: (11) arm64 Apple M3 Pro
  Memory: 178.48 MB / 18.00 GB
  Shell:
    version: "5.9"
    path: /bin/zsh
Binaries:
  Node:
    version: 22.14.0
    path: ~/.nvm/versions/node/v22.14.0/bin/node
  Yarn:
    version: 4.1.1
    path: ~/.nvm/versions/node/v22.14.0/bin/yarn
  npm:
    version: 10.9.2
    path: ~/.nvm/versions/node/v22.14.0/bin/npm
  Watchman:
    version: 2025.06.30.00
    path: /opt/homebrew/bin/watchman
Managers:
  CocoaPods:
    version: 1.14.3
    path: /Users/mateu/.rbenv/shims/pod
SDKs:
  iOS SDK:
    Platforms:
      - DriverKit 24.5
      - iOS 18.5
      - macOS 15.5
      - tvOS 18.5
      - visionOS 2.5
      - watchOS 11.5
  Android SDK:
    API Levels:
      - "30"
      - "33"
      - "34"
      - "35"
      - "36"
    Build Tools:
      - 30.0.3
      - 33.0.1
      - 34.0.0
      - 35.0.0
      - 36.0.0
    System Images:
      - android-34 | Android TV ARM 64 v8a
      - android-35 | Google Play ARM 64 v8a
    Android NDK: Not Found
IDEs:
  Android Studio: 2025.1 AI-251.26094.121.2513.14007798
  Xcode:
    version: 16.4/16F6
    path: /usr/bin/xcodebuild
Languages:
  Java:
    version: 17.0.15
    path: /opt/homebrew/opt/openjdk@17/bin/javac
  Ruby:
    version: 3.2.2
    path: /Users/mateu/.rbenv/shims/ruby
npmPackages:
  "@react-native-community/cli": Not Found
  react: Not Found
  react-native: Not Found
  react-native-macos: Not Found
npmGlobalPackages:
  "*react-native*": Not Found
Android:
  hermesEnabled: true
  newArchEnabled: true
iOS:
  hermesEnabled: true
  newArchEnabled: true

Stacktrace or Logs

Neither crash, nor failure, so there is no stack trace.

MANDATORY Reproducer

https://snack.expo.dev/@matipl01/2d-transform-matrix-issue?platform=ios

Screenshots and Videos

No response

[atulgpt17]

Hi @MatiPl01 I am able to repro this issue, thanks for sharing the snack link

[cortinico]

Thanks for reporting this @MatiPl01
Here the fix #53860