Set Text Horizontally and Vertically at the Center of the Screen in React Native Tutorial from Scratch

In this tutorial, I am going to explain and show how we can set Text  component Horizontally and Vertically at the center of the screen with complete source code. Text  component is used to show simple text on the screen even you can also make Text  component clickable in react native.

Now, let’s get started.

Step #1: Create a new and fresh react native project, if you don’t know how to create a project in react native just follow this tutorial.

Step #2: Open your project in any editor( Visual Studio Code, Sublime etc. ) and open index.android.js  / index.ios.js  file. Remove all the code from this file, because we are going to start from scratch. 🙂

Step #3: Import all required components from react , react-native .

import React, { Component } from 'react';
import { AppRegistry, View, Text, StyleSheet } from 'react-native';

Step #4: Create a class and implement it’s render  and return  methods.

class App extends Component
{
    render()
    {
        return(
            <View style = { styles.container }>
                <Text style = { styles.text }>Hello, Guest</Text>
            </View>
        );
     }
}

Explanation:

• we simply create a class with class  keyword and return a Text  component wrapped by View  component.

Step #5: Implement styles for components.

const styles = StyleSheet.create(
{
     container:
     {
         flex: 1,
         justifyContent: 'center', // Used to set Text Component Vertically Center
         alignItems: 'center' // Used to set Text Component Horizontally Center
     },
     
     text:
     {
         fontSize: 35
     }
});

Explanation:

• flex  is used to define the layout of the component and makes responsive layout, here 1 means that a component with ID container  takes whole remaining space on the screen. In our case we have only 1 View  component. So it covers whole screen.
• flex  supports a very special property named as flexDirection , which is used to change the default flow of layout. flexDirection  supports two values named as row  or column  and according these values justifyContent  and alignItems  properties work. By default, flexDirection  value is column . It means all the child components are arranged in a column layout or from top to bottom manner or if flexDirection  value is row  then it means all the child components are arranged in a row layout or from left to right manner. As in our case, no flexDirection  value is specified then it means it takes default column  value and sets our  layout in column  manner and justifyContent: ‘center’ , alignItems:’center’  properties set our Text component respectively Vertically and Horizontally center.
• You can set any react native component at the center of the screen using this approach such as: Image , Button , ActivityIndicator  etc.

Always Remember:

• If we supply column  for flexDirection  and center  for both justifyContent  and alignItems  properties then justifyContent  sets our child component Vertically center and alignItems  Horizontally center.
• If we supply row  for flexDirection  and center  for both justifyContent  and alignItems  properties then justifyContent  sets our child component Horizontally center and alignItems  Vertically center.

Step #6: Register your app with AppRegistry .

AppRegistry.registerComponent('App', () => App);

Complete Source Code for index.android.js / index.ios.js:

import React, { Component } from 'react';
import { AppRegistry, View, Text, StyleSheet } from 'react-native';

class App extends Component
{
    render()
    {
        return(
            <View style = { styles.container }>
                <Text style = { styles.text }>Hello, Guest</Text>
            </View> 
        );
     }
}

const styles = StyleSheet.create(
{
    container:
    {
        flex: 1,
        justifyContent: 'center', // Used to set Text Component Vertically Center
        alignItems: 'center' // Used to set Text Component Horizontally Center
    },
 
    text:
    {
        fontSize: 35
    }
});

AppRegistry.registerComponent('App', () => App);

Step #7: Run your app with react-native run-android  for android and react-native run-ios  for iOS devices.

• Output in iOS emulator:

• Output in Android emulator:

Please feel free to comment if you didn’t get any point… 🙂 and Enjoy…