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

Author: AbhishekGiri04

docs/transforms.md

@@ -129,6 +129,20 @@ const App = () => (
           ]}>
           <Text style={styles.text}>TranslateY by 50 </Text>
         </View>
+
+        <View
+          style={[
+            styles.box,
+            {
+              transform: [
+                {
+                  matrix: [1, 0.5, 0, 0, 0.5, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1],
+                },
+              ],
+            },
+          ]}>
+          <Text style={styles.text}>Matrix Transform</Text>
+        </View>
       </ScrollView>
     </SafeAreaView>
   </SafeAreaProvider>
@@ -195,6 +209,57 @@ The skew transformations require a string so that the transform may be expressed
 }
 ```
 
+### Matrix Transform
+
+The `matrix` transform accepts a 4x4 transformation matrix as an array of 16 numbers. This allows you to apply complex transformations that combine translation, rotation, scaling, and skewing in a single operation.
+
+The matrix is specified in column-major order:
+
+```js
+{
+  transform: [
+    {
+      matrix: [
+        scaleX,
+        skewY,
+        0,
+        0,
+        skewX,
+        scaleY,
+        0,
+        0,
+        0,
+        0,
+        1,
+        0,
+        translateX,
+        translateY,
+        0,
+        1,
+      ],
+    },
+  ];
+}
+```
+
+For example, to apply a combination of scale and skew:
+
+```js
+{
+  transform: [
+    {
+      matrix: [
+        1, 0.5, 0, 0, 0.5, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1,
+      ],
+    },
+  ];
+}
+```
+
+:::note
+Matrix transforms are useful when you need to apply pre-calculated transformation matrices, such as those from animation libraries or when building UI editor applications. For basic transformations, it's recommended to use the individual transform properties (scale, rotate, translate, etc.) as they are more readable.
+:::
+
 | Type                                                                                                                                                                                                                                                                                                          | Required |
 | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------- |
 | array of objects: `{matrix: number[]}`, `{perspective: number}`, `{rotate: string}`, `{rotateX: string}`, `{rotateY: string}`, `{rotateZ: string}`, `{scale: number}`, `{scaleX: number}`, `{scaleY: number}`, `{translateX: number}`, `{translateY: number}`, `{skewX: string}`, `{skewY: string}` or string | No       |

website/versioned_docs/version-0.77/transforms.md

@@ -129,6 +129,20 @@ const App = () => (
           ]}>
           <Text style={styles.text}>TranslateY by 50 </Text>
         </View>
+
+        <View
+          style={[
+            styles.box,
+            {
+              transform: [
+                {
+                  matrix: [1, 0.5, 0, 0, 0.5, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1],
+                },
+              ],
+            },
+          ]}>
+          <Text style={styles.text}>Matrix Transform</Text>
+        </View>
       </ScrollView>
     </SafeAreaView>
   </SafeAreaProvider>
@@ -195,6 +209,57 @@ The skew transformations require a string so that the transform may be expressed
 }
 ```
 
+### Matrix Transform
+
+The `matrix` transform accepts a 4x4 transformation matrix as an array of 16 numbers. This allows you to apply complex transformations that combine translation, rotation, scaling, and skewing in a single operation.
+
+The matrix is specified in column-major order:
+
+```js
+{
+  transform: [
+    {
+      matrix: [
+        scaleX,
+        skewY,
+        0,
+        0,
+        skewX,
+        scaleY,
+        0,
+        0,
+        0,
+        0,
+        1,
+        0,
+        translateX,
+        translateY,
+        0,
+        1,
+      ],
+    },
+  ];
+}
+```
+
+For example, to apply a combination of scale and skew:
+
+```js
+{
+  transform: [
+    {
+      matrix: [
+        1, 0.5, 0, 0, 0.5, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1,
+      ],
+    },
+  ];
+}
+```
+
+:::note
+Matrix transforms are useful when you need to apply pre-calculated transformation matrices, such as those from animation libraries or when building UI editor applications. For basic transformations, it's recommended to use the individual transform properties (scale, rotate, translate, etc.) as they are more readable.
+:::
+
 | Type                                                                                                                                                                                                                                                                                                          | Required |
 | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------- |
 | array of objects: `{matrix: number[]}`, `{perspective: number}`, `{rotate: string}`, `{rotateX: string}`, `{rotateY: string}`, `{rotateZ: string}`, `{scale: number}`, `{scaleX: number}`, `{scaleY: number}`, `{translateX: number}`, `{translateY: number}`, `{skewX: string}`, `{skewY: string}` or string | No       |
