Karthik-B-06

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:

1. TransitInfoCard - Main ticket information display
2. TicketSplit - Passenger count breakdown
3. TicketHeader - Ticket metadata display

Component Architecture

Karthik-B-06

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';

Karthik-B-06

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,

Karthik-B-06

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

Karthik-B-06

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));

Karthik-B-06

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

Karthik-B-06

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 :

Karthik-B-06

By Country Name

Link :

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

Usage :

Karthik-B-06

import { NativeStackScreenProps } from "@react-navigation/native-stack";
import React, { useEffect, useRef } from "react";
import { useForm } from "react-hook-form";
import { Dimensions, Pressable, StyleSheet, Text, TextInput } from "react-native";
import Animated, { Easing, FadeIn, FadeInDown, interpolate, runOnJS, useAnimatedStyle, useSharedValue, withTiming } from "react-native-reanimated";
import { SafeAreaView } from "react-native-safe-area-context";
import Svg, { Path } from "react-native-svg";
import tw from "twrnc";
import { AuthStackParamList } from "../../../App";
import useToastStore, { defaultToastValues } from "../../store/useToastStore";

Karthik-B-06

import { NativeStackScreenProps } from "@react-navigation/native-stack";
import React, { useEffect, useRef } from "react";
import { useForm } from "react-hook-form";
import { Dimensions, Pressable, StyleSheet, Text, TextInput, View } from "react-native";
import Animated, { Easing, FadeIn, FadeInDown, interpolate, runOnJS, useAnimatedStyle, useSharedValue, withTiming } from "react-native-reanimated";
import { SafeAreaView } from "react-native-safe-area-context";
import Svg, { Path } from "react-native-svg";
import tw from "twrnc";
import { AuthStackParamList } from "../../../App";
import useToastStore, { defaultToastValues } from "../../store/useToastStore";