CODEWITHSUNDEEP
react-nativetext
ThinkAndCode
ThinkAndCode

Reputation: 1657

How to rotate a text vertically along with it's width

I have rendered a text and rotated as follows,

<Text style={{transform: [{rotate: '270deg'}]}}>Sum Of Potential Revenue</Text>

and the result is as follows,

enter image description here

when i rotate the text, Width of the text remains same that leads to lot of empty space.

Can anybody let me know that how to avoid the space issue?

Upvotes: 1

Views: 261

Answers (1)

Imanshu
Imanshu

Reputation: 83

Please check this link: https://medium.com/@therealmaarten/how-to-layout-rotated-text-in-react-native-6d55b7d71ca5

Sample Code:

const TEXT_LENGTH = 40
const TEXT_HEIGHT = 14
const OFFSET = TEXT_LENGTH / 2 - TEXT_HEIGHT / 2
…
<View style={{ width: TEXT_HEIGHT, height: TEXT_LENGTH }}>
  <Text style={{
    transform: [
      { rotate: "90deg" }, 
      { translateX: -OFFSET }, 
      { translateY: OFFSET }
    ],
    width: TEXT_LENGTH,
    height: TEXT_HEIGHT
  }}>
    {text}
  </Text>
</View>

Upvotes: 1

Related Questions