Navigation Concepts: Stack, Tab, and Drawer

Every non-trivial app has more than one screen, and something has to decide which screen is showing, how the user got there, and how they get back. That's navigation, and in React Native it isn't a core framework feature — react-native itself has no built-in notion of "screens" at all. The library the ecosystem has settled on for this is React Navigation, to the point that "learning navigation in React Native" is, in practice, learning React Navigation's concepts.

This lesson is deliberately about the concepts rather than the library's exact current API surface, which changes across versions. The three patterns below — stack, tab, drawer — have been stable ideas for as long as mobile apps have needed navigation, regardless of which specific library version implements them.

Stack: push and pop, like browser history

A stack navigator models navigation the way a browser models history: each screen you navigate to is pushed on top of the previous one, and going back pops it off, returning to whatever was underneath.

1. Step 1

   Screen A is showing

   The stack has one screen on it: A.

2. Step 2

   Navigate to B

   B is pushed on top. The stack is now [A, B], with B visible.

3. Step 3

   Navigate to C

   C is pushed on top of B. The stack is now [A, B, C].

4. Step 4

   Go back

   C is popped off. B becomes visible again, with A still underneath it.

This is the pattern behind a back button (and, on iOS, the edge-swipe gesture) — there's always a well-defined "previous screen" to return to, because it's still sitting right there underneath on the stack. A product detail page pushed from a list, which itself might push a reviews screen, which might push a single review's detail, is a textbook stack: three levels deep, and "back" unwinds them one at a time in the exact reverse order they were opened.

Tab: persistent, parallel sections

A tab navigator solves a different problem: several independent areas of the app that the user should be able to jump between instantly, without any sense of "back" between them. Think a bottom tab bar with Home, Search, and Profile — switching tabs isn't pushing a new screen on top of anything, and switching back to Home doesn't feel like "going back," it feels like returning to a place that was always still there.

Drawer: a slide-out side menu

A drawer navigator is a menu that lives off-screen to one side and slides in — usually triggered by a hamburger icon or an edge swipe — to let the user jump to one of several destinations, then slides back out of the way.

None of these three is "better" in the abstract — they answer different questions. Stack answers "how did I get here, and how do I get back." Tab answers "which of these persistent areas am I in." Drawer answers "where else in the app could I jump to from here, occasionally."

Real apps nest them

Almost no real app uses just one of these in isolation. The extremely common shape is a tab navigator as the outermost structure, where each tab's content is itself a stack navigator:

Tab Navigator
├── Home Tab → Stack Navigator (Home list → Post detail → Comments)
├── Search Tab → Stack Navigator (Search results → Profile detail)
└── Profile Tab → Stack Navigator (Profile → Settings → Edit profile)

The tab bar stays visible and persistent the entire time — switching tabs never unwinds anything. But drilling into a post from the Home tab pushes a detail screen onto that tab's own stack, without touching Search's or Profile's stacks at all. Switch to Search and back to Home, and Home is still sitting exactly where you left it, detail screen and all. A drawer can wrap the whole thing too, offering a side menu with destinations (like "Settings" or "Sign out") that don't belong in the persistent tab bar.

This nesting is precisely why the three patterns are taught as separate concepts rather than one combined "navigation" idea — a real app's navigation structure is usually a small tree of these, not a single flat choice of one.

What to remember

• React Navigation is the ecosystem-standard library for navigation in React Native; there's no built-in "screens" concept in core React Native itself.
• A stack navigator pushes/pops screens like browser history — there's always a well-defined previous screen underneath.
• A tab navigator switches between persistent, parallel sections with no push/pop or back relationship between them.
• A drawer navigator is an off-screen side menu that slides in and out for less-frequent destinations.
• Real apps nest these — most commonly a tab navigator whose individual tabs are each their own stack navigator.