Navigation

expo-router  simplifies app navigation by building on top of the popular React Navigation library, abstracting away complex state management and screen transitions.

• Declarative Structure: Navigation is defined using components, making it intuitive and easy to visualize the app’s flow.
• File-System Routing: Unlike conventional React Native where you define navigation in a single root component (App.js), Expo Router uses the file system. Every file inside the app/ directory automatically becomes a route.
• Root Layout (app/_layout.tsx): The core of the navigation setup is handled in the app/_layout.tsx file. This is where you define the overall structure of your app, such as shared headers, tabs, drawers, and authentication logic, applying them to all underlying screens.

That’s a key capability for a scalable application! Integrating Drawer Navigation, Authorized/Protected Navigation, and Tab Navigation simultaneously is typically handled in the main Root Layout of your application using Expo Router.

Here is how your navigation hierarchy is generally structured to achieve this, followed by a conceptual example.

Your navigation logic uses group folders to clearly define the application’s structure. Based on your provided file structure, the logic flow needs to be updated to reference (drawer) and (tabs) groups instead of (app) and home.

Here is the revised section detailing the exact role of each layout file in your architecture:

🧭 Integrated Navigation Logic (Architect’s View)

Your application uses three layers of nested layouts to achieve authorized access, drawer navigation, and tab navigation simultaneously.

1. Root Layout (app/_layout.tsx) 🔒

This is the very top level of your application. It acts as the gatekeeper, controlling access based on the user’s authentication status.

• Logic: Uses the useAuth hook to check the user’s isAuthenticated status.
• Renders: Conditionally renders the public (auth) group or the protected (drawer) group.
  • Public Flow: Renders the (auth)/_layout.tsx group.
  • Protected Flow: Renders the (drawer)/layout.tsx group.

2. Drawer Layout (app/(drawer)/layout.tsx) 🎨

This layout only renders if the user is authenticated. It establishes the main structural shell for the entire protected application.

• Structure: This file defines and configures the Drawer Navigator.
• Contents: All routes directly nested within the (drawer) group (including the entire (tabs) group) become the primary items in the side menu.

3. Tab Layout (app/(drawer)/(tabs)/layout.tsx) 📱

This is a route nested within the Drawer, specifically defining the primary screens the user interacts with most often.

• Structure: This file defines and configures the Tab Navigator (the persistent bottom bar).
• Contents: Files or groups nested within (tabs)—such as (home) and (settings)—become the individual, selectable tabs on the bar.

Conceptual File Structure

This structure ensures all three navigation types are active and correctly nested:

app/
├── _layout.tsx           <-- 1. ROOT LAYOUT: Handles Auth Check (public vs protected)
├── (auth)/               <-- Unprotected Screens (Login, Register)
│   └── _layout.tsx
│
└── (drawer)/                <-- 2. PROTECTED APP CONTENT
│   ├── (tabs)/
│   │   ├── (home)/
│   │   ├── (settings)/
|   |   └── _layout.tsx   <-- 3. Defines the TAB NAVIGATOR (Tabs appear here)
|   └── _layout.tsx       <-- Defines the DRAWER NAVIGATOR
│   └── dashboard.tsx             // Example screen directly in the Drawer

Add New Tabs or Screens

To add new tabs to the Tab Navigator, simply create new files under the (tabs) directory. Each file will automatically become a new tab in the Tab Navigator.

! If you want to tab it has nested screens, create new folder with () and add _layout.tsx file for tab navigator.

For example, to add a “Profile” tab:

app/
└── (drawer)/
		├── (tabs)/
		│   ├── ...
		│   ├── ...
		│   ├── (profile)/          // New folder for Profile tab
		│   │   └── _layout.tsx     // Tab Navigator for Profile tab
		│   │   └── info.tsx        // Profile Info Screen
		│   │   └── edit.tsx        // Profile Edit Screen
		│   └── _layout.tsx         // Tab Navigator definition

If you want to add more screens to the drawer, simply add them under the (drawer) directory.

If you dont need (drawer) navigation you can rename it to (app). And change all keywords for navigation replace (drawer) to (app).