Text vertical align in react native (using nativebase)
TextReact NativeVertical AlignmentNative BaseText Problem Overview
I was wondering there is a way I can align
If anyone knows how to solve this issue, please let me know.
Text Solutions
Solution 1 - Text
You can use the flex property, justifyContent to achieve this. Full documentation here.
<View style={{justifyContent: 'center'}}>
<Text>Vertically Centered Text</Text>
</View>
Solution 2 - Text
to align any content including text both horizontally and vertically, simply use the following in the container which holds it
container :{
justifyContent: 'center', //Centered horizontally
alignItems: 'center', //Centered vertically
flex:1
}
Solution 3 - Text
You can use an android-only style property textAlignVertical
To align text on top:
style={{textAlignVertical: 'top'}}
To align text on center:
style={{textAlignVertical: 'center'}}
To align text on bottom:
style={{textAlignVertical: 'bottom'}}
Solution 4 - Text
This problems occurs especially when you are using image or icon. I had a same problem my solution:
<View style={{ flex: 1, flexDirection: 'row', justifyContent: 'center', alignItems: 'center' }}>
<Icon type="MaterialCommunityIcons" name="barcode" />
<Text style={{ textAlign: 'center' }}>{urun_data.barkod}</Text>
</View>
Solution 5 - Text
I had a similar problem and looked at many of the other posts here. Here is what worked for me.
I created an initial view, and nested the elements I wanted vertically centered within that view. I made the mistake of including 'flex: 1' in the initial view, which screwed up the vertical alignment.
The code:
<View style={{flexDirection: 'row', justifyContent: 'center', alignItems: 'center'}}>
<Text>Content here to be vertically aligned</Text>
<Switch>...</Switch>
</View>
Solution 6 - Text
RN version >= 0.55.2 is support to "textAlignVertical" now.
<TextInput
style={styles.text}
onChangeText={text => console.log('text >>>>>>>', text)}
value='sample text'
/>
text: {
textAlign: 'center',
textAlignVertical: 'center',
}
Working with both cases flex: 1 and set height of the <Text> component.
Solution 7 - Text
Text vertical center alignment summary
Case 1: There is only one Text under View Ios: Use flex with alignItems/justifyContent to be more centered, Adr: height = lineHeight, includeFontPadding: false more centered
Case 2: There are two Texts in a line view and the two Text fonts are different, and the Text with a smaller font size does not need to use the height.
The larger one is aligned using the above method. The smaller one can only be used with font-size, but not with the line-height and height attributes. In this case, both texts can be centered.
Case 3: There are two Texts in a line view and the two Text fonts are different, and the Text with a smaller font size must use the height.
The one with the larger font size is aligned using the above method, and the smaller font size uses height with padding and includeFontPadding to achieve alignment.
And Demo
<View
style={{
flexDirection: 'row',
height: 38,
borderWidth: 1,
borderColor: '#000',
alignItems: 'center'
}}
>
<Text
style={{
fontSize: 24
}}
>
测试
</Text>
<Text
style={{
fontSize: 24,
lineHeight: 36,
height: 36,
includeFontPadding: false
}}
>
测试
</Text>
</View>
<View
style={{
flexDirection: 'row',
height: 38,
borderWidth: 1,
borderColor: '#000',
alignItems: 'center'
}}
>
<Text
style={{
fontSize: 24
}}
>
ios设备
</Text>
<Text
style={{
fontSize: 16
}}
>
更对齐
</Text>
</View>
<View
style={{
flexDirection: 'row',
height: 38,
borderWidth: 1,
borderColor: '#000',
alignItems: 'center'
}}
>
<Text
style={{
fontSize: 24,
lineHeight: 36,
height: 36,
includeFontPadding: false
}}
>
安卓
</Text>
<Text
style={{
fontSize: 12,
height: 18,
includeFontPadding: false,
paddingVertical: 2,
paddingHorizontal: 1,
paddingTop: DeviceInfo.isIOS ? 3 : 2,
}}
>
更对齐
</Text>
</View>
Solution 8 - Text
The flex: 1 makes the child view take up all the remaining space in the parent view. So remember to make sure the parent is occupying the space it is supposed to.
I would advocate wrapping your content in a <SafeAreaView> tag so that is adjusts content to the device it is in. But you could use any other view type.
<SafeAreaView style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
<Text>Centered Text</Text>
</SafeAreaView>
flex: 1makes the view take up the full width and heigh of the view its injustifyContent: 'center'vertically centers the childrenalignItems: 'center'horizontally centers the children
You can also use textAlign: center on the Text element and remove the alignItems: 'center'. This of course would only center the text in the Text object and wouldn't work if you had multiple elements that needed to be centered.
Solution 9 - Text
You can use flexbox with justifyContent: 'flex-end' to achieve vertical centering.
Here's a snack: https://snack.expo.io/@rynek/vertical-centering-with-flexbox-in-react-native
Solution 10 - Text
Here's a somewhat ugly solution to the problem. The ScrollView will take up the remaining vertical space, pushing the text down to the bottom.
<View>
<ScrollView>{}</ScrollView>
<Text>Your text</Text>
</View>
Or..
<View>
<View style={{ flex: 1 }}>{}</View>
<Text>Your text</Text>
</View>
Solution 11 - Text
use flex:1 property on both as on container of the Text component and itself inside the Text component.Because if u don't define the height and width its not working.
<View style={{
flex:1,
}} >
<Text style={{
flex:1,
color: COLORS.primary,
fontFamily: "FredokaOne-Regular",
fontSize:40,
textAlign:"center",
textAlignVertical:"center",
}}
numberOfLines={2} >
Travia War
</Text>
</View>
Solution 12 - Text
Simply use the alignItems for the vertical alignment
alignItems: 'flex-start' //for start the View : vertical-align: top
alignItems: 'flex-end' // for vertical-align: bottom
alignItems: 'center' // for vertical-align: middle
<View style={{ flexDirection: 'row', alignItems: 'flex-start'}}>
<View> <Text>hello 1</Text> </View>
<View> <Text>hello 2</Text> </View>
</View>
Check this example with changing of alignItems