Vertically and Horizontally Center Text in React Native

I recently spent quite some time trying to vertically and horizontally center text in React Native. I tried all sorts of combinations of align, alignContent, alignSelf, etc but couldn’t get my text horizontally and vertically centered. I mean this is probably because I’m React Native newb but stilllll. I’m actually quite surprised how bare the typical forums are on React Native recommendations. Coming from a bit of experience with Android development, these watering holes of information seem a bit bare of React Native content. Regardless, we can often times just look to React for development guidance which is one of the largest and fastest growing web frameworks.

My Computer Setup

• React Native 0.62.2
• IDE -> Webstorm 2020.1.2
• macOS

Getting Your Project Setup

I personally just used Webstorm’s “new project” GUI to set my React Native stuff up. It kinda sucks if you want to setup a Typescript React Native project but it’ll do just fine for a quick example app.

Where I Initially Went Wrong

My initial thoughts were that the style of each react component organizes where the component shows up on the screen. Let’s extrapolate this to real life. Let’s say each component was a person. It was to my initial incorrect understanding that for me to place a person in the room that I would need to communicate with that person and give them instructions on where to stand. Let’s say I wanted them in the center of the room. I would have tried to tell the person to alignSelf: ‘center’ and maybe textAlign: ‘center’. Regardless of what I used, I would have tried to apply it to them element I was trying to manipulate. But that was wrong. I don’t believe we can vertically and horizontally center text by only manipulating a Text component’s style.

import React from 'react';
import {SafeAreaView, Text, StatusBar} from 'react-native';

function App(): JSX.Element {
  return (
    <>
      <StatusBar barStyle="dark-content" />
      <SafeAreaView>
        <Text
          style={{
            textAlign: 'center',
            color: '#000000',
            alignSelf: 'center',
            justifyContent: 'center',
            alignItems: 'center',
            textAlignVertical: 'center',
            alignContent: 'center',
          }}>
          Hello
        </Text>
      </SafeAreaView>
    </>
  );
}

export default App;

Regardless of all the aligns and justifies I added to the Text component, I just couldn’t get my Text in the middle of the damn screen! Which in retrospect was a bit stupid on my end because this also isn’t how Android works.

What you need to do

So, surprise surprise. Regardless of how I would’ve styled the Text component, I wouldn’t have been able to vertically center the Text. The Text component only has so much control of where it shows up on the screen. So it’s like I’m telling our earlier hypothetical dude, please align yourself in the center but he himself is only aware of his horizontal world. I instead need to tell the ROOM that the guy needs to get vertically centered in him and tell the guy to horizontally center himself.

So the fix is to wrap our Text component in a view that does understand vertical orientation. That view will get justifyContent: ‘center’. It’ll look like this.

import React from 'react';
import {SafeAreaView, Text, StatusBar, View} from 'react-native';

function App(): JSX.Element {
  return (
    <>
      <StatusBar barStyle="dark-content" />
      <SafeAreaView>
        <View
          style={{
            justifyContent: 'center',
            backgroundColor: '#000000',
            height: '100%',
          }}>
          <Text
            style={{
              textAlign: 'center',
              color: '#ffffff',
            }}>
            Hello
          </Text>
        </View>
      </SafeAreaView>
    </>
  );
};

export default App;

So now we have a View with justifyContent: ‘center’ and a Text Component with textAlign: ‘center’.

I flipped the colors. Sorry if that confuses you at all. And this should vertically and horizontally center text in React Native. I hope this helps in some way shape or form. This took me a while to grasp, hopefully this get’s you there quicker. Happy coding! Check this out for some more Javascript stuff.