Skip to main content

​
Quickstart

This guide will help you render your first route on a map using react-native-maps-routes.

​
Prerequisites

Before starting, make sure you’ve completed the Installation guide:
  • react-native-maps-routes is installed
  • react-native-maps is configured for your platform
  • You have a valid Google Maps Routes API key

​
Build your first route

1

Import the component

Import MapViewRoute from react-native-maps-routes along with the necessary components from react-native-maps:
import React from 'react';
import { StyleSheet, View } from 'react-native';
import MapView from 'react-native-maps';
import { MapViewRoute } from 'react-native-maps-routes';
2

Define your route coordinates

Define the origin and destination coordinates as LatLng objects:
const origin = { 
  latitude: 37.332280, 
  longitude: -122.010980 
};

const destination = { 
  latitude: 37.423199, 
  longitude: -122.084068 
};

const GOOGLE_MAPS_APIKEY = 'your_api_key_here';
These coordinates represent a route from Apple Park in Cupertino to Googleplex in Mountain View, California.
3

Render the route inside MapView

Create a MapView component and render MapViewRoute as a child. Pass the required props:
export default function App() {
  return (
    <View style={styles.container}>
      <MapView
        style={styles.map}
        initialRegion={{
          latitude: (origin.latitude + destination.latitude) / 2,
          longitude: (origin.longitude + destination.longitude) / 2,
          latitudeDelta: 0.2,
          longitudeDelta: 0.2,
        }}
      >
        <MapViewRoute
          origin={origin}
          destination={destination}
          apiKey={GOOGLE_MAPS_APIKEY}
        />
      </MapView>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
  },
  map: {
    width: '100%',
    height: '100%',
  },
});
4

Run your app

Run your app on iOS or Android:
npx react-native run-ios
You should see a map with a route drawn between your origin and destination coordinates.

​
Complete example

Here’s the complete working example: 
import React from 'react';
import { StyleSheet, View } from 'react-native';
import MapView from 'react-native-maps';
import { MapViewRoute } from 'react-native-maps-routes';

const origin = { latitude: 37.332280, longitude: -122.010980 };
const destination = { latitude: 37.423199, longitude: -122.084068 };
const GOOGLE_MAPS_APIKEY = 'your_api_key_here';

export default function App() {
  return (
    <View style={styles.container}>
      <MapView
        style={styles.map}
        initialRegion={{
          latitude: (origin.latitude + destination.latitude) / 2,
          longitude: (origin.longitude + destination.longitude) / 2,
          latitudeDelta: 0.2,
          longitudeDelta: 0.2,
        }}
      >
        <MapViewRoute
          origin={origin}
          destination={destination}
          apiKey={GOOGLE_MAPS_APIKEY}
        />
      </MapView>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
  },
  map: {
    width: '100%',
    height: '100%',
  },
});

​
How it works

When you render MapViewRoute:
  1. The component makes a request to the Google Maps Routes API with your origin and destination coordinates
  2. The API computes the optimal route based on the travel mode (defaults to WALK)
  3. The route polyline is decoded and rendered as a Polyline component on the map
  4. The route automatically updates when you change the origin, destination, or other route parameters
By default, routes use the WALK travel mode. You can change this by setting the mode prop to DRIVE, BICYCLE, or TWO_WHEELER.

​
Customize your route

You can customize the route appearance and behavior with additional props: 
<MapViewRoute
  origin={origin}
  destination={destination}
  apiKey={GOOGLE_MAPS_APIKEY}
  mode="DRIVE"
  strokeColor="#FF0000"
  strokeWidth={5}
  onReady={(coordinates) => {
    console.log('Route is ready with', coordinates.length, 'points');
  }}
  onError={(error) => {
    console.error('Route error:', error);
  }}
/>
This example:
  • Uses driving directions (mode="DRIVE")
  • Draws the route in red (strokeColor="#FF0000")
  • Uses a thicker line (strokeWidth={5})
  • Logs when the route is ready
  • Handles errors gracefully

​
Next steps

Now that you have a basic route working, explore more advanced features:

Add waypoints

Add intermediate stops along your route

Travel modes

Configure driving, walking, cycling, or two-wheeler routes

Route modifiers

Avoid tolls, highways, ferries, or indoor steps

Get ETA and distance

Fetch estimated travel time and route distance
For a complete reference of all available props and callbacks, see the API Reference.

Build docs developers (and LLMs) love

Get started for freeTalk to us