Add a header to BottomTabNavigator in v.5

Question

I've recently started coding in React Native and cannot find a good way to add a header to my views. I'm using createMaterialBottomTabNavigator() and therefor I cannot add a createStackNavigator().

So my question is quite simple. How can I add a header to React Native using BottomTabNavigator?

const MaterialBottomTab = createMaterialBottomTabNavigator()

export default function App() {
  return (
    <NavigationContainer>
      <MaterialBottomTab.Navigator
        initialRouteName="Home"
        activeColor="white"
        shifting={true}
        barStyle={styles.bottomBarStyle}
      >
        <MaterialBottomTab.Screen 
          name="Home" 
          component={Home}  
          options={{
            tabBarLabel: "Home",
            tabBarIcon: ({ color }) => (
              <MaterialIcons name="home" color={color} size={25}/>
            )
          }}
        />
        <MaterialBottomTab.Screen 
          name="History" 
          component={History}
          options={{
            tabBarLabel: "History",
            tabBarIcon: ({ color }) => (
              <MaterialIcons name="history" color={color} size={25}/>
            )
          }} 
        />
        <MaterialBottomTab.Screen 
          name="New"
          component={AddFood} 
          options={{
            tabBarLabel: "New",
            tabBarIcon: ({ color }) => (
              <MaterialIcons name="add" color={color} size={25}/>
            )
          }}
        />
      </MaterialBottomTab.Navigator>
    </NavigationContainer>
  );
}

Answer 1

If you turn all your screens for each tab into stack navigators, they will have the header. Or you can create a custom header component that you put in each of those screens without converting them into stacks.

Docs here : https://reactnavigation.org/docs/nesting-navigators/