Mobile App Navigation Patterns Cheat Sheet

Updated 2026-05-16

Next Topic: Mobile App Performance Optimization Cheat Sheet

🧠Study flashcards on this topic78 cards · spaced repetition→

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, 78 flashcards. Below is a complete table-by-table outline of this topic, spanning foundational concepts through advanced details.

Table 1: Core Navigation PatternsTable 2: React Navigation (React Native)Table 3: Flutter NavigationTable 4: Android Jetpack NavigationTable 5: iOS UIKit NavigationTable 6: SwiftUI NavigationTable 7: Deep Linking and Universal LinksTable 8: Navigation State ManagementTable 9: Navigation Gestures and AnimationsTable 10: Programmatic NavigationTable 11: Nested and Hierarchical NavigationTable 12: Authentication and Protected RoutesTable 13: Accessibility and Screen ReadersTable 14: Testing NavigationTable 15: Platform-Specific ConsiderationsTable 16: Performance and Optimization

Quick IndexSubscribe to unlock

A jump-to index of every table row in this cheat sheet.

Mind MapSubscribe to unlock

An interactive map of every table and concept in this topic.

These are the building blocks every mobile app combines to move users between screens—stacks for drilling down, tabs for jumping between primary sections, drawers and bottom sheets for the overflow, and deep links for arriving from outside the app entirely. Learn the mental model behind each one and most framework-specific APIs become obvious, because they're all just implementations of these same handful of ideas.

Pattern	Example	Description
Stack navigation	`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
Tab navigation	`<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
Drawer navigation	`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
Modal presentation	`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).
Deep linking	`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).
Universal Links (iOS)	`https://example.com/item/42` → opens app if installed, else web	• HTTPS links that open native app seamlessly without scheme prompts • Requires domain ownership verification via `apple-app-site-association` file • Fallback to website if app not installed
App Links (Android)	`https://example.com/product/42` → verified app intent	• Android's verified deep linking standard using HTTPS domains • Requires `assetlinks.json` on your domain to prove ownership. Prevents unverified apps from hijacking your links.
Nested navigation	Tab bar with stack navigators inside each tab	• One navigator rendered inside another • e.g., each tab contains its own stack. Enables complex hierarchies like tab → stack → modal • Each nested navigator manages its own back stack independently
Breadcrumb navigation	`Home > Category > Product`	• Hierarchical trail showing the user's path from root to current screen. Rare on mobile due to limited screen space • more common in tablet apps or web-mobile experiences with deep hierarchies
Bottom sheet	Draggable panel from bottom edge	• Partial-screen overlay for secondary content, actions, or navigation options • User can drag to expand, collapse, or dismiss • Less intrusive than full modals • popular for filters, options, and contextual actions

React Navigation is the de facto standard for React Native, and almost everything you do flows through two things: the navigator factories that build your stacks, tabs, and drawers, and the navigation prop methods you call to move around. The subtle distinctions here matter—navigate versus push, and remembering useFocusEffect for refreshing data on return—are exactly the ones that trip people up in real apps.

API	Example	Description
createNativeStackNavigator	`const Stack = createNativeStackNavigator()` `<Stack.Navigator>` `<Stack.Screen name="Home" />` `</Stack.Navigator>`	Native stack using platform APIs (UINavigationController on iOS, Fragment on Android). Animations and gestures handled by native code for better performance than JS-based stacks.

The rest of this section is part of the full cheat sheet

Flutter carries two generations of navigation side by side—the original imperative Navigator.push/pop (1.0) and the declarative Navigator 2.0 that GoRouter wraps in a far friendlier package. For new apps GoRouter is the default choice, but you'll still meet MaterialPageRoute and named routes in older codebases, so it helps to recognize all of them.

API	Example	Description
Navigator.push (1.0)	`Navigator.push(context,` `MaterialPageRoute(builder: (_) => DetailsScreen())` `)`	• Imperative API where you explicitly push routes onto the navigator stack. Platform-agnostic • works everywhere but requires manual route management • Original Flutter navigation approach

The rest of this section is part of the full cheat sheet

Jetpack Navigation centers everything on a single navigation graph and a NavController that walks it—your destinations and the actions between them live in one place, and the back stack is managed for you. Safe Args gives you compile-time type checking on arguments, and the same NavController model now spans both the older Fragment world and Jetpack Compose.

Component	Example	Description
NavController	`val navController = findNavController(R.id.nav_host)` `navController.navigate(R.id.detailsFragment)`	Central API for navigation operations in Jetpack Navigation. Manages back stack, handles deep links, triggers transitions. Obtained from NavHostFragment or NavHost composable.

The rest of this section is part of the full cheat sheet

Table 1: Core Navigation Patterns

Pattern	Example	Description
Stack navigation	`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
Tab navigation	`<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
Drawer navigation	`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
Modal presentation	`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).
Deep linking	`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).
Universal Links (iOS)	`https://example.com/item/42` → opens app if installed, else web	• HTTPS links that open native app seamlessly without scheme prompts • Requires domain ownership verification via `apple-app-site-association` file • Fallback to website if app not installed
App Links (Android)	`https://example.com/product/42` → verified app intent	• Android's verified deep linking standard using HTTPS domains • Requires `assetlinks.json` on your domain to prove ownership. Prevents unverified apps from hijacking your links.
Nested navigation	Tab bar with stack navigators inside each tab	• One navigator rendered inside another • e.g., each tab contains its own stack. Enables complex hierarchies like tab → stack → modal • Each nested navigator manages its own back stack independently
Breadcrumb navigation	`Home > Category > Product`	• Hierarchical trail showing the user's path from root to current screen. Rare on mobile due to limited screen space • more common in tablet apps or web-mobile experiences with deep hierarchies
Bottom sheet	Draggable panel from bottom edge	• Partial-screen overlay for secondary content, actions, or navigation options • User can drag to expand, collapse, or dismiss • Less intrusive than full modals • popular for filters, options, and contextual actions

Table 2: React Navigation (React Native)

API	Example	Description
createNativeStackNavigator	`const Stack = createNativeStackNavigator()` `<Stack.Navigator>` `<Stack.Screen name="Home" />` `</Stack.Navigator>`	Native stack using platform APIs (UINavigationController on iOS, Fragment on Android). Animations and gestures handled by native code for better performance than JS-based stacks.

Table 3: Flutter Navigation

API	Example	Description
Navigator.push (1.0)	`Navigator.push(context,` `MaterialPageRoute(builder: (_) => DetailsScreen())` `)`	• Imperative API where you explicitly push routes onto the navigator stack. Platform-agnostic • works everywhere but requires manual route management • Original Flutter navigation approach

Table 4: Android Jetpack Navigation

Component	Example	Description
NavController	`val navController = findNavController(R.id.nav_host)` `navController.navigate(R.id.detailsFragment)`	Central API for navigation operations in Jetpack Navigation. Manages back stack, handles deep links, triggers transitions. Obtained from NavHostFragment or NavHost composable.