Skip to content

docs: Add matrix transform documentation and example (#1899)#4931

Merged
Simek merged 2 commits into
react:mainfrom
AbhishekGiri04:add-matrix-transform-docs-1899
Dec 17, 2025
Merged

docs: Add matrix transform documentation and example (#1899)#4931
Simek merged 2 commits into
react:mainfrom
AbhishekGiri04:add-matrix-transform-docs-1899

Conversation

@AbhishekGiri04

Copy link
Copy Markdown
Contributor

Summary

Fixes #1899

This PR adds comprehensive documentation for the matrix transform property, which was previously undocumented despite being supported in React Native since the deprecation of transformMatrix.

Changes

  • ✅ Added matrix transform example in the interactive demo
  • ✅ Documented the 4x4 matrix structure in column-major order
  • ✅ Provided practical code examples
  • ✅ Added guidance on when to use matrix vs individual transforms
  • ✅ Clarified use cases (UI editors, pre-calculated transforms)

Context

The matrix transform property has been supported but undocumented, causing confusion for developers who need to work with transformation matrices (especially in UI editor applications). This PR addresses that gap.

Test Plan

  • Verified documentation renders correctly
  • Confirmed matrix example displays properly in the interactive demo
  • Tested that the matrix syntax is accurate

Fixes react#1899

Added comprehensive documentation for the matrix transform property
which was previously undocumented despite being supported in React Native.

Changes:
- Added matrix transform example in the interactive demo
- Documented the 4x4 matrix structure and column-major order
- Provided practical examples of matrix usage
- Added note about when to use matrix vs individual transforms
- Clarified that matrix is useful for UI editors and pre-calculated transforms

This addresses the confusion around the deprecated transformMatrix
property and provides clear guidance on using the modern matrix syntax.
@meta-cla meta-cla Bot added the CLA Signed label Dec 16, 2025
@netlify

netlify Bot commented Dec 16, 2025

Copy link
Copy Markdown

Deploy Preview for react-native ready!

Name Link
🔨 Latest commit 83b1f25
🔍 Latest deploy log https://app.netlify.com/projects/react-native/deploys/6942893b739715000857ac51
😎 Deploy Preview https://deploy-preview-4931--react-native.netlify.app
📱 Preview on mobile
Toggle QR Code...

QR Code

Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify project configuration.

@Simek

Simek commented Dec 17, 2025

Copy link
Copy Markdown
Collaborator

Hey @AbhishekGiri04, thanks for working on that addition! 👍

Can you backport the changes also to the versioned doc files? They are located in here:

@AbhishekGiri04

Copy link
Copy Markdown
Contributor Author

@Simek Thanks for the review! I've added the matrix transform documentation to all versioned docs (0.77-0.83) and fixed the lint issues. The changes are now ready for review.

@Simek Simek left a comment

Copy link
Copy Markdown
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Thanks for the update! 🚀

@Simek Simek merged commit f2fcfce into react:main Dec 17, 2025
4 checks passed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Projects

None yet

Development

Successfully merging this pull request may close these issues.

transform matrix documentation.

2 participants