This guide assumes basic familiarity with React Navigation. If you’re new to React Navigation, we recommend reviewing the official documentation first.

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
Launchtoday uses React Navigation to provide a robust and flexible navigation system for your mobile app. This guide will help you understand how navigation is structured and implemented in the app. 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
Common Use Cases:
  • 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 Diagram The app’s navigation follows a hierarchical structure with three main components:

​
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
The Root Navigator exists to provide a single source of truth for app navigation, create clear separation between public and private content, and manage the initial app loading experience.

​
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
The Auth Navigator exists to create a seamless authentication experience, handling the progression from initial login through email verification, with each screen building upon the previous step in the authentication process.

​
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)
The Home Navigator exists to provide a rich, feature-complete interface for authenticated users, combining multiple navigation patterns to create an intuitive and accessible user experience while maintaining consistent navigation state across the app.

​
Next Steps

The next step is to learn how to add new screens or navigators in the app.