Mobile App

Building a Real-Time Taxi Booking App with Live Maps

A React Native app with real-time driver tracking and optimized map performance — achieved <1s location delay and 70% fewer API calls.

Platform

iOS & Android

Duration

7 weeks

<1s

Location delay

70%

Fewer API calls

25%

Battery savings

Project overview

Achieved near real-time driver tracking (<1s delay), reduced unnecessary API calls by ~70%, and improved map rendering performance significantly.

Platform

iOS & Android

Duration

7 weeks

Type

Mobile App

Stack

6 technologies

The challenge

Most taxi apps rely on continuous location updates and map rendering, which introduces serious real-world challenges. When initially implemented using REST polling every 5 seconds, the experience was noticeably broken — driver movement appeared jumpy, location delay was 4–5 seconds, and the app made ~60 API requests per minute per user.

Continuous REST polling causes high network usage and visible lag

Non-stop map re-renders make the UI slow and unresponsive

Continuous GPS tracking drains battery quickly

4–5 second location delays destroy user trust

What we set out to do

  • 01

    Implement smooth real-time driver tracking

  • 02

    Reduce location delay to under 1 second

  • 03

    Optimize map rendering performance

  • 04

    Minimize battery and network usage

  • 05

    Build a scalable architecture for real-time updates

How we solved it

01

Map Integration Strategy

Used react-native-maps with Google Maps over alternatives like Mapbox — faster setup, better documentation, and stable performance for standard taxi use cases.

Key decision

Google Maps over Mapbox

Result

Stable baseline with native marker and polyline support

02

Switching from Polling to WebSockets

Replaced REST polling every 5 seconds with WebSockets for real-time bidirectional communication. This eliminated redundant server requests entirely.

Key decision

WebSockets over REST polling

Result

Location delay dropped from ~5s to <1s. API calls cut from ~60/min to ~15/min.

03

Route Rendering & ETA Calculation

Integrated Google Directions API to fetch optimal routes, draw polylines on the map, and dynamically update the route as the driver moves.

Key decision

Threshold-based route re-fetch + caching

Result

Significant reduction in Directions API calls

04

Map Performance Optimization

Memoized all marker components to prevent unnecessary re-renders. Throttled location updates to every 1–2 seconds instead of continuous.

Key decision

Memoization + throttled updates

Result

No visible UI lag. Smooth 60fps marker animation.

05

Battery Optimization

Reduced GPS accuracy when the app is idle. Used adaptive tracking intervals that scale with ride state.

Key decision

Adaptive GPS intervals based on ride state

Result

Estimated 20–30% reduction in battery usage

Measurable impact

<1s

Location update delay (down from ~5s)

70%

Reduction in API requests

25%

Battery consumption reduction

0

Visible map lag

Tech stack

RReact NativeNNode.jsWWebSocketsGGoogle Maps APIRreact-native-mapsGGeolocation APIs

What we learned

This project surfaced the real challenges of building location-based, real-time systems in mobile applications. By replacing polling with WebSockets, optimizing map rendering, and carefully managing location updates, the result was a smooth and scalable taxi booking experience.

  • 01

    Real-time systems require efficient communication — WebSockets over polling

  • 02

    Map performance depends heavily on render optimization and memoization

  • 03

    Battery optimization is non-negotiable for any location-based mobile app

  • 04

    Small architectural decisions have a disproportionate impact on user experience

Ready to build something that matters?

We solve problems that don't have Stack Overflow answers. Let's talk.

Book a Discovery Call