This content originally appeared on DEV Community and was authored by Chris Whong
This is a condensed version of the full React Native Mapbox tutorial. For advanced features, troubleshooting, and more, check out the complete guide.
@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.
1. Create a New React Native Project
npx @react-native-community/cli@latest init MyMapboxApp
cd MyMapboxApp
2. Install Mapbox Dependencies
npm install @rnmapbox/maps
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'stargetblock:
pre_install do |installer|
$RNMapboxMaps.pre_install(installer)
end
post_install do |installer|
$RNMapboxMaps.post_install(installer)
# ...other post_install hooks
end
- Install pods:
cd ios && pod install
- Add access token: In
ios/{YourProjectName}/Info.plist, add inside<dict>:
<key>MBXAccessToken</key>
<string>YOUR_MAPBOX_ACCESS_TOKEN</string>
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>
- 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") }
}
}
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>
);
}
5. Run Your App
npx react-native run-ios # or run-android
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!
For more features (GeoJSON data, basemap configuration, user location, etc.), see the full tutorial.
This content originally appeared on DEV Community and was authored by Chris Whong
Chris Whong | Sciencx (2025-11-26T17:38:22+00:00) Quickstart: Mapbox in React Native. Retrieved from https://www.scien.cx/2025/11/26/quickstart-mapbox-in-react-native/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.