Skip to main content

🧭 Mobile Navigation Structure

This document provides a comprehensive overview of the ComDEALL mobile application's navigation architecture, including tab organization, screen hierarchy, and navigation patterns.

🏗️ Navigation Architecture Overview​

The mobile app uses a hierarchical navigation structure with role-based access control:

App Entry Point
├── Authentication Stack
│   ├── Login Screen
│   ├── OTP Verification
│   ├── Onboarding Flow
│   └── Language Selection
├── Parent Navigation
│   ├── Parent Tabs (5 tabs)
│   └── Parent Stack Screens
└── Therapist Navigation
    ├── Therapist Tabs (5 tabs)
    └── Therapist Stack Screens

🔐 Authentication Stack​

Authentication Flow​

Splash Screen → Login → OTP Verification → Role Selection → Onboarding

Screens in Authentication Stack​

  • SplashScreen: App initialization and loading
  • LoginScreen: Phone number input
  • OTPScreen: OTP verification
  • OnboardingScreen: First-time user setup
  • LanguageSelectionScreen: Language preference selection
  • Auto-login: Check for existing valid session
  • Role-based Routing: Navigate to appropriate user flow
  • Onboarding Check: Complete onboarding for new users
  • Language Setup: Set preferred language

👨‍👩‍👧‍👦 Parent Navigation Structure​

Parent Tab Navigation (Bottom Tabs)​

The parent experience is organized into 5 main tabs:

🏠 Home Tab​

  • Screen: ParentHome
  • Purpose: Dashboard and overview
  • Features:
    • Child selection dropdown
    • Quick actions
    • Recent activity
    • Subscription status
    • Notifications

📊 Assessment Tab​

  • Screen: ParentAssessment
  • Purpose: Assessment management
  • Features:
    • Assessment history
    • Active assessments
    • Assessment details
    • Progress tracking
    • File attachments

📚 Lesson Plan Tab​

  • Screen: ParentLessonPlan
  • Purpose: Lesson plan access
  • Features:
    • Lesson plan library
    • Assigned plans
    • Progress tracking
    • Activity details
    • Offline access

💬 Chat Tab​

  • Screen: ParentChat
  • Purpose: Communication with therapist
  • Features:
    • Therapist communication
    • Message history
    • Media sharing
    • Real-time notifications
    • File attachments

👤 Profile Tab​

  • Screen: ParentProfile
  • Purpose: Account management
  • Features:
    • Personal information
    • Child management
    • Subscription management
    • Settings
    • Support

Parent Stack Screens​

Child Management​

  • AddChildScreen: Add new child
  • EditChildScreen: Edit child information
  • ChildDetailsScreen: View child details
  • ChildListScreen: List all children

Assessment Screens​

  • AssessmentDetailsScreen: View assessment details
  • AssessmentFormScreen: Complete assessment
  • AssessmentHistoryScreen: View assessment history
  • AssessmentReportScreen: View assessment report

Lesson Plan Screens​

  • LessonPlanDetailsScreen: View lesson plan details
  • LessonPlanActivityScreen: View activity details
  • LessonPlanProgressScreen: Track progress
  • LessonPlanLibraryScreen: Browse lesson plans

Chat Screens​

  • ChatScreen: Main chat interface
  • ChatHistoryScreen: Message history
  • MediaPreviewScreen: Preview shared media
  • FileViewerScreen: View shared files

Profile Screens​

  • EditProfileScreen: Edit personal information
  • SubscriptionScreen: Manage subscription
  • PaymentScreen: Payment management
  • SettingsScreen: App settings
  • SupportScreen: Contact support

👩‍⚕️ Therapist Navigation Structure​

Therapist Tab Navigation (Bottom Tabs)​

The therapist experience is organized into 5 main tabs:

🏠 Home Tab​

  • Screen: TherapistHome
  • Purpose: Dashboard and overview
  • Features:
    • Today's schedule
    • Quick stats
    • Upcoming appointments
    • Recent messages
    • Approval status

📅 Appointment Tab​

  • Screen: TherapistAppointment
  • Purpose: Appointment management
  • Features:
    • Schedule management
    • Appointment booking
    • Calendar view
    • Time slot management
    • Session notes

👶 Child Tab​

  • Screen: TherapistChildList
  • Purpose: Child management
  • Features:
    • Assigned children
    • Child profiles
    • Age-based filtering
    • Assessment history
    • Progress tracking

💬 Chat Tab​

  • Screen: TherapistChat
  • Purpose: Communication with parents
  • Features:
    • Parent communication
    • Message history
    • Media sharing
    • Real-time notifications
    • Group chats

👤 Profile Tab​

  • Screen: TherapistProfile
  • Purpose: Professional management
  • Features:
    • Professional profile
    • Document management
    • Availability settings
    • Earnings dashboard
    • Wallet management

Therapist Stack Screens​

Schedule Management​

  • ScheduleScreen: View and manage schedule
  • AvailabilityScreen: Set availability
  • TimeSlotScreen: Manage time slots
  • CalendarScreen: Calendar view
  • RecurringScheduleScreen: Set recurring schedules

Child Management​

  • ChildDetailsScreen: View child details
  • ChildAssessmentScreen: Conduct assessments
  • ChildProgressScreen: Track progress
  • ChildReportsScreen: Generate reports
  • ChildLessonPlanScreen: Assign lesson plans

