DEV Community

Mapbox profile image Chris Whong
Chris Whong for Mapbox

Posted on

Quickstart: Mapbox in React Native

#mobile #reactnative #tutorial

This is a condensed version of the full React Native Mapbox tutorial. For advanced features, troubleshooting, and more, check out the full tutorial.

@rnmapbox/maps is a community-maintained react native package that wraps the Mapbox Maps SDKs for iOS and Android, allowing for development of cross-platform mobile mapping apps.

Screenshot of an iOS emulator showing a Mapbox map centered over New York City

1. Create a New React Native Project 

npx @react-native-community/cli@latest init MyMapboxApp
cd MyMapboxApp
Enter fullscreen mode Exit fullscreen mode

2. Install Mapbox Dependencies 

npm install @rnmapbox/maps
Enter fullscreen mode Exit fullscreen mode

3. Mapbox Access Token & Platform-specific Setup

Get a token from your Mapbox account.

iOS Setup

  • Podfile hooks: In your ios/Podfile, add the following inside your app's target block: 
   pre_install do |installer|
     $RNMapboxMaps.pre_install(installer)
   end

   post_install do |installer|
     $RNMapboxMaps.post_install(installer)
     # ...other post_install hooks
   end
Enter fullscreen mode Exit fullscreen mode
  • Install pods: 
   cd ios && pod install
Enter fullscreen mode Exit fullscreen mode
  • Add access token: In ios/{YourProjectName}/Info.plist, add inside <dict>: 
   <key>MBXAccessToken</key>
   <string>YOUR_MAPBOX_ACCESS_TOKEN</string>
Enter fullscreen mode Exit fullscreen mode

Android Setup

  • Add access token: Create android/app/src/main/res/values/mapbox_access_token.xml: 
   <resources>
     <string name="mapbox_access_token">YOUR_MAPBOX_ACCESS_TOKEN</string>
   </resources>
Enter fullscreen mode Exit fullscreen mode
  • Add Mapbox Maven repo: In android/settings.gradle, add: 
   dependencyResolutionManagement {
     repositoriesMode.set(RepositoriesMode.PREFER_SETTINGS)
     repositories {
       google()
       mavenCentral()
       maven { url = uri("https://api.mapbox.com/downloads/v2/releases/maven") }
     }
   }
Enter fullscreen mode Exit fullscreen mode

4. Update App.tsx to Show a Map

Replace the contents of App.tsx with:

import React from 'react';
import { MapView, Camera } from '@rnmapbox/maps';

export default function App() {
  return (
    <MapView style={{ flex: 1 }}>
      <Camera
        defaultSettings={{
          zoomLevel: 12,
          centerCoordinate: [-74.006, 40.7128] // New York City
        }}
      />
    </MapView>
  );
}
Enter fullscreen mode Exit fullscreen mode

5. Run Your App 

npx react-native run-ios # or run-android
Enter fullscreen mode Exit fullscreen mode

You should see a Mapbox map centered on New York City. From here, you are ready to add your own data to the map, customize the style of the basemap, add interactivity, and more!

Screenshot of an iOS emulator showing a Mapbox map centered over New York City

For more features (GeoJSON data, basemap configuration, user location, etc.), see the full tutorial.

Top comments (0)