Mapbox is one of the most usable location data platform for both mobile and web developers. Mapbox is similar like Google Maps but it is way more easy to integrate. They have their own data centers and location data which gives us perfect location data. Mapbox provides us location data, searching location and navigate to particular location and many other features. In react native we can easily integrate Mapbox by installing NPM Mapbox package in our current react native project. So in this tutorial we would React Native Integrate Mapbox in Android iOS App Example Tutorial. Getting Started with MapBox in react native.
Contents in this project React Native Integrate Mapbox in Android iOS Example Tutorial:
1. The first step is to install the Mapbox NPM package in your current react native project. So open your react native project Root directory in Command Prompt in Windows and Terminal in MAC and execute below command.
|
1
|
npm install @react–native–mapbox–gl/maps —save
|
Screenshot of CMD:
Screenshot of CMD after done installation:
2. Now the library is successfully download and installed. Next step is to setup Mapbox for both Android and iOS platforms.
Note:- There is no need to do any additional step in Android. Just install the above library and you are ready to go in Android platform for using Mapbox.
3. Setting up Mapbox in iOS platform:
1. In iOS we have to do some additional step to work with Mapbox. So GoTo Your_React_Native_Project -> ios -> Podfile in any Text editor. I am using Visual Studio Code.
2. Add below line in Podfile like i did in below screenshot.
|
1
|
pod ‘react-native-mapbox-gl’, :path => ‘../node_modules/@react-native-mapbox-gl/maps’
|
Screenshot:
3. Now Open Terminal and GoTo Your_React_Native_Project -> iOS directory and execute below command to install and synchronize Pod.
|
1
|
pod install
|
Screenshot of Terminal:
Screenshot after done installation:
Here we go now our React Native iOS project is ready to use with Mapbox. Next step is to Get Mapbox Online access token for their website.
4. Now all the configuration part has been done. Next step is to Open Mapbox.com and Sign in with your email ID. We have to create account on Mapbox website. It’s free guys.
5. After successfully done the Sign Up process it will ask us to verify our email address and when we verify our email address it will give us the Access Token which we would use in our React Native project. See the below screenshot to see how Access token will look like. Now copy the Access token.
6. Now it’s time to start application Coding. Open your project’s main App.js file and import StyleSheet and View component.
|
1
2
3
|
import React, {Component} from ‘react’;
import {StyleSheet, View} from ‘react-native’;
|
7. Import MapboxGL component from react-native-mapbox-gl/maps library in your react native project.
|
1
|
import MapboxGL from ‘@react-native-mapbox-gl/maps’;
|
8. Creating MapboxGL.setAccessToken() object with your Access Token which you have copied from their website.
|
1
2
3
|
MapboxGL.setAccessToken(
‘pk.eyJ1IjoicmVhY3RuYXRpdmVjb2RlIiwiYSI6ImNrYXVqMmdyNjBib2MyeG85eXpmazlkbnQifQ.WXfj-SB3qxEvyZHBYdt3RQ’,
);
|
9. Creating console.disableYellowBox with true value to hide any type of yellow warning messages from app screen.
|
1
|
console.disableYellowBox = true;
|
10. Creating our main export default App class extends with Component.
|
1
2
3
4
5
|
export default class App extends Component {
}
|
11. Creating Constructor in our main Class here we would make a State array and pass Longitude and Latitude here.
|
1
2
3
4
5
6
7
8
9
|
constructor(props) {
super(props);
this.state = {
// Here -122.4324 is Longitude.
// Here 37.78825 is Latitude.
coordinates: [–122.4324, 37.78825],
};
}
|
12. Creating the MapboxGL.MapView, MapboxGL.Camera and MapboxGL.PointAnnotation component in render’s return block.
- MapboxGL.MapView :- is Used to show us the Map on Screen.
- MapboxGL.Camera :- is used to display a fix particular area on Screen with Zoom in Zoom out effect.
- MapboxGL.PointAnnotation :- is used to annotate a particular location on Map Screen with highlighter.
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
|
render() {
return (
<View style={styles.MainContainer}>
<View style={styles.SubContainer}>
<MapboxGL.MapView style={styles.Mapbox}>
<MapboxGL.Camera
zoomLevel={9}
centerCoordinate={this.state.coordinates}
/>
<MapboxGL.PointAnnotation coordinate={this.state.coordinates} />
</MapboxGL.MapView>
</View>
</View>
);
}
|
13. Creating Style.
|
1
2
3
4
5
6
7
8
9
10
11
12
13
|
const styles = StyleSheet.create({
MainContainer: {
flex: 1,
},
SubContainer: {
height: ‘100%’,
width: ‘100%’,
backgroundColor: ‘white’,
},
Mapbox: {
flex: 1,
},
});
|
14. Complete Source Code for App.js file:
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
|
import React, {Component} from ‘react’;
import {StyleSheet, View} from ‘react-native’;
import MapboxGL from ‘@react-native-mapbox-gl/maps’;
MapboxGL.setAccessToken(
‘pk.eyJ1IjoicmVhY3RuYXRpdmVjb2RlIiwiYSI6ImNrYXVqMmdyNjBib2MyeG85eXpmazlkbnQifQ.WXfj-SB3qxEvyZHBYdt3RQ’,
);
console.disableYellowBox = true;
export default class App extends Component {
constructor(props) {
super(props);
this.state = {
// Here -122.4324 is Longitude.
// Here 37.78825 is Latitude.
coordinates: [–122.4324, 37.78825],
};
}
render() {
return (
<View style={styles.MainContainer}>
<View style={styles.SubContainer}>
<MapboxGL.MapView style={styles.Mapbox}>
<MapboxGL.Camera
zoomLevel={9}
centerCoordinate={this.state.coordinates}
/>
<MapboxGL.PointAnnotation coordinate={this.state.coordinates} />
</MapboxGL.MapView>
</View>
</View>
);
}
}
const styles = StyleSheet.create({
MainContainer: {
flex: 1,
},
SubContainer: {
height: ‘100%’,
width: ‘100%’,
backgroundColor: ‘white’,
},
Mapbox: {
flex: 1,
},
});
|
Screenshot in Android device:
Screenshot in iOS device:
Also Read :
React Native Detect App is in Background or Foreground using AppState
React Native NetInfo Example to Detect Internet Connection Android iOS
Create Horizontal ScrollView in React Native Tutorial Android iOS
React Native Increase Width Height of View using Animation Tutorial
Create Initialize Integer String Boolean Float Variables in React Native
