How to center Text in ReactNative both in horizontal and vertical?
I have an example application in rnplay.org where justifyContent="center" and alignItems="center" is not working: https://rnplay.org/apps/AoxNKQ
The text should being centered. And why is there a margin at the top between the text (yellow) and parent container?
Code:
'use strict';
var React = require('react-native');
var {
AppRegistry,
StyleSheet,
Text,
Image,
View,
} = React;
var SampleApp = React.createClass({
render: function() {
return (
<View style={styles.container}>
<View style={styles.topBox}>
<Text style={styles.headline}>lorem ipsum{'\n'}ipsum lorem lorem</Text>
</View>
<View style={styles.otherContainer}>
</View>
</View>
);
}
});
var styles = StyleSheet.create({
container: {
flex: 1,
flexDirection: 'column',
backgroundColor: 'red',
justifyContent: 'center',
alignItems: 'center',
},
topBox: {
flex: 1,
flexDirection: 'row',
backgroundColor: 'lightgray',
justifyContent: 'center',
alignItems: 'center',
},
headline: {
fontWeight: 'bold',
fontSize: 18,
marginTop: 0,
width: 200,
height: 80,
backgroundColor: 'yellow',
justifyContent: 'center',
alignItems: 'center',
},
otherContainer: {
flex: 4,
justifyContent: 'center',
alignItems: 'center',
backgroundColor: 'green',
},
});
AppRegistry.registerComponent('SampleApp', () => SampleApp);
module.exports = SampleApp;
From headline
' style remove height
, justifyContent
and alignItems
. It will center the text vertically. Add textAlign: 'center'
and it will center the text horizontally.
headline: {
textAlign: 'center', // <-- the magic
fontWeight: 'bold',
fontSize: 18,
marginTop: 0,
width: 200,
backgroundColor: 'yellow',
}
Already answered but I'd like to add a bit more on the topic and different ways to do it depending on your use case.
You can add adjustsFontSizeToFit={true}
(currently undocumented) to Text
Component to auto adjust the size inside a parent node.
<Text adjustsFontSizeToFit={true} numberOfLines={1}>Hiiiz</Text>
You can also add the following in your Text Component:
<Text style={{textAlignVertical: "center",textAlign: "center",}}>Hiiiz</Text>
Or you can add the following into the parent of the Text component:
<View style={{flex:1,justifyContent: "center",alignItems: "center"}}>
<Text>Hiiiz</Text>
</View>
or both
<View style={{flex:1,justifyContent: "center",alignItems: "center"}}>
<Text style={{textAlignVertical: "center",textAlign: "center",}}>Hiiiz</Text>
</View>
or all three
<View style={{flex:1,justifyContent: "center",alignItems: "center"}}>
<Text adjustsFontSizeToFit={true}
numberOfLines={1}
style={{textAlignVertical: "center",textAlign: "center",}}>Hiiiz</Text>
</View>
It all depends on what you're doing. You can also checkout my full blog post on the topic
textAlignVertical: "center", textAlign: "center"
, as <Text/> Component Style.
justifyContent: "center"
in the parent component was the magic sauce. Thanks!
Set these styles to image component: { textAlignVertical: "center", textAlign: "center" }
textAlignVertical: "center"
is the real magic.
Horizontal and Vertical center alignment
<View style={{flex: 1, justifyContent: 'center',alignItems: 'center'}}>
<Text> Example Test </Text>
</View>
this is a example for Horizontal and Vertical alignment simultaneously
<View style={{width: 200, flexDirection: 'row',alignItems: 'center'}}>
<Text style={{width: '100%',textAlign: 'center'}} />
</View>
The following property can be used: {{alignItems: 'center'}}
becaus you are using item <Text>
not "string".
<View style={{alignItems: 'center'}}>
<Text> Hello i'm centered text</Text>
</View>
You can use alignSelf
property on Text component
{ alignSelf : "center" }
<Text style={{ fontSize: 25, textAlign: 'center' }} >A</Text>
</View>
Wherever you have Text
component in your page just you need to set style of the Text
component.
<Text style={{ textAlign: 'center' }}> Text here </Text>
you don't need to add any other styling property, this is spectacular magic it will set you text in center of the your UI.
Simple add
textAlign: "center"
in your styleSheet, that's it. Hope this would help.
edit: "center"
Set in Parent view
justifyContent:center
and in child view alignSelf:center
justifyContent
and alignSelf
Okey , so its a basic problem , dont worry about this just write the
<View style={{alignItems: 'center'}}>
<Text> Write your Text Here</Text>
</View>
alignitems:center is a prop use to center items on crossaxis
justifycontent:'center' is a prop use to center items on mainaxis
In addition to the use cases mentioned in the other answers:
To center text in the specific use case of a BottomTabNavigator, remember to set showIcon to false (even if you don't have icons in the TabNavigator). Otherwise the text will be pushed toward bottom of Tab.
For example:
const TabNavigator = createBottomTabNavigator({
Home: HomeScreen,
Settings: SettingsScreen
}, {
tabBarOptions: {
activeTintColor: 'white',
inactiveTintColor: 'black',
showIcon: false, //do this
labelStyle: {
fontSize: 20,
textAlign: 'center',
},
tabStyle: {
backgroundColor: 'grey',
marginTop: 0,
textAlign: 'center',
justifyContent: 'center',
textAlignVertical: "center"
}
}
first add in parent view flex:1, justifyContent: 'center', alignItems: 'center'
then in text add textAlign:'center'
used
textalign:center
at the view
const styles = StyleSheet.create({
navigationView: {
height: 44,
width: '100%',
backgroundColor:'darkgray',
justifyContent: 'center',
alignItems: 'center'
},
titleText: {
fontSize: 20,
fontWeight: 'bold',
color: 'white',
textAlign: 'center',
},
})
render() {
return (
<View style = { styles.navigationView }>
<Text style = { styles.titleText } > Title name here </Text>
</View>
)
}
You can use two approaches for this...
To make text align center horizontally, apply this Property (textAlign:"center"). Now to make the text align vertically, first check direction of flex. If flexDirection is column apply property (justifyContent:"center") and if flexDirection is row is row apply property (alignItems : "center") . To Make text align center apply same property (textAlign:"center"). Now to make it align vertically make the hieght of the
Most Probably it will Work...
Success story sharing
width
unless you wrap it in a<View>
withjustifyContent: 'center', alignItems: 'center',
width: "100%",
worked