Ads by ProfitSence
Close

Center Text in React Native

Last Updated on Wednesday 5th Oct 2022

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