Build React Native Navigation System

Build a complete React Native navigation system for [APP_NAME] with the following specifications:

Requirements

• App name: [APP_NAME]
• Navigator types needed: [Stack/Tab/Drawer/combination]
• Stack screens: [SCREEN_1], [SCREEN_2], [SCREEN_3]
• Tab screens: [TAB_1], [TAB_2], [TAB_3], [CSRF Protection Implementation]
• Drawer screens: [DRAWER_ITEM_1], [DRAWER_ITEM_2]
• Screens with params: [SCREEN_NAME]: {[PARAM_NAMES]}
• Protected routes: [LIST_PROTECTED_SCREENS]
• Icon library: [react-native-vector-icons/expo-vector-icons]
• Deep linking scheme: [SCHEME_NAME]

Deliverables

Generate complete React Navigation code including:

TypeScript type definitions:

• RootStackParamList with all screens and their params
• TabParamList for bottom tabs
• Navigation prop types for each screen

Root navigation container - NavigationContainer with linking configuration

Stack Navigator setup:

• createStackNavigator with typed param list
• All [STACK_SCREENS] with proper components
• Screen options (titles, header styles, gestures)
• Modal presentation for specific screens

Tab Navigator setup if needed:

• createBottomTabNavigator with [TAB_SCREENS]
• Tab bar icons using [ICON_LIBRARY]
• Tab bar styling and customization
• Badge support for notifications

Drawer Navigator setup if needed:

• createDrawerNavigator with [DRAWER_SCREENS]
• Custom drawer content component
• Drawer item icons and labels

Navigation utilities:

• useNavigation hook examples with proper typing
• navigate() calls with type-safe params
• goBack(), replace(), reset() patterns
• Route params access with useRoute() hook

Protected route wrapper component:

• Check authentication state
• Redirect to login if needed
• Pass through if authenticated

Output complete, production-ready navigation setup with full TypeScript support.