Everything you need to ship maps
Native Mapbox SDK v11
Maps are rendered by the Mapbox Maps SDK for iOS and Android, not a WebView, so gestures, 3D terrain and large datasets stay smooth.
Declarative sources and layers
Compose ShapeSource, VectorSource, SymbolLayer, CircleLayer and more as React components, styled with Mapbox style-spec expressions.
Camera, markers and location
Animate the camera, place React views as markers, show the user location puck and query rendered features.
Offline maps
Download regions and tile packs for use without a connection, and manage the cache from JavaScript.
Expo config plugin
Works with Expo prebuild and development builds. Built for the React Native New Architecture (0.79+).
Turn-by-turn navigation
@rnmapbox/navigation (alpha) adds routing and guidance on top of the same map, powered by the Mapbox Navigation SDK.
Maps as React components
Sources and layers are plain components: change props and the native map updates. The same code runs on iOS, Android and, experimentally, the web.
import Mapbox, {
MapView,
Camera,
ShapeSource,
CircleLayer,
} from '@rnmapbox/maps';
Mapbox.setAccessToken('<your public token>');
const QUAKES_URL = 'https://example.com/quakes.geojson';
export default function App() {
return (
<MapView style={{flex: 1}} styleURL={Mapbox.StyleURL.Dark}>
<Camera zoomLevel={5} centerCoordinate={[-121.5, 38]} />
<ShapeSource id="quakes" url={QUAKES_URL}>
<CircleLayer
id="quake-dots"
style={{circleRadius: 6, circleColor: '#fbb03b'}}
/>
</ShapeSource>
</MapView>
);
}
Turn-by-turn navigation
@rnmapbox/navigation (alpha) wraps the Mapbox Navigation SDK v3: request routes, run guidance and get route progress events, with the SDK drawing the route line, puck and navigation camera on your map. Or drop in a complete navigation screen with maneuver banners, lanes and speed limits.
Built by the community
@rnmapbox/maps is open source and maintained by the community. Questions, bug reports and pull requests are welcome.