Center Text in React Native

Last Updated On Sunday 17th Oct 2021

React Native Center Text

Horizontal and Vertical alignment simultaneously

	import React from "react";
import { StyleSheet, Text, View } from "react-native";

<View style={{width: 200, flexDirection: 'row',alignItems: 'center'}}>
     <Text style={{width: '100%',textAlign: 'center'}} />
</View>
  • flexDirection controls the direction in which the children of a node are laid out. This is also referred to as the main axis. The cross axis is the axis perpendicular to the main axis.
  • alignItems describes how to align children along the cross axis of their container. It is very similar to justifyContent.

Center Text React Native

adjustsFontSizeToFit

Specifies whether fonts should be scaled down automatically to fit given style constraints

	<Text adjustsFontSizeToFit={true} numberOfLines={1}>Hello</Text>
  • Need to Wrap it in a <View> with justifyContent: 'center', alignItems: 'center'
	<View style={{flex:1,justifyContent: "center",alignItems: "center"}}>
     <Text style={{textAlignVertical: "center",textAlign: "center",}}>Hiiiz</Text>
</View>
	

			
	
	


	<View style={{flex:1,justifyContent: "center",alignItems: "center"}}>
     <Text adjustsFontSizeToFit={true} 
           numberOfLines={1} 
           style={{textAlignVertical: "center",textAlign: "center",}}>Hiiiz</Text>
</View>

References

Related Posts

Append Multiple Items to List Python

Python is not recognized as an internal or external command

npm ERR! code ELIFECYCLE npm ERR! errno 1