ReactNative how to center text

Question

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                lt View style  styles container  gt                   lt View style  styles topBox  gt                       lt Text style  styles headline  gt lorem ipsum   n  ipsum lorem lorem lt  Text gt                    lt  View gt                   lt View style  styles otherContainer  gt                   lt  View gt               lt  View gt                  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        gt  SampleApp    module exports   SampleApp

User · Answer

Okey   so its a basic problem   dont worry about this just write the  lt View gt  component and wrap it around the  lt Text gt  component  lt View style   alignItems   center    gt   lt Text gt  Write your Text Here lt  Text gt   lt  View gt   alignitems center is a prop use to center items on crossaxis  justifycontent  center  is a prop use to center items on mainaxis

User · Answer

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         lt Text adjustsFontSizeToFit  true  numberOfLines  1  gt Hiiiz lt  Text gt    You can also add the following in your Text Component    lt Text style   textAlignVertical   center  textAlign   center     gt Hiiiz lt  Text gt    Or you can add the following into the parent of the Text component    lt View style   flex 1 justifyContent   center  alignItems   center    gt        lt Text gt Hiiiz lt  Text gt   lt  View gt    or both    lt View style   flex 1 justifyContent   center  alignItems   center    gt        lt Text style   textAlignVertical   center  textAlign   center     gt Hiiiz lt  Text gt   lt  View gt    or all three    lt View style   flex 1 justifyContent   center  alignItems   center    gt        lt Text adjustsFontSizeToFit  true              numberOfLines  1              style   textAlignVertical   center  textAlign   center     gt Hiiiz lt  Text gt   lt  View gt    It all depends on what you re doing  You can also checkout my full blog post on the topic  https   medium com  vygaio how-to-auto-adjust-text-font-size-to-fit-into-a-nodes-width-in-react-native-9f7d1d68305b

User · Answer

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

User · Answer

Simple add   textAlign   center    in your styleSheet  that s it  Hope this would help   edit   center

User · Answer

Wherever you have Text component in your page just you need to set style of the Text component     lt Text style    textAlign   center     gt  Text here  lt  Text gt    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

User · Answer

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       lt -- the magic     fontWeight   bold       fontSize  18      marginTop  0      width  200      backgroundColor   yellow

User · Answer

Horizontal and Vertical center alignment   lt View style   flex  1  justifyContent   center  alignItems   center    gt        lt Text gt  Example Test  lt  Text gt   lt  View gt

User · Answer

first add in parent view   flex 1    justifyContent   center      alignItems   center    then in text add    textAlign  center

User · Answer

textAlignVertical   center    is the real magic

User · Answer

You can use two approaches for this     To make text align center horizontally  apply this Property  textAlign  quot center quot    Now to make the text align vertically  first check direction of flex  If flexDirection is column apply property  justifyContent  quot center quot   and if flexDirection is row is row apply property  alignItems    quot center quot      To Make text align center apply same property  textAlign  quot center quot    Now to make it align vertically make the hieght of the  lt Text gt   lt  Text gt  equal to view and then apply property  textAlignVertical   quot center quot        Most Probably it will Work

User · Answer

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            lt View style     styles navigationView   gt               lt Text style     styles titleText    gt  Title name here  lt  Text gt           lt  View gt

User · Answer

You can use alignSelf property on Text component    alignSelf    center

User · Answer

The following property can be used    alignItems   center     lt View style   alignItems   center    gt    lt Text gt  Hello i m centered text lt  Text gt   lt  View gt

User · Answer

used   textalign center   at the view

User · Answer

Set these styles to image component      textAlignVertical   center     textAlign   center

User · Answer

this is a example for Horizontal and Vertical alignment simultaneously   lt View style   width  200  flexDirection   row  alignItems   center    gt        lt Text style   width   100   textAlign   center      gt   lt  View gt

User · Answer

Set in Parent view justifyContent center  and in child view alignSelf center

[reactjs] ReactNative: how to center text?

Examples related to reactjs

Examples related to flexbox

Examples related to react-native