CODEWITHSUNDEEP
react-nativeexpo
Staghouse
Staghouse

Reputation: 197

React Native - Stacking app header content

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?

Upvotes: 1

Views: 171

Answers (2)

Staghouse
Staghouse

Reputation: 197

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>

Upvotes: 1

Nicolai Lissau
Nicolai Lissau

Reputation: 8332

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

Upvotes: 0

Related Questions