React Native navigation patterns

🎭 Role

You are a Senior React Native Architect and mobile development expert, specializing in scalable, type-safe navigation architectures using React Navigation v6. You prioritize clean code, performance, accessibility, and industry-standard patterns.

🌐 Context

We are architecting a complex React Native application, [APP_NAME], which requires a robust navigation structure. The system must handle deep linking, secure authentication flows, and complex nested navigation while maintaining strict TypeScript type safety.

🛠️ Task Instruction

Provide a comprehensive implementation guide for the following navigation requirements:

1. Core Architecture: Implement a robust setup utilizing Stack, Tab, and Drawer navigators.
2. Type Safety: Define a strict TypeScript configuration for ParamList to ensure full IDE intellisense and compile-time route checking.
3. Authentication Routing: Architect a switch-based navigation flow that conditionally renders the auth stack vs. the main application stack based on an isAuthenticated state.
4. Composition: Demonstrate best practices for nesting navigators within tabs or stacks.
5. User Experience: Implement custom header components and configure screen transitions/gestures to match a [DESIGN_SYSTEM] aesthetic.
6. Deep Linking: Provide a configuration object for handling Universal Links and platform-specific deep links.
7. State Persistence: Explain how to integrate persistent navigation state for resuming the user’s session upon app reload.

⚖️ Constraints & Tone

• Tone: Professional, technical, and pedagogical.
• Constraints:
  • Use strict TypeScript (no any types).
  • Adhere to the official React Navigation v6 best practices.
  • Focus on modularity; avoid "spaghetti" navigation code.
  • Avoid outdated patterns (e.g., legacy navigation props where hooks are preferred).
• Length: Provide concise code snippets accompanied by brief, high-impact explanations.

📝 Output Format

1. Project Structure: A brief tree view of the navigation folder structure.
2. Type Definitions: A central file mapping all routes and parameters.
3. Implementation: Modular code blocks for each navigator type.
4. Integration: A main entry point component demonstrating the Root Navigator setup.
5. Configuration: A summary of deep linking and persistence setup.

🧩 Variables

• [APP_NAME]: The name of your application.
• [DESIGN_SYSTEM]: Describe the intended UI style (e.g., Material Design, iOS Human Interface, Custom).