React Native - Stacking app header content - react-native

Question

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?

Answer 1

With a combination of this and moving the navigation settings to the Stack.Screen I was able to get what I wanted. My problem seemed to be that I was trying to set the header options within BottomTabNavigator. Instead, if I passed in a custom "Header" component, it rendered the way I wanted it. Like so:
<NavigationContainer>
<Stack.Navigator>
<Stack.Screen
name="Scroll Rack"
options={{ headerTitle: (props) => <Header /> }}
component={BottomTabNavigator}
/>
</Stack.Navigator>
</NavigationContainer>

Answer 2

You need to have a View which behaves as a row inside a View which behaves as a column. In the example below, the first View as flexDirection: 'column' as default.
<View style={{backgroundColor: "#ff0000"}}>
<View style={{flexDirection: 'row', justifyContent: "space-between", backgroundColor: "#00ff00"}}>
<Text>Left</Text>
<Image
source={{uri: "https://miro.medium.com/max/712/1*EnF9uIN_u2_X7ey24lB7Tg.png"}}
style={{ resizeMode: 'contain', width: 25, height: 25 }}
/>
<Text>Right</Text>
</View>
<Text style={{textAlign: "center"}}>Bottom</Text>
</View>
Here's a snack of it