# detrogo/detrogo-react-native architecture

> Architecture diagram of the GitHub repository detrogo/detrogo-react-native, generated by GitDiagram from its file tree, README and a sample of source files (last updated 2026-08-04). It is an AI-made overview: check details against the source.

- Interactive diagram: https://gitdiagram.com/detrogo/detrogo-react-native
- Repository: https://github.com/detrogo/detrogo-react-native

## Overview

#### Purpose and Runtime
DetroGo is an offline-first Delhi-NCR metro route-planning mobile app. It uses React Native, Expo, TypeScript, and Expo Router; native Android development-client builds are required for custom native functionality. Primary app configuration is `app.json`, with router entry layout at `app/_layout.tsx`.

#### Navigation and User Journeys
Expo Router screens define the app flow: onboarding, tabbed home/settings, station/route planning, route detail, and system-map views.
- Root and tab navigation: `app/_layout.tsx`, `app/(tabs)/_layout.tsx`
- Primary search/home UI: `app/(tabs)/index.tsx`, `components/homescreenui.tsx`
- Planning and presentation screens: `app/planner.tsx`, `app/route.tsx`, `app/listpage.tsx`
- First-run gating: `app/onboarding.tsx`

#### Transit Data Boundary
City-specific static datasets are the authoritative offline transit graph and display metadata. Delhi is currently the supported city; the city registry enables expansion without changing routing consumers.
- City registry: `cities/index.ts`
- Delhi topology and stations: `cities/delhi/stationsdata.json`, `cities/delhi/lines.json`, `cities/delhi/metrolines.json`
- Geometry and line metadata: `cities/delhi/shapes.ts`, `cities/delhi/stationshapes.ts`, `cities/delhi/lineMeta.ts`

#### Route Computation Pipeline
The planner takes selected origin/destination stations, resolves them against city data, and computes routes through the custom BFS/Dijkstra routing engine. Route domain contracts separate graph/routing results from screen rendering.
- Routing engine: `utils/metroRouting.ts`
- Route and routing types: `types/route.ts`, `types/routing.ts`, `types/index.ts`
- Geographic nearest-station lookup: `utils/nearestStation.ts`, `store/useNearestStationStore.ts`

The important boundary is static city data → routing utility → typed route result → planner/detail UI. GPS is used locally only to improve station selection; no backend is required for core routing.

#### Persistence and App State
Zustand-style stores own user-local state and persistence: onboarding completion, preferences, saved routes, and recent-trip history. This keeps route calculation/data independent of UI session state.
- Storage adapter: `store/storage.ts`
- Preferences and onboarding: `store/usePrefStore.ts`, `store/onboarding.ts`
- Route history/library: `store/recentTrips.ts`, `store/savedRoutes.ts`

#### Maps, Rendering, and Themes
The app exposes an in-app transit map and route schematic presentation. A bundled web renderer is present under `assets/routemap`, while MapLibre is the declared map-rendering technology. Material 3, dynamic colors, and AMOLED behavior are centralized outside feature screens.
- Bundled route-map renderer: `assets/routemap/index.html`, `assets/routemap/assets/index-C3YrQ63w.js`
- Theme/color system: `constants/theme.ts`, `constants/m3Colors.ts`, `hooks/useAppTheme.ts`
- AMOLED preference/rendering: `constants/amoled.ts`, `hooks/useAmoled.ts`

#### Notifications, Localization, and External Services
A local Expo native module package implements live-update notifications on Android, including Firebase token/service integration; route notification utilities connect app route state to that capability. Crowdin manages translation workflow; locale JSON is bundled with the app.
- Notification integration: `utils/detroLiveNotif.ts`, `utils/routeNotification.ts`
- Native live-update module: `packages/expo-live-updates/android/src/main/java/expo/modules/liveupdates/ExpoLiveUpdatesModule.kt`, `packages/expo-live-updates/android/src/main/java/expo/modules/liveupdates/FirebaseService.kt`
- Localization resources: `i18n/locales/en.json`, `i18n/locales/hi.json`, `crowdin.yml`

