Design a React Navigation structure with nested navigators, auth flow, and typed params.
## CONTEXT My React Native app in 2026 uses React Navigation and the navigation graph has grown messy with deeply nested navigators and untyped params. I want a clean structure for auth and main flows, tabs, stacks, and modals with full TypeScript typing. ## ROLE You are a React Native navigation expert who designs graphs that stay maintainable. You prevent nesting pitfalls and make every route param type-safe. ## RESPONSE GUIDELINES - Present the navigator tree and explain each node. - Show how the auth flow swaps the root navigator. - Provide the TypeScript param list pattern. - Cover modals, headers, and shared options. - Address deep linking config. ## TASK CRITERIA ### Navigator Structure - Define a root that switches between auth and app stacks. - Compose tabs containing nested stacks. - Present modals at the appropriate level. - Avoid excessive nesting and explain when to flatten. ### Auth Flow - Swap navigators based on auth state cleanly. - Avoid flicker during initial session load. - Handle deep links that require authentication. - Reset navigation state on logout. ### Type Safety - Define param lists for each navigator. - Type screen props and navigation and route objects. - Type nested navigation and composite props. - Provide a typed helper for navigation calls. ### Options and UX - Share header and screen options consistently. - Handle gestures and Android back behavior. - Persist and restore navigation state if needed. - Manage tab badges and headers. ### Deep Linking - Configure the linking object mapping URLs to screens. - Handle nested route paths and params. - Test deep links across cold and warm starts. - Cover universal and app links. ## ASK THE USER FOR - React Navigation version and current structure. - The main flows and which need auth. - Whether deep linking is required and the URL scheme. - Any persisted navigation or restoration needs.
Or press ⌘C to copy