React Native Realtime Speed Tracker

Mobile-first Expo demo for tracking route, estimating speed from GPS samples, and comparing Google Maps with Leaflet from the same UI.

This repo is meant to be useful as a reference project, not just a single demo app. You can fork it to build:

• courier and field-team trackers
• cycling or scooter telemetry demos
• fleet proof-of-concept apps
• GPS sampling and route-visualization experiments
• map provider comparison prototypes

What is inside

• GPS sampling with expo-location
• realtime speed calculation on the client
• route polyline rendering
• Google Maps / Leaflet provider switch as tabs above the map
• demo playback mode for testing without movement
• metric cards for speed, distance, and acceleration
• TypeScript-first structure with small reusable components

Map Providers

Provider	Where it works	Notes
Google Maps	Android / iOS native builds	Uses react-native-maps and your Google Maps key
Leaflet	Native and web preview	Uses OpenStreetMap tiles through a lightweight embedded view

Leaflet is especially helpful for GitHub users because people can try the project faster and understand the route logic without first setting up a native Google Maps key.

Why this repo is useful

• Shows how to calculate speed from raw coordinates with no backend dependency
• Keeps map concerns separate from tracking logic
• Gives contributors a clean place to add trip history, exports, alerts, or analytics
• Works as a starter template for location-heavy React Native apps

Preview

Project Structure

.
|- App.tsx
|- app.config.js
|- styles.ts
|- src
|  |- components
|  |  |- maps
|  |  |  |- GoogleMapView.native.tsx
|  |  |  |- GoogleMapView.web.tsx
|  |  |  |- LeafletMapView.native.tsx
|  |  |  |- LeafletMapView.web.tsx
|  |  |  |- MapProviderTabs.tsx
|  |  |  |- leafletDocument.ts
|  |  |- LatestReadingCard.tsx
|  |  |- MapPanel.tsx
|  |  |- MetricsGrid.tsx
|  |  |- SummaryCard.tsx
|  |  |- TrackingControls.tsx
|  |- constants
|  |  |- tracking.ts
|  |- hooks
|  |  |- useMapCamera.ts
|  |  |- useTrackingSession.ts
|  |- types
|  |  |- map.ts
|  |  |- trackingUi.ts
|  |- mapData.ts
|  |- tracking.ts

Getting Started

1. Install

npm install

2. Configure environment

Create .env in the project root:

GOOGLE_MAPS_API_KEY=your_google_maps_api_key
EXPO_PUBLIC_GOOGLE_MAP_STYLE_ID=

Leaflet can still be used even if you skip the Google key.

3. Run

npm run start

Useful commands:

npm run android
npm run ios
npm run web
npm run typecheck

Google Maps Setup

To enable the Google Maps tab on Android and iOS:

1. Create a Google Cloud project.
2. Enable the required Maps SDKs for your platform.
3. Generate a restricted API key.
4. Put that key into .env as GOOGLE_MAPS_API_KEY.
5. Rebuild the native app after updating the key.

The native configuration is wired through app.config.js.

How speed is calculated

The app calculates metrics fully on-device:

1. Each sample stores latitude, longitude, timestamp, and source.
2. Distance is computed with the Haversine formula.
3. Raw speed is distance / elapsed time.
4. Filtered speed and acceleration are derived from consecutive samples.

Core helpers live in src/tracking.ts.

Notes

• Real GPS values can fluctuate based on device quality and environment.
• Leaflet mode depends on network access for OpenStreetMap tiles.
• This project is a clean demo foundation, not a production telematics platform.