How can I make text vertical (rotated 90 deg) in react native?

In style, use transform to rotate and element

style={{transform: [{ rotate: '180deg' }]}}

E.g.:

<View style={{transform: [{ rotate: '180deg' }]}} />

creat view

            <View style={styles.arrow_1_6} ></View>
          

add in style transform: [{ rotate: '14deg' }], if you make view position absolute it will not affect another view!

  • the rotate start from 0 to 360 deg .

       arrow_1_6: {
       transform: [{ rotate: '14deg' }],
      width: 260,
      marginTop: 145,
      position: 'absolute',
      marginLeft: 75,
      backgroundColor: 'orange',
      height: 4,
      flexDirection: "row",
      padding: 0,
      alignItems: 'center',
      justifyContent: 'flex-start',
      borderBottomColor: '#075fff',
      borderBottomWidth: 4,
    

    }, enter image description here


For anyone using Material-UI Typography with makeStyles(), this should work :

myClassName: {
    transform: "rotate(90deg)"
},

You can use a transformation.

https://facebook.github.io/react-native/docs/transforms.html#proptypes

myStyle: {
    transform: [{ rotate: '90deg'}]
}

Tags:

React Native