Are you fed up with react-native-maps? Or want a change from Google Maps? In this tutorial, I explain how to use Mapbox Maps in your React Native project.
Update: This tutorial is outdated and a new blog post on Mapbox integration is here – How to integrate Mapbox in React Native.
First of all signup an account here and obtain Mapbox token. Install React Native Mapbox with the following command:
npm install @mapbox/react-native-mapbox-gl --save
If you’re using yarn, use the one given below:
yarn add @mapbox/react-native-mapbox-gl
Now make some native changes to your project as the installation guide given in the following links:
That’s all need for Mapbox react native setup. Now use the code given below to show a map and a specific annotation in it.
import React, { Component } from 'react';
import { View, StyleSheet } from 'react-native';
import Mapbox from '@mapbox/react-native-mapbox-gl';
Mapbox.setAccessToken(
'UseYourMapboxTokenHere'
);
export default class MyComponent extends Component {
renderAnnotations() {
return (
<Mapbox.PointAnnotation
key="pointAnnotation"
id="pointAnnotation"
coordinate={[11.254, 43.772]}>
<View style={styles.annotationContainer}>
<View style={styles.annotationFill} />
</View>
<Mapbox.Callout title="An annotation here!" />
</Mapbox.PointAnnotation>
);
}
render() {
return (
<View style={styles.container}>
<Mapbox.MapView
styleURL={Mapbox.StyleURL.Street}
zoomLevel={15}
centerCoordinate={[11.256, 43.77]}
style={styles.container}>
{this.renderAnnotations()}
</Mapbox.MapView>
</View>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1
},
map: {
height: 400,
marginTop: 80
},
annotationContainer: {
width: 30,
height: 30,
alignItems: 'center',
justifyContent: 'center',
backgroundColor: 'white',
borderRadius: 15
},
annotationFill: {
width: 30,
height: 30,
borderRadius: 15,
backgroundColor: 'blue',
transform: [{ scale: 0.6 }]
}
});
Replace ‘UseYourMapboxTokenHere’ in the code with your Mapbox token which you obtained.
If you want to dig more then refer the official Mapbox documentation and tutorials.
