What is React Navigation?
React Navigation is the de facto routing library for React Native. It provides the navigation patterns users expect — stacks that push and pop screens, bottom tabs, and drawers — with native gestures and transitions. It is how multi-screen apps are built.
Why it matters
Almost every real app has more than one screen, and navigation is the backbone connecting them. Getting the navigator structure right early shapes the whole app; getting it wrong leads to tangled flows and back-button bugs. It is a core skill every RN role expects.
What to learn
- Stack navigator: push, pop, and the header
- Bottom tab navigator
- Drawer navigator
- The navigation container at the root
- Navigating and going back programmatically
- Typing navigation with TypeScript
- Native gestures and transitions
Common pitfall
Building one giant stack and pushing screens endlessly without structure, so the back stack grows forever and users cannot get home. Plan your navigator tree — tabs at the root, a stack per tab — and use reset or navigate appropriately so the back behavior matches what users expect.
Resources
Primary (free):
- React Navigation — Getting started · docs
- React Navigation — Stack navigator · docs
- React Navigation — Tab navigator · docs
Practice
Build an app with bottom tabs, where one tab contains a stack so you can push a detail screen and pop back. Navigate between tabs and push/pop within the stack. Type the navigator. Done when the back gesture and button behave as a user would expect across tabs and the stack.
Outcomes
- Structure an app with stack, tab, and drawer navigators.
- Navigate and go back programmatically.
- Type navigation with TypeScript.
- Plan a navigator tree that gives sensible back behavior.