Choosing a React Navigation Navigator: Stack, Tabs, or Drawer
Match your navigator to your app's information architecture: stack for hierarchical flows, bottom tabs for three to five top-level sections, and drawer for secondary screens.
ReadMeFeed / Community knowledge
Real questions. Useful conversations. Find the people who know your stack.
Match your navigator to your app's information architecture: stack for hierarchical flows, bottom tabs for three to five top-level sections, and drawer for secondary screens.
Protect React Navigation screens by conditionally rendering Login or Home and re-validating tokens on focus with useFocusEffect.
React Navigation keeps screens mounted after you navigate away, so useEffect fires only once. useFocusEffect scopes side effects to focus events—if you memoize the callback and clean up properly.
Stop deep links from creating dead-end screens. Learn how to use nested linking configurations in React Navigation to automatically reconstruct the back stack.
Move React Navigation route and parameter mistakes from runtime to compile time with a TypeScript ParamList.
Screen opens but route.params is undefined after push or replace? Check the param object, key names, deep link config, navigator version, and re-render resets in order.
A flat navigator resets history when users switch tabs. Learn how to nest a stack navigator inside a tab navigator in React Navigation 6.x so each tab keeps its own state.
When a deep link fails in a React Navigation v6 app, the issue often lies in OS‑level scheme registration, linking configuration, or initial URL handling. This guide walks through a diagnostic table, ordered checks, and concrete fixes to get your URLs working reliably on iOS and Android.
React Navigation v6's TypeScript param lists turn route names and params into compile-time contracts. Here's how to set them up, compose nested navigators, and know where the safety ends.