Nativebase: Header. How to show a long Title?
In the Native Base documentation we can see the following image:
We see that <Title> can use more space but it is cut off.
How to show a long <Title>?
danilvalov
All 8 comments
Same question. Any configuration for that? or I have to restyle the Header component?
quangrau
on 25 Feb 2017
You'll have to eject and change the header component. Just set the flex value here to higher value. Please feel free to ask if you have any problems with ejecting.
sankhadeeproy007
on 28 Feb 2017
For anyone coming from Google, as mentioned in #605 <Body style={{flex: 3}}> fixes this issue for me.
klvs
on 27 Mar 2017
@klvs your solution works but then the title is no longer centered. Is there a way to easily center it after applying flex: 3 on the styles?
cdimitroulas
on 26 Jul 2017
Just wrap it to <Text></Text>
Dont use <Title></Title>
agungjk
on 26 Oct 2017
Setting flex: 1 for <Body> and flex: 0 for <Left> and <Right> also seems to do the trick and you'll get a <Body> that takes up all remaining width. You might have to play around with margins/paddings, though, to get the desired look.
stpch
on 23 Jul 2018
@cdimitroulas This should centralize the title...
<Body style={{flex: 3, flexDirection:'row', justifyContent:'center'}}>
mohemos
on 13 Mar 2019
xDirection:'row'
Or { flex: 3, alignItems: "center" }
littlefinger42
on 11 Mar 2020
Related issues
chetnadaffodil
路
3Comments
muthuraman007
路
3Comments
sihemhssine
路
3Comments
agersoncgps
路
3Comments
natashache
路
3Comments
Most helpful comment
For anyone coming from Google, as mentioned in #605
<Body style={{flex: 3}}>fixes this issue for me.