Overland international travel route planner, React Native (Expo) app for iOS.

Mirrors the OverTrack web app with a native iOS experience: full-screen map, animated route polylines, expandable legs, itinerary builder, and transport operator directory.

• Node.js 20+
• Expo CLI: npm install -g expo
• EAS CLI (for production builds): npm install -g eas-cli
• Xcode 15+ with iOS Simulator (for local testing)

# 1. Install dependencies
cd overtrack-ios
npm install

# 2. Configure the API base URL
# Open src/api/client.ts and set API_BASE_URL:
#   - Dev: "http://localhost:5000"   (when running the Express backend locally)
#   - Prod: "https://your-deployed-server.com"

# 3. Start the development server
npm start

Press i in the terminal to open on iOS Simulator, or scan the QR code with the Expo Go app.

The iOS app connects to the OverTrack Express API. To run it locally:

cd ../overtrack
npm install
npm run dev

The API will be available at http://localhost:5000. Make sure API_BASE_URL in src/api/client.ts points there.

For device testing (not Simulator), use your machine's local IP instead of localhost, e.g. http://192.168.1.x:5000.

npx expo run:ios

# Log in to Expo
eas login

# Configure your project (first time)
eas build:configure

# Build for iOS TestFlight / App Store
eas build --platform ios

# Or build a Simulator binary
eas build --platform ios --profile preview

overtrack-ios/
├── App.tsx                    # Entry point — fonts, providers, splash
├── app.config.ts              # Expo config (bundle ID, splash, icons)
├── package.json
├── tsconfig.json
├── babel.config.js
├── assets/                    # Icon, splash, favicon
└── src/
    ├── api/
    │   ├── client.ts          # API_BASE_URL + fetch wrappers
    │   └── queryClient.ts     # TanStack Query setup
    ├── types/
    │   └── schema.ts          # Shared types (Route, RouteLeg, Operator, etc.)
    ├── theme/
    │   ├── colors.ts          # Dark/light color tokens
    │   ├── typography.ts      # Font sizes, tracking, weights
    │   └── ThemeContext.tsx   # Dark/light mode context + useTheme / useColors
    ├── navigation/
    │   └── AppNavigator.tsx   # Bottom tabs + planner stack
    ├── screens/
    │   ├── RoutePlannerScreen.tsx   # Home: search, map, legs, stats
    │   ├── OperatorsScreen.tsx      # Operator directory with filters
    │   └── ItineraryScreen.tsx      # Itinerary builder with timeline
    └── components/
        ├── RouteMap.tsx        # MapView with polylines + markers
        ├── LegsList.tsx        # FlatList wrapper
        ├── LegItem.tsx         # Single leg with expand details
        ├── RouteStats.tsx      # Horizontal stats bar
        ├── OperatorCard.tsx    # Operator grid card
        ├── SearchBar.tsx       # From / To inputs + Plan button
        └── TransportIcon.tsx   # Icon, badge, dot per transport type

• From / To city search inputs, Plan Route button
• Apple Maps map view with colored polylines per transport type
• Dashed lines for ferry/cruise segments
• City stop markers (magenta circles)
• Scrollable list of legs below the map — tap to expand details
• Expanded leg: confidence badge, transport type, distance, notes, visa/border notes, booking link
• Route stats bar: legs, countries, km, duration, CO₂ saved

• Search bar + transport type filter chips (All / Train / Bus / Ferry / Cruise)
• Country dropdown filter
• List of operator cards: name, type badge, countries, star rating, booking link

• Date input for departure date
• Pace selector: Fast / Moderate / Slow
• CO₂ comparison: overland vs flying
• Timeline showing travel days and rest days
• +/− buttons per city to adjust rest days
• Save button (posts to /api/itineraries)

Edit src/api/client.ts:

export const API_BASE_URL = "https://your-api-server.com";

Edit app.config.ts:

ios: {
  bundleIdentifier: "com.yourcompany.overtrack"
}

The app defaults to dark mode. Toggle is available via ThemeContext:

const { toggleMode } = useTheme();

The app requests location permission for map centering (optional). Configured in app.config.ts via NSLocationWhenInUseUsageDescription.

• react-native-maps uses Apple Maps (MapKit) by default on iOS — no Google Maps API key needed.
• Dark map style is achieved via userInterfaceStyle: "dark" on the MapView.
• The @ path alias resolves to ./src/ via babel-plugin-module-resolver.
• All styles use StyleSheet.create() — no styled-components or CSS-in-JS.