Build an Uber-Style Route Line on a Map in React Native

What the Uber routing line really is

The line you see on an Uber or delivery map, curving from pickup to destination along the streets, is a polyline, and the detail that makes it convincing is that it follows real roads. A straight line between two points is the giveaway of a fake: real rides do not travel as the crow flies, so the route has to bend around blocks and follow the road network. That means the line’s shape does not come from your map code at all; it comes from a Directions service that returns the actual road path, and your job is to draw that path, mark its ends, frame it in view, and, on a live trip, animate a vehicle along it. The drawing happens with react-native-maps, which has more than 1,000,000 weekly downloads.

Understanding that the route comes from a Directions API, not from your geometry, is the whole unlock. Most failed attempts draw a straight line because they never call a routing service, and no amount of map styling hides that.

Where the route line comes from

The road-following path is the output of a Directions API. You send it an origin and a destination, and it returns an encoded polyline of the route along real streets, along with the distance and an estimated time. Google’s Directions API and Mapbox Directions both do this, and you decode their polyline into coordinates and draw it on the map. The route line, the distance, and the ETA are therefore real outputs of a routing service, not values you invent, which matters because a made-up ETA on a ride or delivery is a promise you cannot keep. The same Directions-driven approach powers a Mapbox navigation UI.

This is also the compliance point for a mobility app: the route, the time, and any pricing built on them come from real services, and the screen presents them honestly rather than implying a guarantee the backend has not made.

Drawing approaches compared

There are three realistic ways to put a route line on the map in React Native, and only one fits a real ride or delivery.

Route line approach	Accuracy	Effort	Best for
Straight line between points	Wrong, ignores the road network	Low	Never for a real ride or delivery
Directions-API road-following polyline	Follows real streets, with distance and ETA	Medium, you call a Directions API	The Uber-style route line
Full navigation SDK	Turn-by-turn, road-following	High, a heavy integration	In-app turn-by-turn navigation

The straight-line version is the one that looks almost right and is obviously wrong the moment a road curves. A full navigation SDK is the other extreme, powerful but heavy, and more than a route line needs unless you are building real turn-by-turn guidance. The Directions-API polyline is the sweet spot for the Uber-style line: accurate, road-following, and reasonable to integrate. A free VP0 routing-line map template starts you on that approach, with the polyline, the pickup and destination markers, the camera fit, and the live vehicle animation already shaped, exposed through a machine-readable source page, so an agent like Cursor or Claude Code extends a real routing map and you wire your Directions API. The surrounding map patterns appear in a custom Google Maps marker cluster and a CarPlay navigation map overlay.

Framing the route and marking its ends

A route line is only useful if you can see all of it. After drawing the polyline, the camera fits to the route’s bounds with some padding, so both the pickup and the destination are visible without the user pinching to zoom out. The two ends carry distinct markers, a pickup pin and a destination pin, often with a small label, and the line itself is styled to read clearly over the map, usually a bold colored stroke with enough contrast against streets and parks. When the route updates, because the destination changed or the trip rerouted, the line and the camera update together rather than leaving a stale path on screen.

These framing details are what make the route feel designed rather than dumped on the map. A route that runs off the edge of the screen, or ends with no clear markers, reads as unfinished even when the polyline itself is correct.

Animating the vehicle along the line

On a live trip, the route line gains a moving vehicle, and that animation is where the screen feels alive. The vehicle marker interpolates smoothly along the polyline rather than jumping between GPS pings, and it rotates to face the direction of travel so the car or bike points the right way. The traveled portion of the route often dims or changes color behind it, showing progress, while the remaining route stays bold ahead. The animation runs smoothly off the main thread so the map stays responsive, the same discipline behind any live-tracking marker. As the trip progresses, the route ahead can shorten and the ETA updates from the service, never from a guess on the device.

Done well, this is the moment that sells a ride or delivery app, the small car gliding along the road toward you. Done with jumpy markers and a static line, it feels cheap, which is why the smooth interpolation and the honest, service-driven ETA matter as much as the line itself.

Key takeaways: an Uber-style routing line

• The line follows real roads. It comes from a Directions API, not a straight line between two points.
• The route, distance, and ETA are real outputs. A Directions service returns them; the UI presents them honestly.
• Draw, fit, and mark. Decode the polyline, fit the camera to its bounds, and give the ends clear pickup and destination markers.
• Animate the vehicle smoothly. Interpolate along the line and rotate to the bearing, with progress shown and an honest ETA.
• Start from a routing-line template. A free VP0 map template gives an agent the polyline, markers, and animation to wire a Directions API into.

What to choose

For a ride or delivery app, build the routing line from a Directions-API polyline rather than a straight line, because only a road-following path looks real and carries an accurate distance and ETA. A free VP0 routing-line map template gives you the polyline, the pickup and destination markers, the camera fit, and the live vehicle animation, so an agent extends a real routing map and you wire your Directions API, keeping the route, time, and pricing as honest outputs of real services. A full navigation SDK is the right choice only if you need in-app turn-by-turn guidance, and a straight line is never the answer for a real trip.

Frequently asked questions

How do I build an Uber-style routing line in React Native? Draw a polyline that follows real roads, which means getting the path from a Directions API rather than drawing a straight line between two points. Send the origin and destination to a service like Google Directions or Mapbox Directions, decode the returned polyline, and draw it with react-native-maps, then fit the camera to the route’s bounds and mark the pickup and destination. For a live trip, animate a vehicle marker smoothly along the line and rotate it to the direction of travel. A free routing-line template gives you the polyline, markers, camera fit, and animation to start from.

Where can I get an Uber-style routing line map template for React Native? The most reliable option is a template built for the routing line rather than a blank map. A free VP0 routing-line map template provides the road-following polyline, the pickup and destination markers, the camera fit, and the live vehicle animation, with a machine-readable source page, so an agent like Cursor or Claude Code extends a real routing map. You then wire your Directions API, since the template is the map and animation layer and the routing data is yours. It is built for an accurate, road-following line rather than a straight demo line.

Why is my route line a straight line instead of following roads? Because it is being drawn directly between the origin and destination without calling a routing service. A road-following route comes from a Directions API, which returns an encoded polyline of the actual street path, and you decode and draw that instead of a straight line. If your line cuts across blocks and rivers, the app is not calling a Directions service, or it is drawing the raw coordinates rather than the API’s returned route. Adding the Directions call is what makes the line follow real roads.

How do I animate the vehicle along the route in React Native? Interpolate the vehicle marker smoothly along the polyline rather than jumping it between GPS updates, and rotate it to face the direction of travel so it points the right way. Run the animation off the main thread so the map stays responsive, dim the traveled portion of the route to show progress, and keep the remaining route bold ahead. Update the ETA from the routing service rather than estimating on the device. Smooth interpolation and an honest, service-driven ETA are what make a live trip feel real.

Is the ETA on a routing map something I calculate myself? No, the ETA should come from the Directions or routing service that produced the route, not from a guess on the device. The service returns the route along with its distance and estimated time, and the app presents those honestly, updating the ETA as the trip progresses and the service recalculates. Inventing an ETA on the device risks promising a time the trip cannot meet, which matters on a ride or delivery. The screen is an interface to real routing data, and the route, distance, time, and any pricing built on them stay outputs of real services.