Introduction :
React native provides style properties to do 2D or 3D transformation of an object like skew, rotate, scale etc. But note that it will not change the layout size defined for that object. If you have any other objects nearby, it will overlap. To prevent this, you need to add margin or padding to the object.
Props :
Only one props is used for transformation, transform :
It takes an array of objects of the following types :
-
perspective (number)
-
rotate (string)
-
rotateX (string)
-
rotateY (string)
-
rotateZ (string)
-
scale (number)
-
scaleX (number)
-
scaleY (number)
-
translateX (number)
-
translateY (number)
-
skewX (string)
-
skewY (string)
For rotate, degree and radian is used and for skew, degree is used. deg is used for degree like 10deg and rad is used for radian like .5rad.
Example program :
Let’s take a look at the below example :
import React from 'react';
import {StyleSheet, View} from 'react-native';
export default function ExampleProgram() {
return (
<View style={styles.container}>
<View style={styles.square} />
<View
style={[
styles.square,
{
transform: [{scale: 2}],
},
]}
/>
<View
style={[
styles.square,
{
transform: [{translateX: 20}],
},
]}
/>
<View
style={[
styles.square,
{
transform: [{rotateZ: '20deg'}],
},
]}
/>
<View
style={[
styles.square,
{
transform: [{skewX: '30deg'}],
},
]}
/>
</View>
);
}
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
margin: 12,
},
square: {
height: 50,
width: 50,
backgroundColor: 'red',
margin: 30,
},
});Here, I am showing scale, translateX, rotateZ and skewX properties. You can also pass more than one property in the array. It will produce the below output :
