ReactNative: how to center text?
ReactjsFlexboxReact NativeReactjs Problem Overview
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;
Reactjs Solutions
Solution 1 - Reactjs
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',
}
Solution 2 - Reactjs
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
Solution 3 - Reactjs
Set these styles to image component: { textAlignVertical: "center", textAlign: "center" }
Solution 4 - Reactjs
textAlignVertical: "center"
is the real magic.
Solution 5 - Reactjs
Horizontal and Vertical center alignment
<View style={{flex: 1, justifyContent: 'center',alignItems: 'center'}}>
<Text> Example Test </Text>
</View>
Solution 6 - Reactjs
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>
Solution 7 - Reactjs
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>
Solution 8 - Reactjs
You can use alignSelf property on Text component
{ alignSelf : "center" }
Solution 9 - Reactjs
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.
Solution 10 - Reactjs
Simple add
textAlign: "center"
in your styleSheet, that's it. Hope this would help.
edit: "center"
Solution 11 - Reactjs
<Text style={{ fontSize: 25, textAlign: 'center' }} >A</Text>
</View>
Solution 12 - Reactjs
Set in Parent view
justifyContent:center
and in child view alignSelf:center
Solution 13 - Reactjs
Okey , so its a basic problem , dont worry about this just write the <View> component and wrap it around the <Text> component
<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
Solution 14 - Reactjs
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"
}
}
Solution 15 - Reactjs
first add in parent view flex:1, justifyContent: 'center', alignItems: 'center'
then in text add textAlign:'center'
Solution 16 - Reactjs
used
textalign:center
at the view
Solution 17 - Reactjs
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>
)
}
Solution 18 - Reactjs
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<Text> </Text>equal to view and then apply property (textAlignVertical: "center")...
Most Probably it will Work...