I'm trying to stack content in the Navigation top bar that is being set using the setOptions
method. However, I can't seem to stack vertically two pieces of content. Instead, I can only show a single piece of content. Keep in mind this header bar has no true navigation linking and is purely a "title" bar with text and imagery. It is also within the same component I use to actually create my navigation with createBottomTabNavigator()
.
What I would like is, pseudo-visually:
<Text><Image><Text>
<Text>
Here is my code:
navigation.setOptions({
headerTitle: (
<Text
style={{
flex: 1,
flexDirection: 'row',
flexWrap: 'wrap',
}}
>
<Text
style={{
fontSize: 16,
lineHeight: 16,
}}
>
Left Text{' '}
</Text>
<Image
source={require('../assets/images/icon-large.png')}
style={{ resizeMode: 'contain', width: 25, height: 25 }}
/>
<Text
style={{
fontSize: 16,
lineHeight: 16,
}}
>
{' '}
Right Text
</Text>
</Text>
),
});
which gives me, pseudo-visually:
<Text><Image><Text>
Now, i've tried various layout's of <View>
and <Text>
and just cant seem to get the stacking visual im looking for. I've tried wrapping it all with a <View>
and then a last <Text>
but I believe the headerTitle
property needs a <Text>
or type string assigned to it.
Any suggestions how I can get another <Text>
underneath (and centered) what I have already?
<Text>
can not have children. Use a<View>
as wrapper instead.