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:
I want to achieve something similar to this:
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>
);
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.