in

Combine Drawer.Navigator and Stack.Navigator without creating separate navigation bars


I would like to have stack and drawer navigators use the same navigation bar. However, both are creating their own navigation bars refer to the below image making the app look messy. How can I achieve that?

Below in my code:

import * as React from "react";
import { createStackNavigator } from "@react-navigation/stack";
import { createDrawerNavigator } from "@react-navigation/drawer";
import Home from "../screens/Home";
import Contact from "../screens/Contact";
import About from "../screens/About";

const Stack = createStackNavigator();
const Drawer = createDrawerNavigator();

const HomeNavigation = (props) => {
  return (
    <Stack.Navigator initialRouteName="Home"         
    screenOptions={{
        headerTitleAlign:'center',
        //headerShown: false
        }}
    >
      <Stack.Screen name="Home" component={Home} />
      <Stack.Screen name="Contact" component={Contact} />
      <Stack.Screen name="About" component={About} />
    </Stack.Navigator>
  );
};

const MenuNavigation = (props) => {
  return (
    <Stack.Navigator initialRouteName="Home"     
    screenOptions={{
        headerTitleAlign:'center',
        //headerShown: false
        }}>
      <Stack.Screen name="Menu" component={About} />
    </Stack.Navigator>
  );
};

const DrawerNavigation = () => {
  return (
    <Drawer.Navigator>
      <Drawer.Screen name="HomeNavigation" component={HomeNavigation} /> 
      <Drawer.Screen name="MenuNavigation" component={MenuNavigation} />
    </Drawer.Navigator>
  );
};

export default DrawerNavigation;



Source: https://stackoverflow.com/questions/70534407/combine-drawer-navigator-and-stack-navigator-without-creating-separate-navigatio

Run CodeServer on Google Colab using Inlets in less than 60 secs using your own domain

COAI Supports Use of Street Furniture to Deploy 5G Small Cells