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.
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.
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 :
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