A community-supported, open-source React Native library for building maps with the Mapbox Maps SDK for iOS and Mapbox Maps SDK for Android
→ Call for additional maintainers discussion thread
At the moment, the following implementations are supported:
RNMapboxMapsImpl | Notes |
---|---|
mapbox | New Mapbox v10 implementation - recommended |
maplibre | MapLibre opensource fork of Mapbox SDKs - will be dropped in next version |
mapbox-gl | Legacy mapbox implementation iOS Android - legacy, will be dropped in next version |
See iOS & Android setup guide for more details on setting RNMapboxMapsImpl
- Please Sign Up to Mapbox to get the Mapbox Access Token.
- node
- npm
- React Native (0.64+)
Install the latest source from git:
yarn add @rnmapbox/maps
Install the latest source from git:
npm install --save @rnmapbox/maps
@rnmapbox/maps
installs the latest release from npm- to install current
main
from github replace@rnmapbox/maps
withrnmapbox/maps#main
. To install specific version use@rnmapbox/maps@10.0.4
Please follow the Expo Guide.
For more information, check out our Getting Started section
Before you run your project be sure you have completed the Installation Guides for Android or iOS.
# Run with yarn
yarn run ios
# or Run with NPM
npm run ios
# Run with yarn
yarn run android
# or Run with NPM
npm run android
import React from 'react';
import { StyleSheet, View } from 'react-native';
import Mapbox from '@rnmapbox/maps';
Mapbox.setAccessToken('<YOUR_ACCESSTOKEN>');
const App = () => {
return (
<View style={styles.page}>
<View style={styles.container}>
<Mapbox.MapView style={styles.map} />
</View>
</View>
);
}
export default App;
const styles = StyleSheet.create({
page: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
},
container: {
height: 300,
width: 300,
},
map: {
flex: 1
}
});
- BackgroundLayer
- CircleLayer
- FillExtrusionLayer
- FillLayer
- LineLayer
- RasterLayer
- SymbolLayer
- HeatmapLayer
- SkyLayer
This package is not available in the Expo Go app. Learn how you can use it with custom dev clients.
This library provides some mocks which are necessary for running tests.
Example:
"jest": {
"preset": "react-native",
"setupFilesAfterEnv": ["@rnmapbox/maps/setup-jest"],
"transformIgnorePatterns": [
"node_modules/(?!(...|@rnmapbox))"
]
}
Help drive this repo forward - be a sponsor. Add a comment here to discuss your sponsorship.
Terrain Dance |
Have a question or need some help? Join our Gitter developer group!