Search code examples
react-nativeexporeact-navigationreact-native-tabnavigator

react-navigation: header above tab nav


I'm trying to get the Recipes header in the following image to display above the tab navigator (home and settings in the image below). Currently I have the tab navigator in a stack navigator. On the stack navigator I defined a title and headerTitle but neither are displaying. How can I get the header above? Thanks!

This is what it looks like currently: enter image description here

I want to achieve something similar to this:

enter image description here

This is my stack nav code:

    <NavigationContainer>
      <Tab.Navigator
        shifting={false}
        labeled={false}
        initialRouteName="Home"
        activeColor="#32CA81"
        barStyle={styles.navContainer}
        screenOptions={{
          headerShown: false,
        }}
        tabBarOptions={{
          activeTintColor: '#e91e63',
        }}
      >
        <Tab.Screen
          name="Camera"
          component={Camera}

          options={{
            tabBarLabel: "Camera",
            tabBarIcon: ({ color }) => (
              <MaterialIcons name="camera-alt" color={color} size={26} />
            ),
          }}
        />
        <Tab.Screen
          name="Home"
          component={Home}
          options={{
            title: "Recipes",
            headerTitle: "Recipes",
            tabBarLabel: "Recipes",
            tabBarIcon: ({ color }) => (
              <MaterialIcons name="restaurant-menu" color={color} size={26} />
            ),
          }}
        />
        <Tab.Screen
          name='Saved'
          component={SavedScreen}
          options={{
            shifting: true,
            tabBarLabel: 'Saved',
            tabBarIcon: ({color}) => (
              <MaterialIcons name='favorite' color={color} size={26} />
            ),
          }}
        />
      </Tab.Navigator>
    </NavigationContainer>

This is my tab nav code:

return (
    <Tab.Navigator>
      <Tab.Screen name="Home" component={Recipes} />
      <Tab.Screen name="Settings" component={Recipes} />
    </Tab.Navigator> 
  );

Solution

  • I ended up wrapping the component with the tabs, with a stack navigator. I put the text component and tabs on the same stack screen.