Draw Directions on Maps in React Native

Last updated on May 17, 2026

Drawing directions in a React Native app usually starts with a simple map polyline. A straight polyline is enough for connecting two coordinates visually, but real turn-by-turn-looking routes need a routing service such as Google Routes API, Mapbox Directions, HERE Routing, or a backend you control.

This guide shows the difference between drawing a line and drawing a real route, then explains how to keep API keys, billing, and mobile permissions under control.

Quick Answer

Use react-native-maps for rendering the map and Polyline for drawing the route shape:

import MapView, { Marker, Polyline } from 'react-native-maps';

const coordinates = [
  { latitude: 37.7749, longitude: -122.4194 },
  { latitude: 37.7849, longitude: -122.4094 },
];

export function RoutePreview() {
  return (
    <MapView
      style={{ flex: 1 }}
      initialRegion={{
        latitude: coordinates[0].latitude,
        longitude: coordinates[0].longitude,
        latitudeDelta: 0.05,
        longitudeDelta: 0.05,
      }}
    >
      <Marker coordinate={coordinates[0]} />
      <Marker coordinate={coordinates[1]} />
      <Polyline coordinates={coordinates} strokeWidth={5} strokeColor="#111827" />
    </MapView>
  );
}

That draws a straight line. For actual driving, walking, cycling, or transit directions, fetch a route from a routing API and render the decoded polyline.

Straight Line vs Real Route

There are two different features developers often call "directions":

Feature	What it draws	API needed
Straight polyline	A direct line between points	No routing API
Real route	A path along roads, paths, or transit lines	Routing API such as Google Routes API

A straight line is useful for:

• showing selected start/end points;
• rough distance previews;
• map annotations;
• connecting saved places.

A real route is needed for:

• taxi pickup/dropoff;
• delivery route previews;
• driver dispatch;
• ETA and distance estimates;
• turn-by-turn-like route display.

Mega Bundle Sale is ON! Get ALL of our React Native codebases at 90% OFF discount 🔥

Get the Mega Bundle

Install and Configure Maps

Use the version and package manager declared by your app. A typical install is:

corepack yarn add react-native-maps

For apps using Expo config plugins, follow the current react-native-maps plugin docs and pass platform-specific Google Maps keys when using Google as the provider.

For bare React Native projects:

cd ios
pod install

On Android, the Google Maps API key is configured in android/app/src/main/AndroidManifest.xml:

<application>
  <meta-data
    android:name="com.google.android.geo.API_KEY"
    android:value="YOUR_ANDROID_MAPS_KEY" />
</application>

On iOS, you can use Apple Maps or configure Google Maps. If you use Google Maps on iOS, add the Google Maps SDK setup required by react-native-maps and use an iOS-restricted API key.

Draw a Straight Polyline

This is the simplest version:

import MapView, { Marker, Polyline } from 'react-native-maps';

const origin = { latitude: 40.7484, longitude: -73.9857 };
const destination = { latitude: 40.758, longitude: -73.9855 };

export function StraightLineMap() {
  return (
    <MapView
      style={{ flex: 1 }}
      initialRegion={{
        latitude: origin.latitude,
        longitude: origin.longitude,
        latitudeDelta: 0.04,
        longitudeDelta: 0.04,
      }}
    >
      <Marker coordinate={origin} title="Origin" />
      <Marker coordinate={destination} title="Destination" />
      <Polyline
        coordinates={[origin, destination]}
        strokeColor="#2563eb"
        strokeWidth={5}
      />
    </MapView>
  );
}

The map does not need user location permission unless you also show the user's current location or center the map on it.

Draw a Real Route

For a real route, fetch route geometry from a routing service. The safest architecture is usually:

1. Mobile app sends origin/destination to your backend.
2. Backend calls the routing provider using a server-side key.
3. Backend returns only the route data the app needs.
4. Mobile app decodes and renders the polyline.

This keeps server-side keys out of the app, lets you add caching, and gives you one place to enforce quotas and abuse protection.

Example mobile call:

type LatLng = {
  latitude: number;
  longitude: number;
};

