busSwitch.md

BusSwitchModal Component

A React Native bottom sheet modal component that displays bus information and switching options in two different states:

1. When specific bus information is available
2. When showing a list of alternative buses

🎯 Features

• Bottom sheet modal with a custom handle component
• Dynamic countdown timer for bus arrival
• Bus type-specific illustrations
• Responsive design with safe area insets
• Support for both single bus and multiple bus list views
• Type-safe implementation with TypeScript

📝 Props

The component accepts a discriminated union of props based on the type field:

Common Props (BaseProps)

interface BaseProps {
    arrivalTime: Date;     // The expected arrival time of the bus
    destination: string;   // The destination stop name
}

When Bus Info is Available

interface BusInfoAvailableProps extends BaseProps {
    type: 'busInfoAvailable';
    busNumber: string;                               // The bus route number
    busType: FRFSServiceTierType_fRFSServiceTierType;// The type of bus service (AC/EXECUTIVE/EXPRESS/ORDINARY)
    onSwitchBus: () => void;                        // Callback when user chooses to switch bus
    onGoBack: () => void;                           // Callback when user chooses to go back
}

When Showing Bus List

interface BusInfoNotAvailableProps extends BaseProps {
    type: 'busInfoNotAvailable';
    busList: Array<{
        busNumber: string; // The bus route number
        index: number;     // Unique identifier for the bus in the list
    }>;
}

🚀 Usage

1. Single Bus View

import { BusSwitchModal } from './BusSwitchModal';

// Inside your component
<BusSwitchModal
    type="busInfoAvailable"
    busNumber="23A"
    busType="ORDINARY"
    destination="Central Station"
    arrivalTime={new Date(Date.now() + 10 * 60 * 1000)} // 10 minutes from now
    onSwitchBus={() => {
        // Handle bus switch action
    }}
    onGoBack={() => {
        // Handle go back action
    }}
/>

2. Bus List View

<BusSwitchModal
    type="busInfoNotAvailable"
    destination="Central Station"
    arrivalTime={new Date(Date.now() + 10 * 60 * 1000)}
    busList={[
        { busNumber: "23A", index: 0 },
        { busNumber: "45B", index: 1 },
        { busNumber: "12C", index: 2 }
    ]}
/>

🎨 Visual States

Bus Type Illustrations

The component shows different illustrations based on the bus type:

• AC Service: Blue modern bus illustration
• Executive Service: Premium bus illustration
• Express Service: Fast transit bus illustration
• Ordinary Service: Standard bus illustration

Timer Display

• Shows remaining minutes until bus arrival
• Updates every minute
• Displays "0" when the arrival time has passed

🔄 State Management

Countdown Timer

The component includes a separate CountdownTimer subcomponent that:

• Calculates remaining time until bus arrival
• Updates every second
• Handles cleanup on unmount
• Memoizes calculations for performance

interface CountdownTimerProps {
    targetTime: Date;
}

🎯 UI Elements

Available Bus Info View

• Large bus number display
• Bus type indicator
• Destination text
• Countdown timer
• "Switch Bus" action button
• "Go Back" button

Bus List View

• Arrival countdown timer
• Information message
• List of alternative buses
• "Got it" button
• Additional bus routes section

🛠 Technical Details

Dependencies

• @gorhom/bottom-sheet: For the bottom sheet modal
• react-native-reanimated: For animations
• react-native-safe-area-context: For safe area insets
• Custom bus type illustrations (webp format)

Styling

• Uses tailwind for consistent styling
• Responsive to different screen sizes
• Supports safe area insets
• Custom z-index handling for modal