Skip to content

Commit 83b1f25

Browse files
AbhishekGiri04AbhishekGiri04
committed
Add matrix transform docs to versioned docs and fix lint issues
1 parent 37be8ea commit 83b1f25

8 files changed

Lines changed: 504 additions & 50 deletions

File tree

‎docs/transforms.md‎

Lines changed: 25 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -220,13 +220,25 @@ The matrix is specified in column-major order:
220220
transform: [
221221
{
222222
matrix: [
223-
scaleX, skewY, 0, 0,
224-
skewX, scaleY, 0, 0,
225-
0, 0, 1, 0,
226-
translateX, translateY, 0, 1
227-
]
228-
}
229-
]
223+
scaleX,
224+
skewY,
225+
0,
226+
0,
227+
skewX,
228+
scaleY,
229+
0,
230+
0,
231+
0,
232+
0,
233+
1,
234+
0,
235+
translateX,
236+
translateY,
237+
0,
238+
1,
239+
],
240+
},
241+
];
230242
}
231243
```
232244

@@ -236,14 +248,16 @@ For example, to apply a combination of scale and skew:
236248
{
237249
transform: [
238250
{
239-
matrix: [1, 0.5, 0, 0, 0.5, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1]
240-
}
241-
]
251+
matrix: [
252+
1, 0.5, 0, 0, 0.5, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1,
253+
],
254+
},
255+
];
242256
}
243257
```
244258

245259
:::note
246-
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 simple transformations, it's recommended to use the individual transform properties (scale, rotate, translate, etc.) as they are more readable.
260+
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.
247261
:::
248262

249263
| Type | Required |

‎website/versioned_docs/version-0.77/transforms.md‎

Lines changed: 70 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -129,6 +129,20 @@ const App = () => (
129129
]}>
130130
<Text style={styles.text}>TranslateY by 50 </Text>
131131
</View>
132+
133+
<View
134+
style={[
135+
styles.box,
136+
{
137+
transform: [
138+
{
139+
matrix: [1, 0.5, 0, 0, 0.5, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1],
140+
},
141+
],
142+
},
143+
]}>
144+
<Text style={styles.text}>Matrix Transform</Text>
145+
</View>
132146
</ScrollView>
133147
</SafeAreaView>
134148
</SafeAreaProvider>
@@ -195,6 +209,57 @@ The skew transformations require a string so that the transform may be expressed
195209
}
196210
```
197211

212+
### Matrix Transform
213+
214+
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.
215+
216+
The matrix is specified in column-major order:
217+
218+
```js
219+
{
220+
transform: [
221+
{
222+
matrix: [
223+
scaleX,
224+
skewY,
225+
0,
226+
0,
227+
skewX,
228+
scaleY,
229+
0,
230+
0,
231+
0,
232+
0,
233+
1,
234+
0,
235+
translateX,
236+
translateY,
237+
0,
238+
1,
239+
],
240+
},
241+
];
242+
}
243+
```
244+
245+
For example, to apply a combination of scale and skew:
246+
247+
```js
248+
{
249+
transform: [
250+
{
251+
matrix: [
252+
1, 0.5, 0, 0, 0.5, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1,
253+
],
254+
},
255+
];
256+
}
257+
```
258+
259+
:::note
260+
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.
261+
:::
262+
198263
| Type | Required |
199264
| ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------- |
200265
| 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
203268

204269
### `decomposedMatrix`, `rotation`, `scaleX`, `scaleY`, `transformMatrix`, `translateX`, `translateY`
205270

206-
> **Deprecated.** Use the [`transform`](transforms#transform) prop instead.
271+
:::warning Deprecated
272+
Use the [`transform`](transforms#transform) prop instead.
273+
:::
207274

208275
## Transform Origin
209276

210277
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`.
211278

212279
# Example
213280

