This documentation covers a set of React Native components that work together to create a sophisticated ticket display interface for public transportation (Metro and Bus services). The system consists of three main components:
- TransitInfoCard - Main ticket information display
- TicketSplit - Passenger count breakdown
- TicketHeader - Ticket metadata display
graph TD
A[NewTicketUI] --> B[TransitInfoCard]
A --> C[TicketSplit]
A --> D[TicketHeader]
B --> E[TransitInfoCardHeader]
B --> F[PlaceCard]
B --> G[TransformedText]
Displays detailed transit information for either Metro or Bus journeys, including route details, timings, and cost.
interface BaseTransitInfo {
source: string;
destination: string;
regionalSourceTitle: string;
regionalDestinationTitle: string;
transitMessage: string;
nextArrivalTime: string;
validTill: string;
transitMetaInfo: string;
transitCost: number;
}
// Metro-specific interfaces
interface BaseMetroTransitInfo {
mode: 'METRO';
gateNo: number;
platformNo: number;
}
interface DirectMetroTransitInfo extends BaseMetroTransitInfo, BaseTransitInfo {
metroTransitType: 'DIRECT';
}
interface SwitchMetroTransitInfo extends BaseMetroTransitInfo, BaseTransitInfo {
metroTransitType: 'SWITCH';
sourceMessage: string;
switchStation: string;
switchStationRegionalTitle: string;
sourceLine: string;
sourceLineColorCode: string;
switchPlatformNo: number;
destinationMessage: string;
destinationLine: string;
destinationLineColorCode: string;
}
// Bus-specific interface
interface BusTransitInfo extends BaseTransitInfo {
mode: 'BUS';
busNo: string;
}
- Supports both Metro and Bus transit types
- Handles direct metro routes and routes with line switches
- Displays bilingual information (English and regional language)
- Shows real-time transit information
- Includes visual indicators for metro lines
- Provides platform and gate information for metro journeys
- Transit mode icon with color coding
- Cost display
- Source and destination cards
- Platform/Gate information
- Next arrival time
- Ticket validity period
- Line indicators for metro routes
- Switch station information for metro routes with transfers
Displays the breakdown of passengers by category (Adult and Child).
interface TicketSplitProps {
adultCount: number;
childCount: number;
}
- Clean, two-column layout
- Separate counters for adults and children
- Consistent styling with the main ticket design
Displays essential ticket metadata and identification information.
interface TicketHeaderProps {
title: string;
regionalTitle: string;
date: string;
id: string;
ticketCount: number;
}
- Bilingual title display
- Date information
- Ticket ID
- Total passenger count with icon
- Centered layout with dividers
The components use a consistent styling approach with:
- Tailwind CSS for styling
- Custom fonts (Area Normal, Departure Mono, Inter)
- Responsive layouts
- Consistent color scheme
- Proper spacing and alignment
<TransitInfoCard
mode="METRO"
metroTransitType="SWITCH"
source="Majestic"
destination="Whitefield"
gateNo={4}
platformNo={2}
transitCost={45}
// ... other required props
/>
<TicketSplit
adultCount={2}
childCount={1}
/>
<TicketHeader
title="Metro Ticket"
regionalTitle="ಮೆಟ್ರೋ ಟಿಕೆಟ್"
date="2024-03-21"
id="MT123456"
ticketCount={3}
/>
<NewTicketUI
ticketHeaderProps={{
date: '10-07-2025',
id: '123',
ticketCount: 1,
title: 'Namma Metro',
regionalTitle: 'ನಮ್ಮ ಮೆಟ್ರೋ',
}}
transitInfoCardProps={{
mode: 'METRO',
source: 'Majestic',
destination: 'MG Road',
regionalSourceTitle: 'ಮಜೆಸ್ಟಿಕ್',
regionalDestinationTitle: 'ಎಂ.ಜಿ ರಸ್ತೆ',
transitMessage: 'Board Purple Line metro from Platform 2',
nextArrivalTime: '10:30 AM',
validTill: '11:30 AM',
transitMetaInfo: 'SWITCH',
transitCost: 30,
gateNo: 2,
platformNo: 2,
metroTransitType: 'DIRECT',
sourceMessage: 'Board Purple Line metro from Platform 2',
switchStation: 'Majestic',
switchStationRegionalTitle: 'ಮಜೆಸ್ಟಿಕ್',
sourceLine: 'BLUE',
sourceLineColorCode: '#016ACD',
switchPlatformNo: 2,
destinationMessage: 'Board Purple Line metro from Platform 2',
destinationLine: 'PURPLE',
destinationLineColorCode: '#800080',
}}
ticketSplitProps={{
adultCount: 1,
childCount: 0,
}}
/>