Menu
I’m using react native base. I want to centre align the title in iOS and android both, since text is long it hides it with “…”. Applying flex:3 shows title fully but it don't centre align it. Even applying alignItems: 'center',alignSelf: 'center' don't help.
I've tried different option unable to fix it. How can I fix it?
Code:
<Header iosStatusbar="light-content" androidStatusBarColor='#000' >
<Left style={{flex:1}}>
<Button transparent onPress={() => this.navigateCustom("goBack")}>
<Icon name="arrow-back" />
</Button>
</Left>
<Body style={{flex:3,}}>
<Title>THIS IS A LONG TITLE TEST</Title>
</Body>
<Right style={{flex:1}}>
<Button transparent onPress={()=> this.navigateCustom("DrawerOpen") }>
<IconEvil name={"menu"} style={{ color: "rgb(255,255,255)", fontSize:30}}/>
</Button>
</Right>
</Header>
EDIT:
after applying flex:1 and centre alignment to body
777
You could use justifyContent and alignItems both to center like below with flex:1:
<Body style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
<Title>THIS IS A LONG TITLE TEST</Title>
</Body>
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
