Drawer Navigator: Your App's Slide-Out Main Menu
A Drawer Navigator is your app's slide-out 'hamburger' menu. Use it for primary navigation between distinct sections like Home, Profile, and Settings. A common footgun is misconfiguring backBehavior, leading to non-intuitive back button actions for users.
Why it exists
Mobile screens have limited real estate. A permanent navigation bar isn't always feasible, especially for apps with many primary sections. The drawer pattern hides this main navigation off-screen, making it available on demand without constantly cluttering the UI.
The mental model
Think of the Drawer Navigator as a desk with a main workspace (the current screen) and a side drawer. The drawer holds your main tools and destinations (other screens like Settings, Profile, Logout). You can slide it open anytime to grab a different tool, which then becomes your new workspace. It's for changing your primary context, not for actions within the current one.
How it works
The Drawer Navigator is a wrapper component from @react-navigation/drawer. You create an instance with createDrawerNavigator() and define your screens inside it. Each <Drawer.Screen> has a name and a component. React Navigation then handles rendering the drawer UI, the menu icon in the header, and the swipe gestures to open and close it. Under the hood, it uses react-native-gesture-handler for gestures and react-native-reanimated for animations.
When to use it
Use it for primary, app-wide navigation, especially with five or more items where a bottom tab bar would feel cluttered. It's a good choice when navigation items are of equal importance but don't need to be constantly visible. Examples: navigating between a Home feed, Messages, User Profile, and Settings.
When not to use it
Avoid using a drawer for navigation that is contextual to a single screen; a Stack Navigator is better for that. It's also not ideal for two to four main items where a Bottom Tab Navigator provides faster, one-tap access. Don't hide critical, high-frequency user flows deep inside a drawer.
One canonical example
A social media app might have a Home feed, a Profile screen, and Settings. These are defined as screens within a Drawer.Navigator. A user on the Home screen can swipe from the left to open the drawer, then tap 'Profile' to navigate. The backBehavior prop is key here; setting it to history means pressing back on the Profile screen takes you back to Home, which is often the expected behavior.
Interview question
When is a Drawer Navigator the most appropriate choice for an app's primary navigation?
- a.For an app with 2-4 critical, frequently accessed main sections needing constant visibility.
- b.To display contextual options or filters that apply only to the currently viewed content.
- c.To manage 5 or more distinct, top-level sections that don't require constant on-screen presence.Correct
- d.When navigating through a series of detailed steps or sub-screens within a single feature.
Why? this is the answer
The card states Drawer Navigators are best for "primary, app-wide navigation, especially with five or more items where a bottom tab bar would feel cluttered." Option C directly reflects this, while options A and B describe use cases for Stack and Bottom Tab Navigators, respectively.
Just read this? Test yourself on what you have been reading.
Read the original → reactnavigation.org
- #react native
- #navigation
- #ui component
- #drawer navigator
You just looked this up. Could you explain it out loud?
That is the part interviews actually test. Tezvyn takes questions like this one and gives you what the interviewer is really checking, the answer that lands, and the mistake that ends the conversation, in the four minutes before your next meeting.
The iPhone app is on the way
We are building it. Until it lands, nothing here is held back from you: every interview card, your saved cards, streaks and the job board all work in Safari, plus hundreds of free practice quizzes of thirty questions each. Sign in and it all carries over to the app the day it arrives.
Want it as an icon? Tap Share at the bottom of Safari, then Add to Home Screen. It opens full screen and the cards you have read stay available offline.
We are hiring for this. Open roles that interview on react native — each one lists the topics its interview covers.
See open roles