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 tojustifyContent
.
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>
withjustifyContent: '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>