# Live-Tracking Map Marker Animation in React Native

> By Lawrence Arya, Founder & CEO of VP0. Published 2026-06-07. 6 min read.
> Source: https://vp0.com/blogs/live-tracking-map-marker-animation-react-native

The courier marker jumps because location arrives in steps. Smooth tracking is interpolation plus an honest ETA.

**TL;DR.** A live-tracking marker jumps because the location feed arrives every few seconds while the courier moves continuously, so the craft is interpolating between updates (animate from the current position to each new one over the interval) and rotating the marker to its bearing so it reads as a vehicle on a road. Build it with Reanimated (5,266,534 weekly downloads) on the UI thread, never per-frame React state, and keep the experience honest: an ETA as a range not a to-the-second countdown, real marker states (stopped, arriving, stale), and no invented motion when the feed dies. Frame both courier and destination, and own the arrival moment. A free VP0 design supplies the tracking-map screens.

## Why does the courier marker jump, and what should it do instead?

Because the location feed is a heartbeat and the courier is continuous. A delivery or ride backend sends the driver's position every few seconds at best, and if you move the map marker straight to each new coordinate, it teleports in visible hops, the jank every "where's my order" screen is judged on. The fix is the genre's whole craft: **interpolate between updates** so the marker glides smoothly from its last position to the new one over the interval, and rotate it to face its direction of travel, so it reads as a vehicle moving down a road rather than a dot blinking around a map.

This is the same dead-reckoning-and-ease pattern as any live map, from [the flight radar plane map](/blogs/flight-radar-live-plane-map-overlay-react-native/) to parcel tracking like [the PostNL package-tracking clone](/blogs/postnl-pakket-volgen-ui-clone/): the data arrives in steps, the animation makes it continuous, and honesty lives in not pretending to more precision than the feed gives.

## How is the smooth marker built in React Native?

By animating the marker's coordinate on the UI thread, and keeping it off the React render loop. The shape:

- **Interpolate position** with [Reanimated](https://docs.swmansion.com/react-native-reanimated/) (5,266,534 weekly downloads): when a new coordinate arrives, animate from the current animated position to it over roughly the update interval, using a linear or gently eased timing so the marker neither stutters nor floats unnaturally.
- **Rotate to bearing**: compute the [heading (bearing)](https://en.wikipedia.org/wiki/Bearing_(navigation)) from the previous and new points and animate the marker's rotation to it, so the car or bike points where it is going. Snap large heading changes (a turn) faster than the position ease, or the icon visibly lags the path.
- **Keep the marker out of React state**: updating component state on every frame to move a marker is the architecture that janks, the same map-per-row mistake that sinks lists; drive the marker via the map library's animated marker or a Reanimated value instead.

The map itself is whatever you already use ([react-native-maps](https://github.com/react-native-maps/react-native-maps) at 1,091,367 weekly downloads, MapLibre, or Mapbox), and the animated marker rides on top of it. For longer routes, drawing the traveled polyline behind the marker and the remaining route ahead gives the "3 stops away" context that makes the screen genuinely useful, not just decorative.

## What does an honest tracking screen actually promise?

Only what the data supports, which is the design discipline that separates a trustworthy tracker from an anxiety machine. Three honesty rules:

| Temptation | The honest version | Why |
| --- | --- | --- |
| A fake smooth ETA countdown | An ETA that updates from real position, with a range | A to-the-second countdown that jumps backward destroys trust |
| Snapping the marker to roads always | Snap when you have map-matching, show raw otherwise | Pretending GPS is road-perfect misleads |
| Marker always moving | A clear "stopped" / "arriving" state | A driver waiting at a light should not look lost |

The ETA is where most tracking screens lie: a confident "4 minutes" that silently becomes "9 minutes" reads as the app being wrong even when reality changed, so a range or a gently-updating estimate beats false precision, the same estimate-honesty as every live-data screen. And the marker needs real states beyond moving: stopped, arriving, arrived, because a frozen marker should mean "the driver is paused," signaled clearly, not "the app froze."

## What completes the live-tracking experience?

The states around the smooth dot. Stale-data handling: when position updates stop arriving (the driver lost signal), the marker should not keep gliding on dead reckoning forever, it eases to its last known point and the UI quietly notes the feed is delayed, never inventing motion. Map framing: the viewport should keep both the courier and the destination in view, auto-zooming as they converge, so the user never has to pan to find the action. And the arrival moment earns a clear transition (the marker reaching the pin, a confirmation), because that is the payoff the whole screen builds toward.

The screens, the full-bleed tracking map, the ETA and status bar, the order detail, come as a free [VP0](https://vp0.com) design, so an agent builds the Reanimated interpolation and bearing rotation onto a tracking UI that already models stopped, stale, and arriving states. The same interpolation craft scaled to many simultaneous markers is the symbol-layer approach in the flight-map build; for one courier, an animated marker is plenty.

The Korean-market map variant, custom markers on the Kakao Map SDK, is built in [the Kakao Map custom marker guide](/blogs/kakao-map-api-custom-marker-ui-swiftui/).

## Key takeaways: a live-tracking marker animation

- **Interpolate between updates and rotate to bearing**: the feed is a heartbeat, the animation makes it continuous; the marker faces its travel direction.
- **Keep the marker off React state**: drive it with Reanimated or the map's animated marker, never per-frame component re-renders.
- **The ETA must be honest**: a range or gently-updating estimate, never a to-the-second countdown that jumps backward.
- **The marker needs real states**: stopped, arriving, arrived, and stale, so a paused driver never looks like a frozen app.
- **Frame both points and own the arrival**: keep courier and destination in view, and make the arrival moment a clear transition.

## Frequently asked questions

**How do I animate a live-tracking map marker in React Native?** Interpolate the marker's coordinate with Reanimated from its current position to each new one over the update interval, rotate it to the computed bearing so it faces its travel direction, and keep it off React component state so it does not jank. A free VP0 design supplies the tracking-map and status screens to build the animation onto.

**Why does my map marker jump between location updates?** Because location arrives every few seconds while the courier moves continuously, so setting the marker straight to each coordinate teleports it. Animate from the current position to the new one over roughly the interval, with bearing rotation, so it glides like a vehicle on a road rather than blinking around the map.

**How do I keep the tracking marker from causing lag?** Drive it on the UI thread with Reanimated or your map library's animated marker, never by updating React component state every frame. Per-frame re-renders to move a marker are the architecture that janks, the same mistake as rebuilding heavy list rows on each update.

**How should the ETA behave on a tracking screen?** Honestly: update it from the real position and show a range or a gently-changing estimate rather than a to-the-second countdown. A confident ETA that jumps backward reads as the app being wrong even when reality changed, so false precision costs more trust than an honest range.

**What happens when the driver's location stops updating?** The marker should ease to its last known point and stop, with the UI quietly noting the feed is delayed, rather than gliding forever on dead reckoning and inventing motion. A frozen feed should read as a paused or stale state, not as continued movement the data does not support.

## Frequently asked questions

### How do I animate a live-tracking map marker in React Native?

Interpolate the marker's coordinate with Reanimated from its current position to each new one over the update interval, rotate it to the computed bearing so it faces its travel direction, and keep it off React component state so it does not jank. A free VP0 design supplies the tracking-map and status screens to build the animation onto.

### Why does my map marker jump between location updates?

Because location arrives every few seconds while the courier moves continuously, so setting the marker straight to each coordinate teleports it. Animate from the current position to the new one over roughly the interval, with bearing rotation, so it glides like a vehicle on a road rather than blinking around the map.

### How do I keep the tracking marker from causing lag?

Drive it on the UI thread with Reanimated or your map library's animated marker, never by updating React component state every frame. Per-frame re-renders to move a marker are the architecture that janks, the same mistake as rebuilding heavy list rows on each update.

### How should the ETA behave on a tracking screen?

Honestly: update it from the real position and show a range or a gently-changing estimate rather than a to-the-second countdown. A confident ETA that jumps backward reads as the app being wrong even when reality changed, so false precision costs more trust than an honest range.

### What happens when the driver's location stops updating?

The marker should ease to its last known point and stop, with the UI quietly noting the feed is delayed, rather than gliding forever on dead reckoning and inventing motion. A frozen feed should read as a paused or stale state, not as continued movement the data does not support.

---
*Published on the [VP0 Journal](https://vp0.com/blogs). Free to read, index and cite with attribution.*