How to make text vertical (rotated 90 degrees) in React Native?

Sometimes, we want to make text vertical (rotated 90 degrees) in React Native.

In this article, we’ll look at how to make text vertical (rotated 90 degrees) in React Native.

How to make text vertical (rotated 90 degrees) in React Native?

To make text vertical (rotated 90 degrees) in React Native, we can set the transform style.

For instance, we write:

import * as React from 'react';
import { View, Text } from 'react-native';

import { Card } from 'react-native-paper';

const App = () => {
  return (
    <View>
      <Text
        style={{
          transform: [{ rotate: '90deg' }],
          position: 'fixed',
          top: '30px',
        }}>
        hello world
      </Text>
    </View>
  );
};
export default App;

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.

Conclusion

To make text vertical (rotated 90 degrees) in React Native, we can set the transform style.