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) →
Consider donating.
I don’t run ads on my blog nor do I do this for profit. A donation however would always put a smile on my face though. Thanks!