This guide assumes basic familiarity with React Navigation. If you’re new to
React Navigation, we recommend reviewing the official
documentation first.
Quick Links
Add New Screens
Learn how to add new screens to the navigation
Root Navigator
Understand the main navigation controller
Auth Navigator
Learn about authentication flow navigation
Home Navigator
Explore the main app navigation structure
Navigation Patterns
Before diving into the app’s structure, let’s understand the two main navigation patterns used:Stack Navigation
Stack navigation provides a way to move between screens where each new screen is placed on top of a stack. Think of it like a deck of cards. Key Features:- Right-to-left transitions (iOS)
- Slide up/fade transitions (Android)
- Automatic back navigation
- History management
- Authentication flows
- Multi-step forms
- Feature-specific workflows
Drawer Navigation
Drawer navigation provides a side menu that can be pulled out from the edge of the screen, commonly used for top-level navigation. Key Features:- Left-side menu access
- Persistent throughout app
- Customizable menu items
- Gesture support
Navigation Structure

Root Navigator
The Root Navigator acts as the main traffic controller for the entire app’s navigation. Its primary purpose is to manage authentication state and direct users to the appropriate part of the app. Key functions:- Determines if user is logged in or not
- Shows loading states during authentication checks
- Routes users to either auth flows or main app content
Auth Navigator
The Auth Navigator handles the authentication flow using a stack-based navigation pattern. Its primary purpose is to guide users through the passwordless authentication process in a linear sequence. Key functions:- Manages the flow between authentication screens
- Provides a headerless navigation experience
- Implements TypeScript support for type-safe navigation
Home Navigator
The Home Navigator serves as the control center for authenticated users, managing the main application interface using a drawer-based navigation pattern. Its primary purpose is to provide access to all main features while maintaining a consistent and intuitive navigation experience. Key functions:- Manages drawer-based navigation with customizable side menu
- Handles nested stack navigation for complex features like payments
- Controls modal displays and bottom sheets for settings and information
- Manages user account actions (logout, delete account)