Navigation & Routing
Relevant source files
The following files were used as context for generating this wiki page:
Introduction
The ElmecV2 application utilizes Expo Router (built on top of React Navigation) to provide a file-based routing system. This architecture ensures a seamless transition between different application states, such as authentication, the main user dashboard, and administrative views. The routing logic is designed to be cross-platform, supporting iOS, Android, and Web environments.
Sources: README.md:28-28, README.md:43-43, VALIDACION-COMPLETA.md:144-144
The navigation system serves as the backbone for the application's "Offline First" approach and handles complex data flows, including deep linking for chat rooms and specific service requests. It integrates directly with the authentication state to enforce security and redirect unauthorized users to the login interface.
Sources: README.md:44-44, FIXES-APLICADOS.md:129-138
Routing Architecture
The application is structured into several main route groups and layouts that define the hierarchy of the user interface.
Root Level Routing
The entry point of the application (app/index.tsx) acts as a traffic controller. It checks the user's authentication status and redirects them accordingly:
- Authenticated: Users are redirected to the
/(tabs)route. - Unauthenticated: Users are redirected to the
/authroute. - Loading State: A loading screen is displayed while the authentication check is in progress.
Sources: FIXES-APLICADOS.md:129-138
This diagram illustrates the initial redirection logic found in the root index file.
Sources: FIXES-APLICADOS.md:131-138
Layout Structure
The project uses _layout.tsx files to define persistent UI elements and navigation wrappers:
- Root Layout (
app/_layout.tsx): Manages global providers (Auth, Theme, etc.) and the primary Stack navigator. - Auth Layout (
app/auth/_layout.tsx): Handles the authentication stack (Login, Register). - Tabs Layout (
app/(tabs)/_layout.tsx): Implements the bottom tab navigation for the main application features.
Sources: VALIDACION-COMPLETA.md:144-144, README.md:124-127
Navigation Components
The following table summarizes the primary navigation structures used within the application:
| Component Type | Path Group | Purpose | Key Routes |
|---|---|---|---|
| Stack Navigator | app/auth/ | Linear flow for login/registration. | /login, /register |
| Tab Navigator | app/(tabs)/ | Main dashboard navigation. | /home, /requests, /chat, /profile |
| Dynamic Routes | app/(tabs)/chat/ | Specific entity viewing (e.g., specific chat room). | /[roomId].tsx |
Sources: README.md:124-128, REPORTE_CHAT_MODULE.md:224-230, FIXES-APLICADOS.md:12-14
Deep Linking and Dynamic Routing
ElmecV2 employs dynamic routing for detailed views, particularly within the Chat and Requests modules. For instance, the chat system uses a [roomId].tsx file to handle navigation to specific conversations.
Sources: REPORTE_CHAT_MODULE.md:225-225
Sequence of navigating from a specific request to its associated chat room.
Sources: REPORTE_CHAT_MODULE.md:225-230, TEST_REPORT.md:155-160
API and Constant Mapping
The application centralizes its navigation-related constants and API endpoints to ensure consistency across the routing system.
Key Navigation Constants
The constants/commons.ts file defines the structure for different request types and statuses which often dictate where a user is navigated or what filters are applied to a view.
// Example of constants used for route filtering
export const REQUEST_STATUS = {
NEW: 'nuevo',
ASSIGNED: 'asignado',
IN_PROGRESS: 'en_proceso',
PAUSED: 'pausado',
RESOLVED: 'resuelto',
CLOSED: 'cerrado',
};
export const USER_ROLES = {
CUSTOMER: 'customer',
AGENT: 'agent',
ADMIN: 'admin',
};
Sources: constants/commons.ts:68-75, constants/commons.ts:78-82
API Route Mapping
| Feature | Constant Mapping | Endpoint Path |
|---|---|---|
| Authentication | URLs.LOGIN | /auth/login/ |
| Directory | URLs.DIRECTORY_LIST | /directory/ |
| Chat Rooms | URLs.REQUEST_CHAT_LIST | /chat/rooms/ |
Sources: constants/commons.ts:3-5, constants/commons.ts:18-18, constants/commons.ts:32-32
Validation and Redirects
The navigation system includes guard logic to prevent unauthorized access and ensure users are on the correct screen based on their role (Admin, Agent, or Customer).
- Role-Based Redirection: Admin users may be redirected to an
AdminDashboardwithin the profile section. - Persistence: The system verifies session tokens and their expiration before establishing real-time navigation subscriptions.
Sources: VALIDACION-COMPLETA.md:88-88, TEST_REPORT.md:178-185
Summary
The Navigation & Routing system in ElmecV2 is a robust implementation of Expo Router that bridges the gap between authentication states and feature modules. By leveraging file-based routing and dynamic path segments, it provides a scalable way to handle deep-linked content like chat rooms and service requests while maintaining a consistent user experience across platforms.