Main entry points: [`app/planner.tsx`](https://github.com/detrogo/detrogo-react-native/blob/main/app/planner.tsx) (Planner and route views), [`app/_layout.tsx`](https://github.com/detrogo/detrogo-react-native/blob/main/app/_layout.tsx) (Root navigation), [`app/(tabs)/index.tsx`](https://github.com/detrogo/detrogo-react-native/blob/main/app/(tabs)/index.tsx) (Station search home), [`store/usePrefStore.ts`](https://github.com/detrogo/detrogo-react-native/blob/main/store/usePrefStore.ts) (Local state stores)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_app["Mobile app"]
  node_config["Expo app config<br/>Expo configuration<br/>[app.json]"]
  node_root_nav["Root navigation<br/>Expo Router layout<br/>[_layout.tsx]"]
  node_tabs["Home and settings tabs<br/>Tab layout<br/>[_layout.tsx]"]
  node_home["Station search home<br/>Screen and UI<br/>[index.tsx]"]
  node_onboarding_ui["Onboarding screen<br/>[onboarding.tsx]"]
  node_route_screens["Planner and route views<br/>Route screens<br/>[planner.tsx]"]
end

subgraph group_routing["Offline routing"]
  node_city_registry["City registry<br/>City catalog<br/>[index.ts]"]
  node_delhi_data[("Delhi transit graph<br/>Static datasets<br/>[stationsdata.json]")]
  node_map_metadata["Geometry and line metadata<br/>Map metadata<br/>[shapes.ts]"]
  node_routing_engine{{"BFS/Dijkstra engine<br/>Routing utility<br/>[metroRouting.ts]"}}
  node_route_contracts["Route contracts<br/>TypeScript types<br/>[route.ts]"]
  node_nearest_station["Nearest-station lookup<br/>Location utility<br/>[nearestStation.ts]"]
end

subgraph group_state["State and presentation"]
  node_local_stores["Local state stores<br/>Zustand stores<br/>[usePrefStore.ts]"]
  node_storage[("Persistence adapter<br/>Local storage<br/>[storage.ts]")]
  node_theme["Theme system<br/>Theme hooks<br/>[useAppTheme.ts]"]
  node_map_renderer["Bundled route-map renderer<br/>Web map renderer<br/>[index.html]"]
end

subgraph group_integrations["Native and localization"]
  node_notifications["Route notifications<br/>Notification utilities"]
  node_native_live_updates{{"Android live-update module<br/>Expo native module"}}
  node_locales["Bundled locales<br/>Translation resources<br/>[en.json]"]
end

node_config -->|"launches"| node_root_nav
node_root_nav -->|"hosts"| node_tabs
node_root_nav -->|"routes to"| node_onboarding_ui
node_tabs -->|"shows"| node_home
node_home -->|"starts planning"| node_route_screens
node_city_registry -->|"selects"| node_delhi_data
node_delhi_data -->|"supports display"| node_map_metadata
node_delhi_data -->|"provides graph"| node_routing_engine
node_routing_engine -->|"returns typed results"| node_route_contracts
node_nearest_station -->|"selects origin"| node_routing_engine
node_route_contracts -->|"renders"| node_route_screens
node_nearest_station -->|"suggests station"| node_home
node_local_stores -->|"persists through"| node_storage
node_local_stores -->|"tracks completion"| node_onboarding_ui
node_local_stores -->|"stores saved and recent routes"| node_route_screens
node_theme -->|"styles"| node_home
node_map_metadata -->|"drives schematic"| node_map_renderer
node_map_renderer -->|"presents map"| node_route_screens
node_route_screens -->|"configures alerts"| node_notifications
node_notifications -->|"invokes"| node_native_live_updates
node_config -->|"includes native build"| node_native_live_updates
node_locales -->|"localizes screens"| node_root_nav

click node_config "https://github.com/detrogo/detrogo-react-native/blob/main/app.json"
click node_root_nav "https://github.com/detrogo/detrogo-react-native/blob/main/app/_layout.tsx"
click node_tabs "https://github.com/detrogo/detrogo-react-native/blob/main/app/(tabs)/_layout.tsx"
click node_home "https://github.com/detrogo/detrogo-react-native/blob/main/app/(tabs)/index.tsx"
click node_onboarding_ui "https://github.com/detrogo/detrogo-react-native/blob/main/app/onboarding.tsx"
click node_route_screens "https://github.com/detrogo/detrogo-react-native/blob/main/app/planner.tsx"
click node_city_registry "https://github.com/detrogo/detrogo-react-native/blob/main/cities/index.ts"
click node_delhi_data "https://github.com/detrogo/detrogo-react-native/blob/main/cities/delhi/stationsdata.json"
click node_map_metadata "https://github.com/detrogo/detrogo-react-native/blob/main/cities/delhi/shapes.ts"
click node_routing_engine "https://github.com/detrogo/detrogo-react-native/blob/main/utils/metroRouting.ts"
click node_route_contracts "https://github.com/detrogo/detrogo-react-native/blob/main/types/route.ts"
click node_nearest_station "https://github.com/detrogo/detrogo-react-native/blob/main/utils/nearestStation.ts"
click node_local_stores "https://github.com/detrogo/detrogo-react-native/blob/main/store/usePrefStore.ts"
click node_storage "https://github.com/detrogo/detrogo-react-native/blob/main/store/storage.ts"
click node_theme "https://github.com/detrogo/detrogo-react-native/blob/main/hooks/useAppTheme.ts"
click node_map_renderer "https://github.com/detrogo/detrogo-react-native/blob/main/assets/routemap/index.html"
click node_notifications "https://github.com/detrogo/detrogo-react-native/blob/main/utils/routeNotification.ts"
click node_native_live_updates "https://github.com/detrogo/detrogo-react-native/blob/main/packages/expo-live-updates/android/src/main/java/expo/modules/liveupdates/ExpoLiveUpdatesModule.kt"
click node_locales "https://github.com/detrogo/detrogo-react-native/blob/main/i18n/locales/en.json"

classDef toneNeutral fill:#f8fafc,stroke:#334155,stroke-width:1.5px,color:#0f172a
classDef toneBlue fill:#dbeafe,stroke:#2563eb,stroke-width:1.5px,color:#172554
classDef toneAmber fill:#fef3c7,stroke:#d97706,stroke-width:1.5px,color:#78350f
classDef toneMint fill:#dcfce7,stroke:#16a34a,stroke-width:1.5px,color:#14532d
classDef toneRose fill:#ffe4e6,stroke:#e11d48,stroke-width:1.5px,color:#881337
classDef toneIndigo fill:#e0e7ff,stroke:#4f46e5,stroke-width:1.5px,color:#312e81
classDef toneTeal fill:#ccfbf1,stroke:#0f766e,stroke-width:1.5px,color:#134e4a
class node_config,node_root_nav,node_tabs,node_home,node_onboarding_ui,node_route_screens toneBlue
class node_city_registry,node_delhi_data,node_map_metadata,node_routing_engine,node_route_contracts,node_nearest_station toneAmber
class node_local_stores,node_storage,node_theme,node_map_renderer toneMint
class node_notifications,node_native_live_updates,node_locales toneRose
```

## Components

### Mobile app

Expo Router mobile client.

- [Expo app config](https://github.com/detrogo/detrogo-react-native/blob/main/app.json): Expo configuration · Requires Android development-client builds for native functionality. · `app.json`
- [Root navigation](https://github.com/detrogo/detrogo-react-native/blob/main/app/_layout.tsx): Expo Router layout · `app/_layout.tsx`
- [Home and settings tabs](https://github.com/detrogo/detrogo-react-native/blob/main/app/(tabs)/_layout.tsx): Tab layout · `app/(tabs)/_layout.tsx`
- [Station search home](https://github.com/detrogo/detrogo-react-native/blob/main/app/(tabs)/index.tsx): Screen and UI · `app/(tabs)/index.tsx`
- [Onboarding screen](https://github.com/detrogo/detrogo-react-native/blob/main/app/onboarding.tsx): Screen · Gates first-run access. · `app/onboarding.tsx`
- [Planner and route views](https://github.com/detrogo/detrogo-react-native/blob/main/app/planner.tsx): Route screens · `app/planner.tsx`

### Offline routing

Static Delhi transit data and local route computation.

- [City registry](https://github.com/detrogo/detrogo-react-native/blob/main/cities/index.ts): City catalog · Selects the supported city dataset. · `cities/index.ts`
- [Delhi transit graph](https://github.com/detrogo/detrogo-react-native/blob/main/cities/delhi/stationsdata.json): Static datasets · Authoritative stations, topology, and line definitions. · `cities/delhi/stationsdata.json`
- [Geometry and line metadata](https://github.com/detrogo/detrogo-react-native/blob/main/cities/delhi/shapes.ts): Map metadata · `cities/delhi/shapes.ts`
- [BFS/Dijkstra engine](https://github.com/detrogo/detrogo-react-native/blob/main/utils/metroRouting.ts): Routing utility · Computes routes entirely on-device. · `utils/metroRouting.ts`
- [Route contracts](https://github.com/detrogo/detrogo-react-native/blob/main/types/route.ts): TypeScript types · Separates routing results from screen rendering. · `types/route.ts`
- [Nearest-station lookup](https://github.com/detrogo/detrogo-react-native/blob/main/utils/nearestStation.ts): Location utility · Uses GPS locally to improve station selection. · `utils/nearestStation.ts`

### State and presentation

Local persistence, themes, and map rendering.

- [Local state stores](https://github.com/detrogo/detrogo-react-native/blob/main/store/usePrefStore.ts): Zustand stores · Owns onboarding, preferences, saved routes, and history. · `store/usePrefStore.ts`
- [Persistence adapter](https://github.com/detrogo/detrogo-react-native/blob/main/store/storage.ts): Local storage · `store/storage.ts`
- [Theme system](https://github.com/detrogo/detrogo-react-native/blob/main/hooks/useAppTheme.ts): Theme hooks · Centralizes Material 3, dynamic color, and AMOLED behavior. · `hooks/useAppTheme.ts`
- [Bundled route-map renderer](https://github.com/detrogo/detrogo-react-native/blob/main/assets/routemap/index.html): Web map renderer · In-app schematic and transit-map presentation. · `assets/routemap/index.html`

### Native and localization

Android live updates and bundled translations.

- [Route notifications](https://github.com/detrogo/detrogo-react-native/blob/main/utils/routeNotification.ts): Notification utilities · Connects route state to live-update capability. · `utils/routeNotification.ts`
- [Android live-update module](https://github.com/detrogo/detrogo-react-native/blob/main/packages/expo-live-updates/android/src/main/java/expo/modules/liveupdates/ExpoLiveUpdatesModule.kt): Expo native module · Provides Firebase-backed live-update notifications. · `packages/expo-live-updates/android/src/main/java/expo/modules/liveupdates/ExpoLiveUpdatesModule.kt`
- [Bundled locales](https://github.com/detrogo/detrogo-react-native/blob/main/i18n/locales/en.json): Translation resources · English and Hindi app translations. · `i18n/locales/en.json`

## Connections

- Expo app config → Root navigation: launches
- Root navigation → Home and settings tabs: hosts
- Root navigation → Onboarding screen: routes to
- Home and settings tabs → Station search home: shows
- Station search home → Planner and route views: starts planning
- City registry → Delhi transit graph: selects
- Delhi transit graph → Geometry and line metadata: supports display
- Delhi transit graph → BFS/Dijkstra engine: provides graph
- BFS/Dijkstra engine → Route contracts: returns typed results
- Nearest-station lookup → BFS/Dijkstra engine: selects origin
- Route contracts → Planner and route views: renders
- Nearest-station lookup → Station search home: suggests station
- Local state stores → Persistence adapter: persists through
- Local state stores → Onboarding screen: tracks completion
- Local state stores → Planner and route views: stores saved and recent routes
- Theme system → Station search home: styles
- Geometry and line metadata → Bundled route-map renderer: drives schematic
- Bundled route-map renderer → Planner and route views: presents map
- Planner and route views → Route notifications: configures alerts
- Route notifications → Android live-update module: invokes
- Expo app config → Android live-update module: includes native build
- Bundled locales → Root navigation: localizes screens