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.
Leave a comment