How to center text with React Native?

Sometimes, we want to center text with React Native.

In this article, we’ll look at how to center text with React Native.

How to center text with React Native?

To center text with React Native, we can use flexbox-like styles.

For instance, we write:

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

export default class MyComponent extends React.Component {
  render() {
    return (
      <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
        <Text>hello world</Text>
      </View>
    );
  }
}

to set flex to 1 to expand the View to fit the screen.

And we use justifyContent to 'center' to center horizontally and alignItems to center vertically.

Then we put our text in the Text component.

Therefore, ‘hello world’ is centered.

Conclusion

To center text with React Native, we can use flexbox-like styles.