Tag Archives: mapkit

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

Did this help you out? Like what you see?
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!

☕️ Buy me a Coffee ($3)

react-native-maps – React Native Mapview component for iOS + Android

On a React Native project I’m currently working on, I’m implementing native (vector) mapviews. Gladly there’s react-native-maps by AirBnB to handle it all.

import React, { Component } from 'react';
import MapView from 'react-native-maps';

class MapViewExample extends Component {

  constructor(props) {
    super(props);
    this.state = {
      region: {
        latitude: 37.78825,
        longitude: -122.4324,
        latitudeDelta: 0.0922,
        longitudeDelta: 0.0421,
      },
      markers: [
      ],
    };
  }

  onRegionChange = (region) => {
    this.setState({ region });
  }

  onMapPress = (e) => {
    this.setState({
      markers: [
        ...this.state.markers,
        {
          coordinate: e.nativeEvent.coordinate,
          key: `marker_${this.state.markers.length}`,
        },
      ],
    });
  }

  render() {
    return (
      <MapView
        region={this.state.region}
        onRegionChange={this.onRegionChange}
        onPress={this.onMapPress}
      >
        {this.state.markers.map(marker => (
          <MapView.Marker
            coordinate={marker.coordinate}
            key={marker.key}
          />
        ))}
      </MapView>
    );
  }

}

By default uses Mapkit on iOS, and Google Maps on Android. It’s also possible to use Google Maps on iOS.

react-native-maps →