react-native-maps
provides a Map component that uses Apple Maps or Google Maps on iOS and Google Maps on Android. Expo uses react-native-maps at react-community/react-native-maps. No setup required for use within the Expo Go app. See below for instructions on how to configure for deployment as a standalone app on Android and iOS.Android Device | Android Emulator | iOS Device | iOS Simulator | Web |
---|---|---|---|---|
→
expo install react-native-maps
If you're installing this in a bare React Native app, you should also follow these additional installation instructions.
import * as React from 'react'; import MapView from 'react-native-maps'; import { StyleSheet, Text, View, Dimensions } from 'react-native'; export default function App() { return ( <View style={styles.container}> <MapView style={styles.map} /> </View> ); } const styles = StyleSheet.create({ container: { flex: 1, backgroundColor: '#fff', alignItems: 'center', justifyContent: 'center', }, map: { width: Dimensions.get('window').width, height: Dimensions.get('window').height, }, });
react-native-maps
in Expo Go. However, once you want to deploy your standalone app you should follow instructions below.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.
expo fetch:android:hashes
and copy the Google Certificate Fingerprint.android.config.googleMaps.apiKey
field.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.
ios.bundleIdentifier
from app.json eg: com.company.myapp
) to the bundle ID field.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 iOS and Android.Web is experimental! We do not recommend using this library on web yet.
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>
All standard Expo templates use a debug keystore with fingerprint5E:8F:16:06:2E:A3:CD:2C:4A:0D:54:78:76:BA:A6:F3:8C:AB:F6:25
, that you can enter directly in the Google Cloud Credential Manager. So if you are using one of the standard Expo templates, you don't need to perform the steps below.
android/app/build.gradle
file like this:signingConfigs { debug { storeFile file('debug.keystore') storePassword 'android' keyAlias 'androiddebugkey' keyPassword 'android' } }
keytool
command, and entering the storePassword. Copy the value shown after SHA1:
❯ keytool -list -v -keystore ./android/app/debug.keystore Enter keystore password: