Saturday, March 23, 2019

Set Text Align Vertically Horizontally Center in React Native

This tutorial explains how to set text align vertically and horizontally center in react native application. Text component is the most basic component in react native applications and used to display text in apps. We are 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.

Set Text Align Vertically Horizontally Center in React Native
Here we are using justifyContent and alignItems stylesheet property to display text vertically and horizontally center in react native.
  • justifyContent: 'center' sets the View’s inside child component align Vertically center.
  • alignItems: 'center' sets the View’s inside child component align Horizontally center.

Set Text Align Vertically Horizontally Center in React Native

React native text align vertically and horizontally

Lets see the below simple example to set text align vertically and horizontally center in react native. 

App.js 

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

export default class App extends Component {

  render() {

    return (
      <View style={styles.container}>
        <Text style={styles.headerText}>Welcome to skptricks.com</Text>
      </View>
    );
  }
}


const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center'
  },
  headerText: {
    fontSize: 20,
    textAlign: "center",
    margin: 10,
    fontWeight: "bold"
  },
  
});

Screenshot :

Set Text Align Vertically Horizontally Center in React Native

This is all about set text align vertically and horizontally center in react native. Thank you for reading this article, and if you have any problem, have a another better useful solution about this article, please write message in the comment section.

No comments:

Post a Comment