What are navigation patterns?
Beyond the basics, real apps need to pass data between screens, nest navigators, and switch entire flows — like showing login screens when logged out and the app when logged in. These patterns are the recurring shapes of mobile navigation.
Why it matters
The auth flow alone is in nearly every app, and doing it wrong leaves screens a logged-out user can still reach by going back. Passing params and nesting navigators correctly keeps flows clean. These patterns separate an app that feels solid from one with confusing dead ends.
What to learn
- Passing and typing route params
- Reading params on the destination screen
- Nested navigators and how routing flows through them
- Conditional auth flows: switching navigator trees
- Resetting navigation state
- Modals and presentation styles
- Passing data back to a previous screen
Common pitfall
Implementing login by pushing the app screens on top of the login screen. The user can swipe back to a logged-in screen, or back out to login while authenticated. Instead, conditionally render entirely different navigator trees based on auth state, so logged-out users simply cannot reach app screens.
Resources
Primary (free):
- React Navigation — Params · docs
- React Navigation — Auth flow · docs
- React Navigation — Nesting navigators · docs
Practice
Implement an auth flow: a logged-out tree with login/signup and a logged-in tree with the app, switched by auth state so back cannot cross between them. Pass a typed param to a detail screen and read it. Done when logging out returns to login and back cannot re-enter the app.
Outcomes
- Pass and type route params between screens.
- Nest navigators and route through them.
- Build an auth flow by switching navigator trees.
- Present modals and pass data back.