react-native-maps-directions – Directions/Routing component for react-native-maps

One of the things I found missing in the aforementioned react-native-maps was the ability to route between to coordinates.

Combining the feedback from the related issues on GitHub (#52, #778, and #929) I’ve created a standalone component that does exactly that.

The MapViewDirections component can route between an origin and destination coordinate. As routing is handled by the Google Maps Directions API, an apikey for use with Google Maps is also required:

<MapView initialRegion={…}>
  <MapView.Marker coordinate={origin} />
  <MapView.Marker coordinate={destination} />

Once the directions in between both coordinates has been fetched, a MapView.Polyline between the two will be drawn. Therefore all MapView.Polyline props – except for coordinates – are also accepted.

Installation per npm/yarn:

yarn add react-native-maps-directions

react-native-maps-directions (GitHub) →

Original Content , , ,

7 Responses to react-native-maps-directions – Directions/Routing component for react-native-maps

  1. Arulraj says:

    Hi, can you explain to update origin and destination dynamically?

  2. Neung says:

    Hello, I can show time(duration) and distance between origin and destination ?

  3. Adam says:


    It doesn’t work for me, even though my code looks exactly the same as the one illustrated. In the MapViewDirections tag it only works if I define longitude and latitude directly and not if I reference the array called coordinates. What could be the problem?

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.