Mobile app navigation determines how users move through your application's screens and content—from stack-based hierarchies that mimic physical depth to tab bars that keep primary actions within thumb reach. Every framework (React Navigation, Flutter's GoRouter, Jetpack Navigation, SwiftUI NavigationStack) implements these patterns differently, yet they share core principles: deep linking must work, the back button should never surprise, and navigation state must survive process death. The biggest shift in 2026 is declarative over imperative—modern navigation systems let you describe where the user should be, not how to get there—and the rise of type-safe navigation that catches broken routes at compile time. One non-obvious insight: navigation is where most mobile memory leaks hide. Every pushed screen holds references; every listener stays attached. If you're not actively managing lifecycle cleanup and weak references, navigation will consume your heap faster than any other subsystem.
What This Cheat Sheet Covers
This topic spans 16 focused tables and 120 indexed concepts. Below is a complete table-by-table outline of this topic, spanning foundational concepts through advanced details.
Table 1: Core Navigation Patterns
| Pattern | Example | Description |
|---|---|---|
navigator.push('Details', {id: 42})navigator.pop() | • Hierarchical navigation where screens stack on top of each other • back action pops the top screen. Platform-native gestures (swipe-from-edge on iOS, system back button on Android) automatically pop the stack • Most common pattern for drilling down into content | |
<BottomTabs> <Tab name="Home" /> <Tab name="Profile" /></BottomTabs> | • Flat navigation between 3-5 primary sections displayed in a persistent bar (bottom on mobile, side on tablets). Each tab maintains its own navigation state and back stack • Dominant pattern for content apps | |
navigation.openDrawer()navigation.closeDrawer() | • Side panel that slides in from the edge (usually left) containing secondary navigation, settings, or account actions. Hidden by default to save screen real estate • opened via hamburger icon or edge swipe • Best for overflow destinations that don't fit in tabs | |
navigation.navigate('Modal', {mode: 'modal'})navigation.goBack() | • Full-screen overlay that slides up from bottom (iOS) or fades in (Android) to interrupt the main flow for focused tasks like editing, confirmation dialogs, or onboarding • User must explicitly dismiss (close button or swipe-down gesture). | |
myapp://product/123 links to product detail screen | • URL-based navigation that opens a specific screen directly from outside the app (email, web, notification). Maps URLs to navigation state • handles both custom schemes ( myapp://) and https Universal Links (iOS) / App Links (Android). |