React Native Integrate Mapbox in Android iOS Example Tutorial

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.

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.

Screenshot:

3. Now Open Terminal and GoTo Your_React_Native_Project -> iOS directory and execute below command to install and synchronize Pod.

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.

7. Import MapboxGL component from react-native-mapbox-gl/maps library in your react native project.

8. Creating MapboxGL.setAccessToken() object with your Access Token which you have copied from their website.

9. Creating console.disableYellowBox with true value to hide any type of yellow warning messages from app screen.

10. Creating our main export default App class extends with Component.

11. Creating Constructor in our main Class here we would make a State array and pass Longitude and Latitude here.

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.

13. Creating Style.

14. Complete Source Code for App.js file:

Screenshot in Android device:

React Native Integrate Mapbox in Android iOS Example TutorialScreenshot in iOS device:

React Native Integrate Mapbox in Android iOS Example Tutorial

Leave a Reply

Your email address will not be published. Required fields are marked *