# fleetbase/navigator-app architecture

> Architecture diagram of the GitHub repository fleetbase/navigator-app, generated by GitDiagram from its file tree, README and a sample of source files (last updated 2026-09-25). It is an AI-made overview: check details against the source.

- Interactive diagram: https://gitdiagram.com/fleetbase/navigator-app
- Repository: https://github.com/fleetbase/navigator-app

## Overview

Fleetbase Navigator is a driver-and-agent mobile app for managing orders, routes, and field operations. The principal workflow is to authenticate, load assigned or scheduled work from Fleetbase, inspect routes and destinations, then update order activity and submit proof or reports. The app also supports chat, location tracking, account and fleet views, and notifications. The current React Native entry point composes shared providers around navigation. README capabilities inform the feature branches; only sampled source supports the specific provider composition, order-query, persistence, and route-query links shown here.

Main entry points: [`App.tsx`](https://github.com/fleetbase/navigator-app/blob/main/App.tsx) (Provider shell), [`src/screens/OrderScreen.tsx`](https://github.com/fleetbase/navigator-app/blob/main/src/screens/OrderScreen.tsx) (Order screens), [`src/navigation/AppNavigator.tsx`](https://github.com/fleetbase/navigator-app/blob/main/src/navigation/AppNavigator.tsx) (App navigator), [`src/contexts/OrderManagerContext.tsx`](https://github.com/fleetbase/navigator-app/blob/main/src/contexts/OrderManagerContext.tsx) (Order manager)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_app["App and navigation"]
  node_app_shell["Provider shell<br/>[App.tsx]"]
  node_navigator["App navigator<br/>[AppNavigator.tsx]"]
  node_auth["Authentication screens<br/>[AuthStack.tsx]"]
end

subgraph group_orders["Orders and routing"]
  node_order_screens["Order screens<br/>[OrderScreen.tsx]"]
  node_order_manager["Order manager"]
  node_order_components["Order details and proof"]
  node_routes["Route planning<br/>[RoutesScreen.js]"]
end

subgraph group_operations["Field operations"]
  node_chat["Chat screens<br/>[ChatHomeScreen.tsx]"]
  node_field_ops["Fuel and issue reports"]
end

subgraph group_services["Shared services"]
  node_auth_context["Authentication state<br/>[AuthContext.tsx]"]
  node_fleetbase_hook["Fleetbase data access<br/>[use-fleetbase.ts]"]
  node_chat_context["Chat state<br/>[ChatContext.tsx]"]
  node_socket["Realtime connection"]
  node_location["Location services"]
  node_storage[("Local persistence<br/>[use-storage.ts]")]
  node_notifications["Notifications"]
end

node_driver(("Driver or agent"))
node_fleetbase_api[("Fleetbase services")]

node_driver -->|"opens"| node_app_shell
node_app_shell -->|"renders"| node_navigator
node_app_shell -->|"provides state"| node_auth_context
node_navigator -->|"routes to"| node_auth
node_navigator -->|"routes to"| node_order_screens
node_driver -->|"signs in"| node_auth
node_order_screens -->|"reads orders"| node_order_manager
node_order_manager -->|"queries orders"| node_fleetbase_hook
node_routes -->|"queries route orders"| node_fleetbase_hook
node_fleetbase_hook -->|"calls"| node_fleetbase_api
node_order_screens -->|"collects proof"| node_order_components
node_order_manager -->|"persists order state"| node_storage
node_app_shell -->|"provides"| node_chat_context
node_chat -->|"uses"| node_chat_context
node_chat_context -->|"uses realtime"| node_socket
node_app_shell -->|"provides"| node_location
node_order_screens -->|"opens reports"| node_field_ops
node_app_shell -->|"provides"| node_notifications

click node_app_shell "https://github.com/fleetbase/navigator-app/blob/main/App.tsx"
click node_navigator "https://github.com/fleetbase/navigator-app/blob/main/src/navigation/AppNavigator.tsx"
click node_auth "https://github.com/fleetbase/navigator-app/blob/main/src/navigation/stacks/AuthStack.tsx"
click node_auth_context "https://github.com/fleetbase/navigator-app/blob/main/src/contexts/AuthContext.tsx"
click node_order_screens "https://github.com/fleetbase/navigator-app/blob/main/src/screens/OrderScreen.tsx"
click node_order_manager "https://github.com/fleetbase/navigator-app/blob/main/src/contexts/OrderManagerContext.tsx"
click node_order_components "https://github.com/fleetbase/navigator-app/blob/main/src/components/OrderProofOfDelivery.tsx"
click node_routes "https://github.com/fleetbase/navigator-app/blob/main/src/legacy/features/Core/screens/RoutesScreen.js"
click node_fleetbase_hook "https://github.com/fleetbase/navigator-app/blob/main/src/hooks/use-fleetbase.ts"
click node_chat "https://github.com/fleetbase/navigator-app/blob/main/src/screens/ChatHomeScreen.tsx"
click node_chat_context "https://github.com/fleetbase/navigator-app/blob/main/src/contexts/ChatContext.tsx"
click node_socket "https://github.com/fleetbase/navigator-app/blob/main/src/contexts/SocketClusterContext.native.tsx"
click node_field_ops "https://github.com/fleetbase/navigator-app/blob/main/src/screens/CreateFuelReportScreen.tsx"
click node_location "https://github.com/fleetbase/navigator-app/blob/main/src/contexts/LocationContext.tsx"
click node_storage "https://github.com/fleetbase/navigator-app/blob/main/src/hooks/use-storage.ts"
click node_notifications "https://github.com/fleetbase/navigator-app/blob/main/src/contexts/NotificationContext.tsx"

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_app_shell,node_navigator,node_auth toneBlue
class node_order_screens,node_order_manager,node_order_components,node_routes,node_fleetbase_api toneAmber
class node_chat,node_field_ops toneMint
class node_auth_context,node_fleetbase_hook,node_chat_context,node_socket,node_location,node_storage,node_notifications toneRose
class node_driver toneIndigo
```

## Components

### App and navigation

- [Provider shell](https://github.com/fleetbase/navigator-app/blob/main/App.tsx): `App.tsx`
- [App navigator](https://github.com/fleetbase/navigator-app/blob/main/src/navigation/AppNavigator.tsx): `src/navigation/AppNavigator.tsx`
- [Authentication screens](https://github.com/fleetbase/navigator-app/blob/main/src/navigation/stacks/AuthStack.tsx): `src/navigation/stacks/AuthStack.tsx`

### Orders and routing

- [Order screens](https://github.com/fleetbase/navigator-app/blob/main/src/screens/OrderScreen.tsx): `src/screens/OrderScreen.tsx`
- [Order manager](https://github.com/fleetbase/navigator-app/blob/main/src/contexts/OrderManagerContext.tsx): `src/contexts/OrderManagerContext.tsx`
- [Order details and proof](https://github.com/fleetbase/navigator-app/blob/main/src/components/OrderProofOfDelivery.tsx): `src/components/OrderProofOfDelivery.tsx`
- [Route planning](https://github.com/fleetbase/navigator-app/blob/main/src/legacy/features/Core/screens/RoutesScreen.js): `src/legacy/features/Core/screens/RoutesScreen.js`

### Field operations

- [Chat screens](https://github.com/fleetbase/navigator-app/blob/main/src/screens/ChatHomeScreen.tsx): `src/screens/ChatHomeScreen.tsx`
- [Fuel and issue reports](https://github.com/fleetbase/navigator-app/blob/main/src/screens/CreateFuelReportScreen.tsx): `src/screens/CreateFuelReportScreen.tsx`

### Shared services

- [Authentication state](https://github.com/fleetbase/navigator-app/blob/main/src/contexts/AuthContext.tsx): `src/contexts/AuthContext.tsx`
- [Fleetbase data access](https://github.com/fleetbase/navigator-app/blob/main/src/hooks/use-fleetbase.ts): `src/hooks/use-fleetbase.ts`
- [Chat state](https://github.com/fleetbase/navigator-app/blob/main/src/contexts/ChatContext.tsx): `src/contexts/ChatContext.tsx`
- [Realtime connection](https://github.com/fleetbase/navigator-app/blob/main/src/contexts/SocketClusterContext.native.tsx): `src/contexts/SocketClusterContext.native.tsx`
- [Location services](https://github.com/fleetbase/navigator-app/blob/main/src/contexts/LocationContext.tsx): `src/contexts/LocationContext.tsx`
- [Local persistence](https://github.com/fleetbase/navigator-app/blob/main/src/hooks/use-storage.ts): `src/hooks/use-storage.ts`
- [Notifications](https://github.com/fleetbase/navigator-app/blob/main/src/contexts/NotificationContext.tsx): `src/contexts/NotificationContext.tsx`

### Other components

- **Driver or agent**
- **Fleetbase services**

## Connections

- Driver or agent → Provider shell: opens
- Provider shell → App navigator: renders
- Provider shell → Authentication state: provides state
- App navigator → Authentication screens: routes to
- App navigator → Order screens: routes to
- Driver or agent → Authentication screens: signs in
- Order screens → Order manager: reads orders
- Order manager → Fleetbase data access: queries orders
- Route planning → Fleetbase data access: queries route orders
- Fleetbase data access → Fleetbase services: calls
- Order screens → Order details and proof: collects proof
- Order manager → Local persistence: persists order state
- Provider shell → Chat state: provides
- Chat screens → Chat state: uses
- Chat state → Realtime connection: uses realtime
- Provider shell → Location services: provides
- Order screens → Fuel and issue reports: opens reports
- Provider shell → Notifications: provides