Karthik Karthik-B-06

BusSwitchModal Component

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

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

🎯 Features

Bottom sheet modal with a custom handle component
Dynamic countdown timer for bus arrival

Metro/Bus Ticket Components Documentation

Overview

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

Component Architecture

By ISO2Code

Link :

https://country-flags-topaz.vercel.app/api/getCountryFlagByISO2Code?iso2code=AU

Usage :

<img src="https://country-flags-topaz.vercel.app/api/getCountryFlagByISO2Code?iso2code=AU" height="150">

Response :

By Country Name

Link :

https://country-flags-topaz.vercel.app/api/getCountryFlagByCountryName?countryName=India

	import { useCallback, useMemo } from 'react';
	import {
	useAnimatedStyle,
	useSharedValue,
	withSpring,
	WithSpringConfig,
	withTiming,
	WithTimingConfig,
	} from 'react-native-reanimated';

	import React, { useEffect, useMemo, useState } from 'react';
	import { Pressable, View } from 'react-native';
	import { PlayBackType } from 'react-native-audio-recorder-player';
	import Animated, { FadeIn, FadeOut, useSharedValue } from 'react-native-reanimated';

	import { Slider } from '~/components/Slider';
	import { Spinner } from '~/components/Spinner';
	import { useAudioPlayer } from '~/store/useAudioPlayer';
	import { PauseIcon, PlayIcon } from '~/svg';
	import { tailwind } from '~/theme/tailwind';

	import React from 'react';
	import { LayoutChangeEvent, StyleSheet } from 'react-native';
	import { Gesture, GestureDetector } from 'react-native-gesture-handler';
	import Animated, {
	clamp,
	Extrapolate,
	interpolate,
	runOnJS,
	SharedValue,
	useAnimatedReaction,

	import React, { useCallback } from "react";
	import {
	NativeSyntheticEvent,
	Platform,
	Pressable,
	TextInputContentSizeChangeEventData,
	TextInputProps,
	} from "react-native";
	import Animated, {
	Layout,

	const AudioPlayer = (props: AudioPlayerProps) => {
	const { audioSrc } = props;

	const [isPlaying, setIsPlaying] = useState(false);
	const [isSoundLoading, setSoundLoadStatus] = useState(true);

	const { position, duration } = useProgress();

	const currentPosition = useDerivedValue(() => Math.round(position));
	const totalDuration = useDerivedValue(() => Math.round(duration));

	import { memo, useCallback, useEffect, useMemo, useRef, useState } from "react";
	import {
	Alert,
	Dimensions,
	Pressable,
	StatusBar,
	StyleSheet,
	Text,
	TextInput,
	View,