How do I add a Navigation Drawer over the Tabs Template

[TurtleWolf1]

I usually just start with the 2 tab template from expo in ReactNative…

sometimes copy it out to 5 tabs. Now I want to add drawer navigation that could be opened regardless of which tab you’re currently on… So where should I be trying to add it, to the Navigation Container or the Root Navigator?

It seems like they both want me to pass it in as a prop, which I thought I was…

/**
 * If you are not familiar with React Navigation, check out the "Fundamentals" guide:
 * https://reactnavigation.org/docs/getting-started
 *
 */
import { NavigationContainer, DefaultTheme, DarkTheme } from '@react-navigation/native';
import { createStackNavigator } from '@react-navigation/stack';
import * as React from 'react';
import { ColorSchemeName } from 'react-native';

import NotFoundScreen from '../screens/NotFoundScreen';
import StorybookUIRoot from '../storybook';
import { RootStackParamList } from '../types';
import BottomTabNavigator from './BottomTabNavigator';
import LinkingConfiguration from './LinkingConfiguration';

// import { createDrawerNavigator } from "@react-navigation/drawer";
// const Drawer = createDrawerNavigator();
import DrawerNavigator from "./DrawerNavigator";
{/* <Drawer.Navigator initialRouteName="Home"> */ }
{/* <Drawer.Screen name="Home" component={BottomTabNavigator} /> */ }
{/* <Drawer.Screen name="StoryBook" component={StorybookUIRoot} /> */ }
{/* </Drawer.Navigator> */ }

export default function Navigation({ colorScheme }: { colorScheme: ColorSchemeName }) {
  return (
    <NavigationContainer
      linking={LinkingConfiguration}
      theme={colorScheme === 'dark' ? DarkTheme : DefaultTheme}>
      {/* <DrawerNavigator /> */}
      <RootNavigator />
    </NavigationContainer>
  );
}

// A root stack navigator is often used for displaying modals on top of all other content
// Read more here: https://reactnavigation.org/docs/modal
const Stack = createStackNavigator<RootStackParamList>();

function RootNavigator() {

  return (
    <Stack.Navigator screenOptions={{ headerShown: false }}>
      <Stack.Screen name="Root" component={BottomTabNavigator} />
      {/* <Stack.Screen name="NotFound" component={NotFoundScreen} options={{ title: 'Oops!' }} /> */}
      <Stack.Screen name="NotFound" component={StorybookUIRoot} options={{ title: 'oneBook' }} />
    </Stack.Navigator>
  );
}