Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How to make this transform with React-Native?

People also ask

What does transform do in React Native?

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.

How do I show text vertically in react native?

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.

How do I change opacity in react native?

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:

enter image description here

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