Appointment Screens​

  • AppointmentDetailsScreen: View appointment details
  • BookAppointmentScreen: Book new appointment
  • RescheduleScreen: Reschedule appointment
  • SessionNotesScreen: Add session notes
  • AppointmentHistoryScreen: View history

Professional Screens​

  • EditProfileScreen: Edit professional information
  • DocumentUploadScreen: Upload documents
  • AvailabilitySettingsScreen: Manage availability
  • EarningsScreen: View earnings
  • WalletScreen: Manage wallet
  • WithdrawScreen: Withdraw earnings

🔄 Navigation Patterns​

Tab Navigation​

  • Bottom Tab Bar: Primary navigation method
  • Tab Icons: Visual indicators for each tab
  • Badge Counts: Unread message indicators
  • Active States: Visual feedback for current tab
  • Accessibility: Screen reader support

Stack Navigation​

  • Hierarchical Navigation: Parent-child screen relationships
  • Back Navigation: Automatic back button handling
  • Screen Transitions: Smooth navigation animations
  • Deep Linking: URL-based navigation
  • Modal Presentations: Overlay screens
  • Full-screen Modals: Important actions and forms
  • Bottom Sheets: Additional options and details
  • Alert Dialogs: Confirmations and notifications
  • Action Sheets: Multiple choice selections

🎯 Navigation Logic​

Role-based Access Control​

// Navigation access control
const hasAccessToTabs = (userRole: string, approvalStatus: string) => {
  if (userRole === 'therapist') {
    return approvalStatus === 'approved';
  }
  return true; // Parents have access by default
};

Tab Access Control​

  • Parent Tabs: Accessible after adding child
  • Therapist Tabs: Accessible after approval
  • Conditional Navigation: Show/hide tabs based on status
  • Access Warnings: Toast messages for restricted access

Deep Linking​

  • URL Schemes: com.comdeall.communicaids://
  • Universal Links: https://mobileapp.communicaids.com/
  • Route Parameters: Pass data through navigation
  • Navigation State: Maintain navigation state

📱 Mobile-Specific Navigation Features​

Gesture Navigation​

  • Swipe Back: iOS-style swipe to go back
  • Swipe Tabs: Swipe between tabs
  • Pull to Refresh: Refresh content
  • Swipe Actions: Quick actions on list items

Touch Interactions​

  • Large Touch Targets: Optimized for finger navigation
  • Haptic Feedback: Touch feedback
  • Touch States: Visual feedback for interactions

Performance Optimizations​

  • Lazy Loading: Load screens on demand
  • Screen Caching: Cache frequently used screens
  • Memory Management: Proper cleanup of screens
  • Animation Performance: Smooth 60fps animations

🔄 Navigation State Management​

// Navigation state structure
interface NavigationState {
  currentRoute: string;
  previousRoute: string;
  navigationHistory: string[];
  tabState: {
    parent: string;
    therapist: string;
  };
  modalState: {
    isVisible: boolean;
    currentModal: string;
  };
}

State Persistence​

  • Navigation History: Maintain navigation history
  • Tab State: Remember current tab selection
  • Modal State: Track modal presentations
  • Deep Link State: Handle deep link navigation

🎨 Navigation UI Components​

Tab Bar Components​

  • Tab Icons: SVG icons for each tab
  • Active States: Visual feedback for active tab
  • Badge Indicators: Unread message counts
  • Accessibility Labels: Screen reader support
  • Header Components: Custom headers for screens
  • Back Button: Custom back button component
  • Search Bar: Search functionality
  • Filter Components: Content filtering
  • Bottom Sheet: Slide-up panels
  • Alert Dialog: Confirmation dialogs
  • Action Sheet: Multiple choice selections
  • Loading Modal: Loading state indicators

🔧 Navigation Configuration​

Tab Configuration​

// Parent tabs configuration
const parentTabs = [
  { name: 'Home', icon: 'home', screen: 'ParentHome' },
  { name: 'Assessment', icon: 'assessment', screen: 'ParentAssessment' },
  { name: 'LessonPlan', icon: 'lesson-plan', screen: 'ParentLessonPlan' },
  { name: 'Chat', icon: 'chat', screen: 'ParentChat' },
  { name: 'Profile', icon: 'profile', screen: 'ParentProfile' }
];

Screen Configuration​

// Screen options configuration
const screenOptions = {
  headerShown: true,
  headerShadowVisible: false,
  tabBarActiveTintColor: colors.primary36,
  tabBarInactiveTintColor: colors.secondary8F,
  tabBarStyle: {
    borderTopLeftRadius: 16,
    borderTopRightRadius: 16,
    shadowOffset: { width: 0, height: -4 },
    shadowColor: colors.black,
    shadowRadius: 4,
    shadowOpacity: 0.1,
    elevation: 5
  }
};

🚀 Navigation Performance​

Optimization Strategies​

  • Screen Lazy Loading: Load screens on demand
  • Component Memoization: Prevent unnecessary re-renders
  • Navigation Caching: Cache navigation state
  • Animation Optimization: Smooth navigation animations

Memory Management​

  • Screen Cleanup: Proper screen unmounting
  • State Cleanup: Clear unused state
  • Event Cleanup: Remove event listeners
  • Resource Cleanup: Free up resources

🎯 Next Steps​