CODEWITHSUNDEEP
react-nativenative-base
myTest532 myTest532
myTest532 myTest532

Reputation: 2381

React Native Center align Body Title text

How can I center a title text in native base?

<Header>
  <Left style={{flex:1}}>
    <Button
       transparent
       onPress={() => NavigationService.navigate('Home')}
    >
      <Icon name='arrow-back' />
    </Button>
    </Left>
    <Body style={{flex:1}}>
      <Title>Vacancy Snapshot</Title>
    </Body>
</Header>

The result above is a text align to the right. enter image description here If I include the Right tag <Right style={{flex:1}} /> after the Body, it center the text, but doesn't display the whole text: enter image description here

Upvotes: 0

Views: 371

Answers (1)

kenmistry
kenmistry

Reputation: 2143

by including the <Right style={{flex:1}}/>, the title text will be centered. and increase the flex to 3 from 1 so that the full length of the text can be displayed, like this:

<Header>
  <Left style={{flex:1}}>
    <Button
      transparent
    >
      <Icon name='arrow-back' />
    </Button>
    </Left>
    <Body style={{flex:3}}>
      <Title>Vacancy Snapshot</Title>
    </Body>
    <Right style={{flex:1}}/>
</Header>

i've also included an expo snack here for further experimentation. have fun!

Upvotes: 1

Related Questions