export async function fetchRoute(origin: LatLng, destination: LatLng) {
  const response = await fetch('https://api.yourapp.com/routes', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify({ origin, destination }),
  });

  if (!response.ok) {
    throw new Error('Unable to load route');
  }

  return response.json() as Promise<{ coordinates: LatLng[] }>;
}

Render the returned coordinates:

<Polyline
  coordinates={route.coordinates}
  strokeColor="#111827"
  strokeWidth={5}
  lineCap="round"
  lineJoin="round"
/>

If you choose to call a Maps Platform web service directly from the mobile app, follow Google's current mobile API key security guidance, restrict the key by platform and API, and monitor usage closely.

Google Routes API and Directions API

Many older tutorials use Google Directions API examples directly from the client. For new work, check the current Google Maps Platform routing docs before choosing an API. Google Routes API is the current routing surface for many use cases, while older Directions API examples may still appear in legacy tutorials and packages.

When using Google routing:

• enable billing on the Google Cloud project;
• restrict API keys by platform and API;
• use separate keys for Android, iOS, and backend services;
• request only the fields the app needs;
• cache repeated route lookups when product behavior allows it;
• set quotas and billing alerts;
• avoid route recalculation on every location tick.

Permissions for Directions

Drawing a saved route does not require location permission. You need location permission only when the app uses the device's current location.

Common cases:

Use case	Permission
Show route between two saved addresses	No device location permission required.
Use current location as origin	Foreground location permission.
Track a delivery driver while the app is backgrounded	Background location permission, if the product and store policies justify it.
Update route while user moves on an active trip	Foreground or background location depending on whether tracking continues outside the app.

Read React Native Location Services before adding tracking to a map route.

Cost Controls

Routes, geocoding, Places, distance matrix, and map loads can all create cloud costs depending on provider and usage.

Practical controls:

• debounce route requests;
• recalculate only when origin or destination changes meaningfully;
• cache routes for repeated pickup/dropoff pairs;
• avoid calling route APIs from background loops;
• use one map per screen where possible;
• set Cloud Billing budgets and alerts;
• set API quotas in Google Cloud Console;
• log route request volume by feature.

For delivery or taxi products, route and location costs should be part of the launch checklist, not a surprise after launch.

Example: Route Screen Structure

A production route screen usually has these layers:

RouteScreen
  MapView
    OriginMarker
    DestinationMarker
    DriverMarker (optional)
    RoutePolyline
  BottomSheet
    Address summary
    ETA / distance
    Confirm action

Keep the routing request outside the rendering loop. Fetch when inputs change, store the route in state, then render.

useEffect(() => {
  let mounted = true;

  async function loadRoute() {
    const nextRoute = await fetchRoute(origin, destination);

    if (mounted) {
      setRoute(nextRoute);
    }
  }

  loadRoute().catch(setRouteError);

  return () => {
    mounted = false;
  };
}, [origin, destination]);

Useful Links

• React Native Maps Integration
• React Native Location Services
• Location Core Module
• Taxi App Getting Started
• Uber Eats Order Tracking and Driver Dispatching
• react-native-maps installation docs
• Google Routes API documentation
• Google Maps Platform API security guidance
• Google Maps Platform cost management

Looking for a custom mobile application?

Our team of expert mobile developers can help you build a custom mobile app that meets your specific needs.

Get in Touch

FAQ

Why is my polyline a straight line?

Because Polyline draws exactly the coordinates you give it. If you pass only origin and destination, it draws a direct line. Fetch and decode route geometry from a routing API to draw the road path.

Should I use react-native-maps-directions?

It can be useful for prototypes, but production apps should still think about API key exposure, provider choice, caching, quota, and cost. A backend route endpoint is often safer for serious apps.

Does drawing directions require location permission?

No. Directions between fixed coordinates do not need device location access. You need permission only when using the user's current location or tracking movement.

Why is the route API expensive?

Cost depends on provider, SKU, request volume, fields, route options, and traffic features. Set quotas, budgets, and request throttling before launch.

Conclusion

Drawing directions in React Native is straightforward when the architecture is clear. Use react-native-maps for rendering, Polyline for route geometry, a routing provider for real road paths, and a backend layer when you need better security, caching, and cost control.