Skip to main content

​
Overview

MapViewRoute is the main component of the react-native-maps-routes library. It renders a polyline route on a react-native-maps MapView using the Google Routes API to compute the optimal path between two or more locations. The component automatically fetches route data from Google’s Routes API and renders it as a polyline overlay on your map.

​
Import

import { MapViewRoute } from 'react-native-maps-routes';

​
Props

​
Required Props

​
origin
LatLng
required
Starting point of the route. Must be a react-native-maps LatLng object with latitude and longitude properties.
{ latitude: 37.7749, longitude: -122.4194 }
​
destination
LatLng
required
Ending point of the route. Must be a react-native-maps LatLng object with latitude and longitude properties.
{ latitude: 34.0522, longitude: -118.2437 }
​
apiKey
string
required
Your Google Maps API key with the Routes API enabled.

​
Optional Props

​
waypoints
LatLng[]
Array of intermediate points the route should pass through.
[
  { latitude: 36.7783, longitude: -119.4179 },
  { latitude: 35.6870, longitude: -120.8089 }
]
​
mode
TravelMode
default:"WALK"
Travel mode for route calculation. One of: "DRIVE", "BICYCLE", "TWO_WHEELER", or "WALK".
​
strokeColor
string
default:"#000"
Color of the route line in hex format.
​
strokeWidth
number
default:6
Width of the route line in pixels.
​
lineJoin
LineJoinType
default:"round"
How line segments are joined. One of: "round", "bevel", or "miter".
​
lineCap
LineCapType
default:"round"
How line ends are drawn. One of: "round", "butt", or "square".
​
routeModifiers
RouteModifiers
Options to modify route calculation such as avoiding tolls, highways, or ferries. See the Types page for details.
​
requestBodyOverrides
Partial<ComputeRoutesRequestBody> & Record<string, unknown>
Override or add any field to the request body sent to Google Routes API. Applied after built-in fields. See Google Routes API documentation.
​
enableEstimatedTime
boolean
default:false
Enable calculation and callback of estimated travel time. Must be true for onEstimatedTime callback to fire.
​
enableDistance
boolean
default:false
Enable calculation and callback of route distance. Must be true for onDistance callback to fire.
​
legFields
LegField[]
Array of leg fields to request from the API. Required for onLegs callback. See Types for available fields.
​
legStepFields
LegStepField[]
Array of leg step fields to request from the API. Enables step-by-step navigation data. See Types for available fields.
For callback props, see the Callbacks page.

​
Usage Example

import React from 'react';
import MapView from 'react-native-maps';
import { MapViewRoute } from 'react-native-maps-routes';

export default function MapScreen() {
  const [estimatedTime, setEstimatedTime] = React.useState<number>(0);
  const [distance, setDistance] = React.useState<number>(0);

  const origin = { latitude: 37.7749, longitude: -122.4194 };
  const destination = { latitude: 34.0522, longitude: -118.2437 };

  return (
    <MapView
      style={{ flex: 1 }}
      initialRegion={{
        latitude: 36.1699,
        longitude: -115.1398,
        latitudeDelta: 5,
        longitudeDelta: 5,
      }}
    >
      <MapViewRoute
        origin={origin}
        destination={destination}
        apiKey="YOUR_GOOGLE_MAPS_API_KEY"
        mode="DRIVE"
        strokeColor="#0066FF"
        strokeWidth={4}
        enableEstimatedTime
        enableDistance
        onEstimatedTime={(time) => setEstimatedTime(time)}
        onDistance={(dist) => setDistance(dist)}
        onReady={(coords) => console.log('Route ready with', coords.length, 'points')}
        onError={(error) => console.error('Route error:', error)}
        routeModifiers={{
          avoidTolls: true,
          avoidHighways: false,
        }}
      />
    </MapView>
  );
}

​
See Also

Build docs developers (and LLMs) love

Get started for freeTalk to us