Navigation

Relevant source files

The following files were used as context for generating this wiki page:

• app/_layout.tsx
• app/(tabs)/_layout.tsx
• app/(tabs)/chat/[roomId].tsx
• FIXES-APLICADOS.md
• DEPLOY-NETLIFY.md
• VALIDACION-COMPLETA.md
• README.md
• REPORTE_CHAT_MODULE.md

The navigation system in ElmecV2 is built using Expo Router, a file-based routing library for React Native and web applications. This approach uses the file system to define the application's routes, creating a clear and maintainable structure. The system is designed to handle authentication, nested navigation (such as a main tab bar), and dynamic routes for screens that depend on specific parameters, like individual chat rooms.

The core of the navigation is split into a root layout that manages the overall application state and authentication, and a nested tab layout that provides the primary user interface for authenticated users. This structure ensures a clean separation between public-facing routes (like login) and protected application screens.

Sources: README.md, FIXES-APLICADOS.md, VALIDACION-COMPLETA.md

Core Technology: Expo Router

The project leverages Expo Router for its navigation logic. This is evident from the file and directory structure, which follows Expo Router's conventions, and the project's configuration.

• File-based routing: The presence of files like _layout.tsx, index.tsx, and directories like (tabs) indicates that routes are defined by their file paths.
• Plugin Configuration: The app.json file is configured to use the expo-router plugin, which is essential for enabling its functionality, especially for web builds.

The diagram below illustrates the file-based routing concept.

This diagram shows how the app directory structure maps to the application's navigation hierarchy.

Sources: README.md, DEPLOY-NETLIFY.md, REPORTE_CHAT_MODULE.md

Web Navigation Configuration

For the web version of the application deployed on Netlify, a specific configuration in app.json is required to ensure routing and authentication callbacks work correctly. The origin key within the expo-router plugin settings must be set to the production URL.

Property	Value Example	Purpose
origin	https://tu-url-real.netlify.app/	Sets the base URL for the web app, crucial for deep linking and OAuth redirects.

Sources: DEPLOY-NETLIFY.md, NETLIFY-DASHBOARD-SETUP.md

Application Entry Point & Authentication Flow

The initial entry point of the application, app/index.tsx, is responsible for directing the user based on their authentication status. It implements a simple but effective redirection logic.

1. Loading State: It first shows a loading screen while it checks the session status.
2. Authentication Check: It then verifies if the user is authenticated.
3. Redirection:
   • If authenticated, the user is redirected to the main application interface, located at the /(tabs) route.
   • If not authenticated, the user is redirected to the /auth route, which contains the login screen.

This flow ensures that unauthenticated users cannot access protected parts of the application.

The following flowchart visualizes the authentication and redirection logic at the app's entry point.

Navigation Layouts

The application uses a system of nested layouts to construct the UI.

Root Layout (app/_layout.tsx)

This file serves as the main wrapper for the entire application. It is the ideal place to include global context providers, such as ChatContext, ensuring they are available on all screens. The root layout typically defines a <Stack> navigator that contains all other routes, including the authentication flow and the main tab navigator.

Sources: REPORTE_CHAT_MODULE.md, FIXES-APLICADOS.md

Tab Navigation (app/(tabs)/_layout.tsx)

Once a user is authenticated, they are directed to a tab-based navigation structure defined in app/(tabs)/_layout.tsx. This layout creates the main bottom tab bar for navigating between the core modules of the application.

Based on the validated modules, the tabs are configured as follows:

Module	Route	Description
Home/Dashboard	/ or /home	Main landing screen with quick access and stats.
Solicitudes (Requests)	/requests	Module for creating and managing support requests.
Directorio	/directory	A directory of users with contact actions.
Calculadora	/calculator	Integrated tool for milling and drilling calculations.
Perfil	/profile	User profile, settings, and notifications.
Chat	/chat	Real-time messaging module.

The following diagram shows the structure of the tab layout.

Dynamic Routes

Expo Router supports dynamic routes to create pages from dynamic data. A prime example in this project is the chat room screen.

Chat Room (app/(tabs)/chat/[roomId].tsx)

The file app/(tabs)/chat/[roomId].tsx defines a dynamic route where [roomId] is a parameter. When a user navigates to a URL like /chat/123, this component is rendered, and the value 123 is available as the roomId parameter. This allows the application to create a unique chat screen for every conversation. The screen uses the roomId to fetch the corresponding messages and set up a real-time subscription for that specific chat room.

The sequence diagram below shows the flow of navigating to a specific chat room.

Summary

The navigation in ElmecV2 is built on the modern, file-based paradigm of Expo Router. It effectively separates concerns by using a root layout for global state, an authentication-aware entry point for security, and a nested tab layout for the main user experience. The use of dynamic routes for features like the chat module demonstrates a scalable approach to handling content-specific screens. This architecture is well-documented and validated to be robust and ready for a production environment.

Sources: VALIDACION-COMPLETA.md, FIXES-APLICADOS.md, README.md