214-
```SnackPlayer name=TransformOrigin%20Example&supportedPlatforms=ios,android
281+
```SnackPlayer name=TransformOrigin%20Example
215282
import React, {useEffect, useRef} from 'react';
216-
import {
217-
Animated,
218-
View,
219-
StyleSheet,
220-
Easing,
221-
} from 'react-native';
283+
import {Animated, View, StyleSheet, Easing} from 'react-native';
222284
import {SafeAreaView, SafeAreaProvider} from 'react-native-safe-area-context';
223285
224286
const App = () => {

‎website/versioned_docs/version-0.78/transforms.md‎

Lines changed: 70 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -129,6 +129,20 @@ const App = () => (
129129
]}>
130130
<Text style={styles.text}>TranslateY by 50 </Text>
131131
</View>
132+
133+
<View
134+
style={[
135+
styles.box,
136+
{
137+
transform: [
138+
{
139+
matrix: [1, 0.5, 0, 0, 0.5, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1],
140+
},
141+
],
142+
},
143+
]}>
144+
<Text style={styles.text}>Matrix Transform</Text>
145+
</View>
132146
</ScrollView>
133147
</SafeAreaView>
134148
</SafeAreaProvider>
@@ -195,6 +209,57 @@ The skew transformations require a string so that the transform may be expressed
195209
}
196210
```
197211

212+
### Matrix Transform
213+
214+
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.
215+
216+
The matrix is specified in column-major order:
217+
218+
```js
219+
{
220+
transform: [
221+
{
222+
matrix: [
223+
scaleX,
224+
skewY,
225+
0,
226+
0,
227+
skewX,
228+
scaleY,
229+
0,
230+
0,
231+
0,
232+
0,
233+
1,
234+
0,
235+
translateX,
236+
translateY,
237+
0,
238+
1,
239+
],
240+
},
241+
];
242+
}
243+
```
244+
245+
For example, to apply a combination of scale and skew:
246+
247+
```js
248+
{
249+
transform: [
250+
{
251+
matrix: [
252+
1, 0.5, 0, 0, 0.5, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1,
253+
],
254+
},
255+
];
256+
}
257+
```
258+
259+
:::note
260+
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.
261+
:::
262+
198263
| Type | Required |
199264
| ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------- |
200265
| 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
203268

204269
### `decomposedMatrix`, `rotation`, `scaleX`, `scaleY`, `transformMatrix`, `translateX`, `translateY`
205270

206-
> **Deprecated.** Use the [`transform`](transforms#transform) prop instead.
271+
:::warning Deprecated
272+
Use the [`transform`](transforms#transform) prop instead.
273+
:::
207274

208275
## Transform Origin
209276

210277
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`.
211278

212279
# Example
213280

214-
```SnackPlayer name=TransformOrigin%20Example&supportedPlatforms=ios,android
281+
```SnackPlayer name=TransformOrigin%20Example
215282
import React, {useEffect, useRef} from 'react';
216-
import {
217-
Animated,
218-
View,
219-
StyleSheet,
220-
Easing,
221-
} from 'react-native';
283+
import {Animated, View, StyleSheet, Easing} from 'react-native';
222284
import {SafeAreaView, SafeAreaProvider} from 'react-native-safe-area-context';
223285
224286
const App = () => {

‎website/versioned_docs/version-0.79/transforms.md‎

Lines changed: 70 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -129,6 +129,20 @@ const App = () => (
129129
]}>
130130
<Text style={styles.text}>TranslateY by 50 </Text>
131131
</View>
132+
133+
<View
134+
style={[
135+
styles.box,
136+
{
137+
transform: [
138+
{
139+
matrix: [1, 0.5, 0, 0, 0.5, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1],
140+
},
141+
],
142+
},
143+
]}>
144+
<Text style={styles.text}>Matrix Transform</Text>
145+
</View>
132146
</ScrollView>
133147
</SafeAreaView>
134148
</SafeAreaProvider>
@@ -195,6 +209,57 @@ The skew transformations require a string so that the transform may be expressed
195209
}
196210
```
197211

212+
### Matrix Transform
213+
214+
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.
215+
216+
The matrix is specified in column-major order:
217+
218+
```js
219+
{
220+
transform: [
221+
{
222+
matrix: [
223+
scaleX,
224+
skewY,
225+
0,
226+
0,
227+
skewX,
228+
scaleY,
229+
0,
230+
0,
231+
0,
232+
0,
233+
1,
234+
0,
235+
translateX,
236+
translateY,
237+
0,
238+
1,
239+
],
240+
},
241+
];
242+
}
243+
```
244+
245+
For example, to apply a combination of scale and skew:
246+
247+
```js
248+
{
249+
transform: [
250+
{
251+
matrix: [
252+
1, 0.5, 0, 0, 0.5, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1,
253+
],
254+
},
255+
];
256+
}
257+
```
258+
259+
:::note
260+
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.
261+
:::
262+
198263
| Type | Required |
199264
| ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------- |
200265
| 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
203268

204269
### `decomposedMatrix`, `rotation`, `scaleX`, `scaleY`, `transformMatrix`, `translateX`, `translateY`
205270

206-
> **Deprecated.** Use the [`transform`](transforms#transform) prop instead.
271+
:::warning Deprecated
272+
Use the [`transform`](transforms#transform) prop instead.
273+
:::
207274

208275
## Transform Origin
209276

210277
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`.
211278

212279
# Example
213280

214-
```SnackPlayer name=TransformOrigin%20Example&supportedPlatforms=ios,android
281+
```SnackPlayer name=TransformOrigin%20Example
215282
import React, {useEffect, useRef} from 'react';
216-
import {
217-
Animated,
218-
View,
219-
StyleSheet,
220-
Easing,
221-
} from 'react-native';
283+
import {Animated, View, StyleSheet, Easing} from 'react-native';
222284
import {SafeAreaView, SafeAreaProvider} from 'react-native-safe-area-context';
223285
224286
const App = () => {

0 commit comments

Comments
 (0)