Categories
JavaScript Answers React Native Answers

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

Spread the love

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.

By John Au-Yeung

Web developer specializing in React, Vue, and front end development.

Leave a Reply

Your email address will not be published. Required fields are marked *