Navigation & Routing System
Relevant source files
The following files were used as context for generating this wiki page:
- artifacts/mobile/app/(tabs)/_layout.tsx
- artifacts/mobile/app/_layout.tsx
- artifacts/mobile/app/onboarding.tsx
- attached_assets/Pasted-Build-a-production-ready-native-iPhone-mobile-app-using_1773627288076.txt
- attached_assets/Pasted-Build-a-complete-new-feature-for-the-Hospice-Roadmap-mo_1774923100510.txt
- replit.md
The Navigation & Routing System of the Hospice Roadmap mobile application is built using Expo Router, a file-based routing system for React Native. The architecture is designed to support a multi-stage journey (Before, During, and After hospice) while providing specialized entry points for different user roles such as Caregivers, Patients, and Physicians.
The system utilizes a combination of stack-based and tab-based navigation to organize content across educational resources, clinical evaluation tools, and AI-driven assistance. It is specifically optimized for iPhone, employing native patterns and smooth screen transitions to reduce cognitive load for users in high-stress healthcare environments.
Sources: replit.md, attached_assets/Pasted-Build-a-production-ready-native-iPhone-mobile-app-using_1773627288076.txt
Navigation Architecture
The application employs a hierarchical routing structure defined by the file system in the artifacts/mobile/app/ directory. The root of the application is managed by a top-level _layout.tsx, which wraps the entire app in necessary providers and manages global navigation state.
Core Layouts
- Root Layout: Located at
app/_layout.tsx, it serves as the entry point, configuring global providers and the primary Stack navigator. - Tab Layout: Located at
app/(tabs)/_layout.tsx, it defines the persistent bottom navigation bar available after a user completes onboarding.
Navigation Hierarchy Diagram
The following diagram illustrates the flow from initial app launch through onboarding into the main authenticated/configured experience.
Route Definitions
The system defines specific paths for various functional modules. These routes are implemented using Expo Router's directory-based conventions.
| Route Path | Type | Description |
|---|---|---|
/onboarding | Stack | 4-step process for role selection and journey stage. |
/(tabs)/index | Tab | The Role-Based Home experience. |
/(tabs)/help | Tab | Ragna AI Companion (Chat interface). |
/evaluation | Stack | Hospice readiness clinical evaluation engine. |
/legal/index | Stack | Legal Documents and State Forms landing page. |
/legal/state/[code] | Stack | State-specific legal document registry. |
/guidance/[id] | Stack | Detailed 6-section guidance for specific scenarios. |
Sources: replit.md, attached_assets/Pasted-Build-a-complete-new-feature-for-the-Hospice-Roadmap-mo_1774923100510.txt, artifacts/mobile/app/onboarding.tsx
Navigation Components & Logic
Tab Navigation Customization
The bottom navigation bar uses NativeTabs with a "liquid glass" effect. It is designed to be emotionally steady and visually premium. Key features include:
- Role-Aware Content: The "Home" tab content adjusts labels and cards based on whether the user is a Caregiver, Patient, or "Other" role.
- Chat Status Indicator: The "Chat" (Help) tab includes a green status dot to indicate the AI's availability.
Implementation of the Legal Module Routing
The Legal Documents feature demonstrates the use of dynamic routing parameters ([code] and [id]) to handle 50 states plus Washington DC.
State-Based Redirection
The onboarding.tsx screen manages the initial navigation flow. Upon completion of the multi-step onboarding (role selection, journey stage, and tour), the system persists the user's configuration and navigates to the main tab interface.
// Example of navigation transition after onboarding
const handleFinish = async () => {
await completeOnboarding(); // Persists role and stage
router.replace("/(tabs)"); // Replaces stack to prevent back-navigation to onboarding
};
Sources: artifacts/mobile/app/onboarding.tsx:145-150, attached_assets/Pasted-Build-a-production-ready-native-iPhone-mobile-app-using_1773627288076.txt
Technical Requirements for Navigation
- Offline Accessibility: Critical routes such as guidance scenarios, the hospice journey, and the emergency card must remain fully functional offline.
- Transition Smoothness: Screen transitions must be smooth and intuitive, utilizing native iPhone patterns rather than generic web-like layouts.
- Deep Linking Support: The architecture is structured to support future deep links to specific resource IDs or evaluation results.
Sources: replit.md, attached_assets/Pasted-Build-a-production-ready-native-iPhone-mobile-app-using_1773627288076.txt
Conclusion
The Navigation & Routing System serves as the backbone of the Hospice Roadmap experience, ensuring that users can quickly find critical information during stressful moments. By leveraging Expo Router's file-based system, the project maintains a clear separation between the onboarding flow, the main role-based utility tabs, and deep educational modules like the Legal Documents registry.