@@ -203,22 +268,19 @@ The skew transformations require a string so that the transform may be expressed
 
 ### `decomposedMatrix`, `rotation`, `scaleX`, `scaleY`, `transformMatrix`, `translateX`, `translateY`
 
-> **Deprecated.** Use the [`transform`](transforms#transform) prop instead.
+:::warning Deprecated
+Use the [`transform`](transforms#transform) prop instead.
+:::
 
 ## Transform Origin
 
 The `transformOrigin` property sets the origin for a view's transformations. The transform origin is the point around which a transformation is applied. By default, the origin of a transform is `center`.
 
 # Example
 
-```SnackPlayer name=TransformOrigin%20Example&supportedPlatforms=ios,android
+```SnackPlayer name=TransformOrigin%20Example
 import React, {useEffect, useRef} from 'react';
-import {
-  Animated,
-  View,
-  StyleSheet,
-  Easing,
-} from 'react-native';
+import {Animated, View, StyleSheet, Easing} from 'react-native';
 import {SafeAreaView, SafeAreaProvider} from 'react-native-safe-area-context';
 
 const App = () => {

website/versioned_docs/version-0.78/transforms.md

@@ -129,6 +129,20 @@ const App = () => (
           ]}>
           <Text style={styles.text}>TranslateY by 50 </Text>
         </View>
+
+        <View
+          style={[
+            styles.box,
+            {
+              transform: [
+                {
+                  matrix: [1, 0.5, 0, 0, 0.5, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1],
+                },
+              ],
+            },
+          ]}>
+          <Text style={styles.text}>Matrix Transform</Text>
+        </View>
       </ScrollView>
     </SafeAreaView>
   </SafeAreaProvider>
@@ -195,6 +209,57 @@ The skew transformations require a string so that the transform may be expressed
 }
 ```
 
+### Matrix Transform
+
+The `matrix` transform accepts a 4x4 transformation matrix as an array of 16 numbers. This allows you to apply complex transformations that combine translation, rotation, scaling, and skewing in a single operation.
+
+The matrix is specified in column-major order:
+
+```js
+{
+  transform: [
+    {
+      matrix: [
+        scaleX,
+        skewY,
+        0,
+        0,
+        skewX,
+        scaleY,
+        0,
+        0,
+        0,
+        0,
+        1,
+        0,
+        translateX,
+        translateY,
+        0,
+        1,
+      ],
+    },
+  ];
+}
+```
+
+For example, to apply a combination of scale and skew:
+
+```js
+{
+  transform: [
+    {
+      matrix: [
+        1, 0.5, 0, 0, 0.5, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1,
+      ],
+    },
+  ];
+}
+```
+
+:::note
+Matrix transforms are useful when you need to apply pre-calculated transformation matrices, such as those from animation libraries or when building UI editor applications. For basic transformations, it's recommended to use the individual transform properties (scale, rotate, translate, etc.) as they are more readable.
+:::
+
 | Type                                                                                                                                                                                                                                                                                                          | Required |
 | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------- |
 | array of objects: `{matrix: number[]}`, `{perspective: number}`, `{rotate: string}`, `{rotateX: string}`, `{rotateY: string}`, `{rotateZ: string}`, `{scale: number}`, `{scaleX: number}`, `{scaleY: number}`, `{translateX: number}`, `{translateY: number}`, `{skewX: string}`, `{skewY: string}` or string | No       |
@@ -203,22 +268,19 @@ The skew transformations require a string so that the transform may be expressed
 
 ### `decomposedMatrix`, `rotation`, `scaleX`, `scaleY`, `transformMatrix`, `translateX`, `translateY`
 
-> **Deprecated.** Use the [`transform`](transforms#transform) prop instead.
+:::warning Deprecated
+Use the [`transform`](transforms#transform) prop instead.
+:::
 
 ## Transform Origin
 
 The `transformOrigin` property sets the origin for a view's transformations. The transform origin is the point around which a transformation is applied. By default, the origin of a transform is `center`.
 
 # Example
 
-```SnackPlayer name=TransformOrigin%20Example&supportedPlatforms=ios,android
+```SnackPlayer name=TransformOrigin%20Example
 import React, {useEffect, useRef} from 'react';
-import {
-  Animated,
-  View,
-  StyleSheet,
-  Easing,
-} from 'react-native';
+import {Animated, View, StyleSheet, Easing} from 'react-native';
 import {SafeAreaView, SafeAreaProvider} from 'react-native-safe-area-context';
 
 const App = () => {

website/versioned_docs/version-0.79/transforms.md

@@ -129,6 +129,20 @@ const App = () => (
           ]}>
           <Text style={styles.text}>TranslateY by 50 </Text>
         </View>
+
+        <View
+          style={[
+            styles.box,
+            {
+              transform: [
+                {
+                  matrix: [1, 0.5, 0, 0, 0.5, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1],
+                },
+              ],
+            },
+          ]}>
+          <Text style={styles.text}>Matrix Transform</Text>
+        </View>
       </ScrollView>
     </SafeAreaView>
   </SafeAreaProvider>
@@ -195,6 +209,57 @@ The skew transformations require a string so that the transform may be expressed
 }
 ```
 
+### Matrix Transform
+
+The `matrix` transform accepts a 4x4 transformation matrix as an array of 16 numbers. This allows you to apply complex transformations that combine translation, rotation, scaling, and skewing in a single operation.
+
+The matrix is specified in column-major order:
+
+```js
+{
+  transform: [
+    {
+      matrix: [
+        scaleX,
+        skewY,
+        0,
+        0,
+        skewX,
+        scaleY,
+        0,
+        0,
+        0,
+        0,
+        1,
+        0,
+        translateX,
+        translateY,
+        0,
+        1,
+      ],
+    },
+  ];
+}
+```
+
+For example, to apply a combination of scale and skew:
+
+```js
+{
+  transform: [
+    {
+      matrix: [
+        1, 0.5, 0, 0, 0.5, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1,
+      ],
+    },
+  ];
+}
+```
+
+:::note
+Matrix transforms are useful when you need to apply pre-calculated transformation matrices, such as those from animation libraries or when building UI editor applications. For basic transformations, it's recommended to use the individual transform properties (scale, rotate, translate, etc.) as they are more readable.
+:::
+
 | Type                                                                                                                                                                                                                                                                                                          | Required |
 | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------- |
 | array of objects: `{matrix: number[]}`, `{perspective: number}`, `{rotate: string}`, `{rotateX: string}`, `{rotateY: string}`, `{rotateZ: string}`, `{scale: number}`, `{scaleX: number}`, `{scaleY: number}`, `{translateX: number}`, `{translateY: number}`, `{skewX: string}`, `{skewY: string}` or string | No       |
@@ -203,22 +268,19 @@ The skew transformations require a string so that the transform may be expressed
 
 ### `decomposedMatrix`, `rotation`, `scaleX`, `scaleY`, `transformMatrix`, `translateX`, `translateY`
 
-> **Deprecated.** Use the [`transform`](transforms#transform) prop instead.
+:::warning Deprecated
+Use the [`transform`](transforms#transform) prop instead.
+:::
 
 ## Transform Origin
 
 The `transformOrigin` property sets the origin for a view's transformations. The transform origin is the point around which a transformation is applied. By default, the origin of a transform is `center`.
 
 # Example
 
-```SnackPlayer name=TransformOrigin%20Example&supportedPlatforms=ios,android
+```SnackPlayer name=TransformOrigin%20Example
 import React, {useEffect, useRef} from 'react';
-import {
-  Animated,
-  View,
-  StyleSheet,
-  Easing,
-} from 'react-native';
+import {Animated, View, StyleSheet, Easing} from 'react-native';
 import {SafeAreaView, SafeAreaProvider} from 'react-native-safe-area-context';
 
 const App = () => {