Maps and location
Maps and live tracking in React Native: what to keep separate
Live tracking looks like a moving marker, but behind it are permissions, GPS accuracy, network delays and order state that don’t always agree with each other. Drawing on order tracking in the Khedmah customer, driver and vendor apps and maps in DogPack and SnapHatch, this article outlines the responsibilities to keep separate.
Frequent updates also cost battery, data and rendering time. So the design has to balance how fresh the location is against how much work it takes, and handle background behaviour and platform permissions properly.
Treat permission and availability as real states
Permission denied, location turned off, reduced accuracy, a temporary failure and a working location are different situations. Give each one a clear response instead of a generic map error.
Keep location events apart from order events
Coordinates say where something is; the order or trip state says what’s happening. Keeping them separate stops an inaccurate position from changing the status of an order.
Control how often you send and render updates
Update based on what the journey needs. Time intervals, a minimum distance moved, app state and whether a trip is active can cut unnecessary work while keeping tracking useful.
Handle stale and interrupted updates
Timestamp every update and show the last known state honestly, so old coordinates aren’t presented as live. When the connection returns, resume updates and let the UI show that things were uncertain for a while.
Keep the map component focused
Normalise coordinates and update only the markers that changed. Stable component boundaries and deliberate camera movement cut re-renders and stop the map from fighting the user’s gestures.
Design the whole journey, not just the map
Tracking includes the pickup or destination, ETA expectations, notifications, status changes and what to do when something goes wrong. Each person, whether customer, driver or vendor, should be able to see their next step.
Summary
- Decide who produces, consumes and owns each piece of location state.
- List the permission, accuracy, offline, stale-data and background cases.
- Choose update rules based on what the journey needs and what it costs the device.
- Keep transport and order data separate from what the map shows.
- Test movement, interruptions, reconnection, app lifecycle changes and permissions on both platforms.
A good tracking screen makes location understandable, not just visible. Clear ownership of state, sensible update rules, handling for stale data and honest feedback in the UI are what make people trust the map.