[Solved]-ReactNative: how to center text?-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>
    )

}

you can use two approaches for this...

1. 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") .

2. 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...

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

set in parent view

justifycontent:center

and in child view alignself:center

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

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"

<view style={{backgroundcolor: 'blue', justifycontent: 'center' }}>

                <text style={{ fontsize: 25, textalign: 'center' }} >a</text>    
            </view>

you can use alignself property on text component

{ alignself : "center" }

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>

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>

horizontal and vertical center alignment

<view style={{flex: 1, justifycontent: 'center',alignitems: 'center'}}>
     <text> example test </text>
</view>

set these styles to image component: { textalignvertical: "center", textalign: "center" }

textalignvertical: "center"

is the real magic.

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

https://medium.com/@vygaio/how-to-auto-adjust-text-font-size-to-fit-into-a-nodes-width-in-react-native-9f7d1d68305b