I would understand your idea as follows:
- You have 3 screens: PasswordVerify, HomeShopping, StorePage.
- You have a Drawer with 3 screens: ProfileScreen, MyListingsScreen, SellerDashBoardScreen.
- You want from PasswordVerify(or HomeShopping or StorePage) redirect to Drawer.
- You want after redirect, you can see your drawer and can press(or slide) to display drawer menu.
And i have an idea for your case:
- Define Drawer.
- Use Drawer(defined) like a Stack.
- Import Drawer in Stack.Navigator.
This is code:
const Drawer = createDrawerNavigator();
const DrawerNav = () => {
return (
<Drawer.Navigator initialRouteName="Home">
<Drawer.Screen name="ProfileScreen" component={ProfileScreen} />
<Drawer.Screen name="MyListingsScreen" component={MyListingsScreen} />
<Drawer.Screen name="SellerDashBoardScreen" component={SellerDashBoardScreen} />
</Drawer.Navigator>
);
};
const Stack = createNativeStackNavigator();
export default function App() {
return (
<NavigationContainer>
<Stack.Navigator>
<Stack.Screen name="PasswordVerify" component={PasswordVerify} />
<Stack.Screen name="HomeShopping" component={HomeShopping} />
<Stack.Screen name="StorePage" component={StorePage} />
<Stack.Screen name="DrawerNav" component={DrawerNav} />
</Stack.Navigator>
</NavigationContainer>
);
}
Answer from Vu Phung on Stack OverflowReact Navigation
reactnavigation.org โบ docs โบ drawer-based-navigation
Drawer navigation | React Navigation
To use this drawer navigator, import it from @react-navigation/drawer: (swipe right to open) ... import * as React from 'react'; import { View } from 'react-native'; import { createDrawerNavigator } from '@react-navigation/drawer'; import { createStaticNavigation, useNavigation, } from ...
React Navigation
reactnavigation.org โบ docs โบ drawer-navigator
Drawer Navigator | React Navigation
Drawer Navigator renders a navigation drawer on the side of the screen which can be opened and closed via gestures. This wraps react-native-drawer-layout.
android - Navigation and Drawer Navigation React-Native - Stack Overflow
So I had a navigation system in place already, and wanted to add a Drawer menu for specific navigations starting on the main shopping page once the user had logged in. The issue I am having is after More on stackoverflow.com
Left and right side drawers with React Navigation?
You need custom open/close functions in your second drawer's createDrawerNavigator options. (We made custom ones for both drawers just to keep things straightforward in the code) const LeftDrawerStack = createDrawerNavigator( { MainStack, // for me it's a bottomTabNavigator with even more stacks }, { contentComponent: (props) => , getCustomActionCreators: (_route, key) => ({ openLeftDrawer: () => DrawerActions.openDrawer({key}), closeLeftDrawer: () => DrawerActions.closeDrawer({key}), toggleLeftDrawer: () => DrawerActions.toggleDrawer({key}), }), }) export const AppStack = createDrawerNavigator( { LeftDrawerStack, }, { drawerPosition: 'right', contentComponent: (props) => , getCustomActionCreators: (_route, key) => ({ openRightDrawer: () => DrawerActions.openDrawer({key}), closeRightDrawer: () => DrawerActions.closeDrawer({key}), toggleRightDrawer: () => DrawerActions.toggleDrawer({key}), }), }) Then anywhere you would call toggleDrawer from this.props.navigation, just use toggleLeftDrawer or toggleRightDrawer instead More on reddit.com
Drawer for stack navigation
What you can do is create a stack navigator with any screens you wanted. Let's say you named it "StackScreens". Now create a Darwer navigator. Now for the first Drawer.Screen you can provide that "StackScreens" component. It can also work like you can create a drawer component first with any number of screens. And then you can use that component in Stack.Screen... Just use the initial component prop in both cases to land on the desired page. More on reddit.com
Expo router Drawer navigation for web?
I haven't tried it, but I'm curious to try https://zeego.dev/ for dropdown menus. If you mean a bottom drawer I haven't seen a good cross platform solution for that either. More on reddit.com
Videos
19:39
React Native Drawer Navigation with Expo Router - YouTube
10:19
Drawer Navigation in React Native | React Navigation Stack, Drawer,& ...
9. Step-by-Step Guide: Building a Custom Drawer Navigator | React ...
21:06
Custom Drawer Navigator in React Navigation 6 - YouTube
26:55
Drawer Navigation in Expo Router v2 | Expo SDK 49 | React Native ...
27:17
Expo Router Drawer Navigation with Custom Menu - YouTube
React Native
reactnative.dev โบ docs โบ drawerlayoutandroid
DrawerLayoutAndroid ยท React Native
October 8, 2025 - React component that wraps the platform DrawerLayout (Android only). The Drawer (typically used for navigation) is rendered with renderNavigationView and direct children are the main view (where your content goes).
Expo Documentation
docs.expo.dev โบ router โบ advanced โบ drawer
Drawer - Expo Documentation
November 5, 2025 - To edit the drawer navigation menu labels, titles and screen options specific screens are required as follows: ... import { Drawer } from 'expo-router/drawer'; export default function Layout() { return ( <Drawer> <Drawer.Screen name="index" // This is the name of the page and must match the url from root options={{ drawerLabel: 'Home', title: 'overview', }} /> <Drawer.Screen name="user/[id]" // This is the name of the page and must match the url from root options={{ drawerLabel: 'User', title: 'overview', }} /> </Drawer> ); }
npm
npmjs.com โบ package โบ @react-navigation โบ drawer
@react-navigation/drawer - npm
ยป npm install @react-navigation/drawer
Published ย Dec 08, 2025
Version ย 7.7.9
Repository ย https://github.com/react-navigation/react-navigation
React Navigation
reactnavigation.org โบ docs โบ drawer-layout
React Native Drawer Layout | React Navigation
A cross-platform Drawer component for React Native implemented using react-native-gesture-handler and react-native-reanimated on native platforms and CSS transitions on Web.
Medium
medium.com โบ @rafayk66 โบ navigation-in-react-native-part-1-drawer-how-to-370cbb62b22e
Navigation in React Native- Part 1: Drawer โ How to | by Abdur Mohammed | Medium
May 1, 2025 - import React from 'react'; import {NavigationContainer} from '@react-navigation/native'; import {createDrawerNavigator} from '@react-navigation/drawer'; import Dashboard from './src/screens/Dashboard'; import Profile from './src/screens/Profile'; import Settings from './src/screens/Settings'; const Drawer = createDrawerNavigator(); const App = () => { return ( <NavigationContainer> <Drawer.Navigator> <Drawer.Screen name="Dashboard" component={Dashboard} /> <Drawer.Screen name="Profile" component={Profile} /> <Drawer.Screen name="Setting" component={Settings} /> </Drawer.Navigator> </NavigationContainer> ); }; export default App;
DEV Community
dev.to โบ aaronksaunders โบ expo-router-drawer-navigation-from-the-docs-231k
Expo Router Drawer Navigation - From the Docs - DEV Community
July 26, 2023 - import { Text, StyleSheet, View } from "react-native"; import { Drawer } from "../_layout"; import { DrawerToggleButton } from "@react-navigation/drawer"; export default function Page() { return ( <View style={styles.container}> <Drawer.Screen options={{ title: "Settings", // <== NEW EDIT HERE headerShown: true, headerLeft: () => <DrawerToggleButton />, }} /> <Text style={{ fontSize: 24 }}> // <== NEW EDIT HERE Index page of Settings Drawer </Text> </View> ); } const styles = StyleSheet.create({ container: { flex: 1, backgroundColor: "#fff", alignItems: "center", justifyContent: "center", }, });
Expo Router
expo.github.io โบ react navigation โบ drawer navigation
Drawer navigation | Expo Router
import { // Import the creation function createDrawerNavigator, // Import the types DrawerNavigationOptions, } from "@react-navigation/drawer"; import { withLayoutContext } from "expo-router"; const { Navigator } = createDrawerNavigator(); // This can be used like `<Drawer />` export const Drawer = withLayoutContext< DrawerNavigationOptions, typeof Navigator >(Navigator);
JavaScript in Plain English
javascript.plainenglish.io โบ drawer-navigation-in-react-native-expo-with-source-code-426055f7e9f4
Drawer Navigation in React Native Expo (with Source Code) | by Rohit Kumar Thakur | JavaScript in Plain English
April 4, 2023 - const Drawer = createDrawerNavigator();export default function App() {return (<NavigationContainer><Drawer.Navigator initialRouteName="Home"><Drawer.Screen name="Home" component={HomeScreen} /><Drawer.Screen name="Settings" component={SettingsScreen} /></Drawer.Navigator></NavigationContainer>);} We set the initial route as the Home route. In the end, run the app using โnpm startโ in the terminal or command prompt. We will see something like this after the build. Itโs simple JavaScript code. Check out the Github code in case of any confusion or you can comment down below. ... Hello, my Name is Rohit Kumar Thakur. I am open to freelancing. I build React Native projects and am currently working on Python Django.
HowDev
how.dev โบ answers โบ what-is-drawer-navigation-in-react-native
What is Drawer Navigation in React Native?
In React Native, Drawer Navigation is a navigation pattern that allows you to create a side menu that slides in and out from the left or right side of the screen.
CodeSandbox
codesandbox.io โบ examples โบ package โบ @react-navigation โบ drawer
@react-navigation/drawer examples - CodeSandbox
Use this online @react-navigation/drawer playground to view and fork @react-navigation/drawer example apps and templates on CodeSandbox.
Medium
harithsenevi4.medium.com โบ integrating-stack-drawer-in-react-native-react-navigation-57dbc547c44b
Integrating Stack & Drawer in React Native (React Navigation) | by Haritha Senevirathne | Medium
February 9, 2020 - Go to React Navigation site and install the dependencies if you have not included it in your app already. ... Iโve created 4 screens as shown in the above image. ... Then inside your app.js import modules and screens as shown in the image. Then create a stack and drawer variables using createStackNavigator and createDrawerNavigator.
shadcn/ui
ui.shadcn.com โบ docs โบ components โบ drawer
Drawer - shadcn/ui
</DrawerDescription> </DrawerHeader> <ProfileForm className="px-4" /> <DrawerFooter className="pt-2"> <DrawerClose asChild> <Button variant="outline">Cancel</Button> </DrawerClose> </DrawerFooter> </DrawerContent> </Drawer> ) } function ProfileForm({ className }: React.ComponentProps<"form">) { return ( <form className={cn("grid items-start gap-6", className)}> <div className="grid gap-3"> <Label htmlFor="email">Email</Label> <Input type="email" id="email" defaultValue="[email protected]" /> </div> <div className="grid gap-3"> <Label htmlFor="username">Username</Label> <Input id="username" defaultValue="@shadcn" /> </div> <Button type="submit">Save changes</Button> </form> ) }