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} />
  <MapViewDirections
    origin={origin}
    destination={destination}
    apikey={GOOGLE_MAPS_APIKEY}
  />
</MapView>

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) →

Elsewhere , , , ,

Leave a Reply

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