React Native Navigation: Stack, Tabs, and Deep Linking
Implement navigation in React Native with React Navigation—stack, tabs, and deep links.
Navigation is central to mobile UX. Here’s how to structure it in React Native with React Navigation.
React Native navigation patterns
React Navigation
Stack — Push and pop screens. Use for flows (auth, onboarding, detail). @react-navigation/native-stack is the default.
Tabs — Bottom or top tabs. Use for main app sections (Home, Search, Profile). @react-navigation/bottom-tabs.
Drawer — Side drawer. Use for many top-level sections or settings. @react-navigation/drawer.
Nesting — Combine: e.g. tab navigator with a stack per tab. Wrap in NavigationContainer.
Patterns
Params — Pass params via navigation.navigate('Screen', { id: 1 }). Read with route.params. Type with TypeScript for safety.
Deep linking — Configure scheme and paths; React Navigation links screens to URLs. Use for push notifications and sharing.
State persistence — Persist navigation state so the app restores the same screen after kill. Use the built-in persistence option.
Navigation library usage (RN apps):
Navigation library in React Native
Best practices
Keep navigators shallow where possible. Use a single NavigationContainer. Type your navigator and params. Test deep links on both platforms.
React Navigation in practice:
Takeaway
React Navigation is the standard for RN. Start with a stack and tabs; add deep linking and persistence when needed. Expo Router offers file-based routing if you prefer that model.
