Menu
Transforms are style properties that will help you modify the appearance and position of your components using 2D or 3D transformations. However, once you apply transforms, the layouts remain the same around the transformed component hence it might overlap with the nearby components.
to set the transform style to [{ rotate: '90deg' }] to rotate the Text component by 90 degrees. We also set the position to 'fixed' and top to '30px' to move the text. Now we should see 'hello world' displayed vertically.
To set Alpha of an image or view component in React Native based application, style's property opacity is used. Developers can make the shape or image background transparent according to his requirement in a fixed manner; in a fixed percentage, the view is made transparent by setting alpha.
Here is a pretty close result:
render() {
return (
<View style={styles.container}>
<View style={styles.child} />
</View>
)
},
var styles = StyleSheet.create({
container: {
backgroundColor:'green',
flex: 1,
},
child: {
flex: 1,
backgroundColor: 'blue',
transform: [
{ perspective: 850 },
{ translateX: - Dimensions.get('window').width * 0.24 },
{ rotateY: '60deg'},
],
}
});
See full example: https://rnplay.org/apps/Qg7Bhg
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With