GitHub
npm
react-native-maps provides a Map component that uses Google Maps on Android and Apple Maps or Google Maps on iOS.
No additional setup is required when testing your project using Expo Go. However, to deploy the app binary on app stores additional steps are required for Google Maps. For more information, see the instructions below.
| Android Device | Android Emulator | iOS Device | iOS Simulator | Web |
|---|---|---|---|---|
- npx expo install react-native-mapsIf you're installing this in a bare React Native app, you should also follow these additional installation instructions.
See full documentation at react-native-maps/react-native-maps.
import React from 'react';
import MapView from 'react-native-maps';
import { StyleSheet, View } from 'react-native';
export default function App() {
return (
<View style={styles.container}>
<MapView style={styles.map} />
</View>
);
}
const styles = StyleSheet.create({
container: {
flex: 1,
},
map: {
width: '100%',
height: '100%',
},
});
If you've already registered a project for another Google service on Android, such as Google Sign In, you enable the Maps SDK for Android on your project and jump to step 4.
1
2
3
android.package from app.json (for example: com.company.myapp) to the package name field.4
android.config.googleMaps.apiKey field.{ PROVIDER_GOOGLE } from react-native-maps and add the property provider=PROVIDER_GOOGLE to your <MapView>. This property works on both Android and iOS.If you've already registered a project for another Google service on iOS, such as Google Sign In, you enable the Maps SDK for iOS on your project and jump to step 3.
1
2
ios.bundleIdentifier from app.json (for example: com.company.myapp) to the bundle ID field.3
ios.config.googleMapsApiKey field.{ PROVIDER_GOOGLE } from react-native-maps and add the property provider=PROVIDER_GOOGLE to your <MapView>. This property works on both Android and iOS.Web support is experimental. We do not recommend using this library on the web yet.
To use this on the web, add the following script to your web/index.html. This script may already be present. If this is the case, replace the API_KEY with your Google Maps API key, which you can obtain here: Google Maps: Get API key.
<!DOCTYPE html>
<html lang="en">
<head>
<!-- At the end of the <head/> element... -->
<script
async
defer
src="https://maps.googleapis.com/maps/api/js?key=API_KEY"
type="text/javascript"></script>
<!-- Use your web API Key in place of API_KEY: https://developers.google.com/maps/documentation/javascript/get-api-key -->
</head>
<body />
</html>