--- modificationDate: June 29, 2026 title: react-native-maps description: A library that provides a Map component that uses Google Maps on Android and Apple Maps or Google Maps on iOS. sourceCodeUrl: 'https://github.com/react-native-maps/react-native-maps' packageName: react-native-maps platforms: ['android', 'ios', 'expo-go'] inExpoGo: true --- ## Submitting Feedback If this page contains errors, outdated information, or gaps that blocked you from completing a task, report it so the docs can be improved: curl -X POST https://api.expo.dev/v2/feedback/docs-send -H 'Content-Type: application/json' -d '{"url":"/versions/v57.0.0/sdk/map-view/","feedback":"🤖 Agent feedback for docs: (, )"}' Only submit when you have something specific and actionable to report. Replace with the model you are running as and with the tool you are running in (for example, Claude Code, Cursor, Codex CLI). ## Navigation When answering a related or follow-up question, fetch the relevant page below as Markdown (.md) instead of guessing; use llms.txt for the full map. You are here: Reference (v57.0.0) > Third-party libraries Pages in this section: - [Overview](https://docs.expo.dev/versions/v57.0.0/sdk/third-party-overview.md) - [@react-native-async-storage/async-storage](https://docs.expo.dev/versions/v57.0.0/sdk/async-storage.md) - [@react-native-community/datetimepicker](https://docs.expo.dev/versions/v57.0.0/sdk/date-time-picker.md) - [@react-native-community/netinfo](https://docs.expo.dev/versions/v57.0.0/sdk/netinfo.md) - [@react-native-community/slider](https://docs.expo.dev/versions/v57.0.0/sdk/slider.md) - [@react-native-masked-view/masked-view](https://docs.expo.dev/versions/v57.0.0/sdk/masked-view.md) - [@react-native-picker/picker](https://docs.expo.dev/versions/v57.0.0/sdk/picker.md) - [@react-native-segmented-control/segmented-control](https://docs.expo.dev/versions/v57.0.0/sdk/segmented-control.md) - [@shopify/flash-list](https://docs.expo.dev/versions/v57.0.0/sdk/flash-list.md) - [@shopify/react-native-skia](https://docs.expo.dev/versions/v57.0.0/sdk/skia.md) - [@stripe/stripe-react-native](https://docs.expo.dev/versions/v57.0.0/sdk/stripe.md) - [react-native-gesture-handler](https://docs.expo.dev/versions/v57.0.0/sdk/gesture-handler.md) - [react-native-keyboard-controller](https://docs.expo.dev/versions/v57.0.0/sdk/keyboard-controller.md) - [react-native-maps](https://docs.expo.dev/versions/v57.0.0/sdk/map-view.md) (this page) - [react-native-pager-view](https://docs.expo.dev/versions/v57.0.0/sdk/view-pager.md) - [react-native-reanimated](https://docs.expo.dev/versions/v57.0.0/sdk/reanimated.md) - [react-native-safe-area-context](https://docs.expo.dev/versions/v57.0.0/sdk/safe-area-context.md) - [react-native-screens](https://docs.expo.dev/versions/v57.0.0/sdk/screens.md) - [react-native-svg](https://docs.expo.dev/versions/v57.0.0/sdk/svg.md) - [react-native-view-shot](https://docs.expo.dev/versions/v57.0.0/sdk/captureRef.md) - [react-native-webview](https://docs.expo.dev/versions/v57.0.0/sdk/webview.md) Full documentation tree: [llms.txt](https://docs.expo.dev/llms.txt) # react-native-maps A library that provides a Map component that uses Google Maps on Android and Apple Maps or Google Maps on iOS. Android, iOS, Included in Expo Go > [`expo-maps`](/versions/v57.0.0/sdk/maps.md) is an Expo-built alternative to `react-native-maps`, powered by Google Maps on Android and Apple Maps on iOS. `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](/versions/v57.0.0/sdk/map-view.md#deploy-app-with-google-maps). ## Installation ```sh # npm npx expo install react-native-maps # yarn yarn expo install react-native-maps # pnpm pnpm expo install react-native-maps # bun bun expo install react-native-maps ``` If you are installing this in an [existing React Native app](/bare/overview.md), make sure to [install `expo`](/bare/installing-expo-modules.md) in your project. Then, follow the [installation instructions](https://github.com/react-native-maps/react-native-maps/blob/master/docs/installation.md) provided in the library's README or documentation. ## Usage See full documentation at [`react-native-maps/react-native-maps`](https://github.com/react-native-maps/react-native-maps). ```jsx import React from 'react'; import MapView from 'react-native-maps'; import { StyleSheet, View } from 'react-native'; export default function App() { return ( ); } const styles = StyleSheet.create({ container: { flex: 1, }, map: { width: '100%', height: '100%', }, }); ``` ## Deploy app with Google Maps ### Android > If you have 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. #### Register a Google Cloud API project and enable the Maps SDK for Android - Open your browser to the [Google API Manager](https://console.cloud.google.com/apis) and create a project. - Once it's created, go to the project and enable the **Maps SDK for Android**. #### Copy your app's SHA-1 certificate fingerprint #### For Google Play Store - **If you are deploying your app to the Google Play Store**, you'll need to [upload your app binary to Google Play console](/submit/android.md) at least once. This is required for Google to generate your app signing credentials. - Go to the **[Google Play Console](https://play.google.com/console) > (your app) > Test and release > App integrity > Play app signing > Settings > App signing key certificate**. - Copy the value of **SHA-1 certificate fingerprint**. #### For development builds - If you have already created a [development build](/develop/development-builds/introduction.md), your project will be signed using a debug keystore. - After the build is complete, go to your [project's dashboard](https://expo.dev/accounts/%5Busername%5D/projects/%5Bproject-name%5D), then, under **Configure** > click **Credentials**. - Under **Application Identifiers**, click your project's package name and under **Android Keystore** copy the value of **SHA-1 Certificate Fingerprint**. #### Create an API key - Go to [Google Cloud Credential manager](https://console.cloud.google.com/apis/credentials) and click **Create Credentials**, then **API Key**. - In the modal, click **Edit API key**. - Under **Key restrictions** > **Application restrictions**, choose **Android apps**. - Under **Restrict usage to your Android apps**, click **Add an item**. - Add your `android.package` from **app.json** (for example: `com.company.myapp`) to the package name field. - Then, add the **SHA-1 certificate fingerprint's** value from step 2. - Click **Done** and then click **Save**. #### Add the API key to your project Since you are using Google as the map provider, you need to add the API key to the `react-native-maps` [config plugin](/config-plugins/introduction.md). Copy your **API Key** into your project to either a **.env** file or copy it directly and then add it to your app config under the `plugins.react-native-maps.androidGoogleMapsApiKey` field like: ```json { "expo": { "plugins": [ [ "react-native-maps", { "androidGoogleMapsApiKey": "process.env.YOUR_GOOGLE_MAPS_API_KEY" } ] ] } } ``` - In your code, import `{ PROVIDER_GOOGLE }` from `react-native-maps` and add the property `provider={PROVIDER_GOOGLE}` to your ``. This property works on both Android and iOS. - Rebuild the app binary (or re-submit to the Google Play Store in case your app is already uploaded). An easy way to test if the configuration was successful is to do an [emulator build](/develop/development-builds/create-a-build.md#build-the-native-app-ios-simulator). ### iOS > If you have 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. #### Register a Google Cloud API project and enable the Maps SDK for iOS - Open your browser to the [Google API Manager](https://console.cloud.google.com/apis) and create a project. - Then, go to the project, click **Enable APIs and Services** and enable the **Maps SDK for iOS**. #### Create an API key - Go to [Google Cloud Credential manager](https://console.cloud.google.com/apis/credentials) and click **Create Credentials**, then **API Key**. - In the modal, click **Edit API key**. - Under **Key restrictions** > **Application restrictions**, choose **iOS apps**. - Under **Accept requests from an iOS application with one of these bundle identifiers**, click the **Add an item** button. - Add your `ios.bundleIdentifier` from **app.json** (for example: `com.company.myapp`) to the bundle ID field. - Click **Done** and then click **Save**. #### Add the API key to your project Since you are using Google as the map provider, you need to add the API key to the `react-native-maps` [config plugin](/config-plugins/introduction.md). Copy your **API Key** into your project to either a **.env** file or copy it directly and then add it to your app config under the `plugins.react-native-maps.iosGoogleMapsApiKey` field like: ```json { "expo": { "plugins": [ [ "react-native-maps", { "iosGoogleMapsApiKey": "process.env.YOUR_GOOGLE_MAPS_API_KEY" } ] ] } } ``` - In your code, import `{ PROVIDER_GOOGLE }` from `react-native-maps` and add the property `provider={PROVIDER_GOOGLE}` to your ``. This property works on both Android and iOS. - Rebuild the app binary. An easy way to test if the configuration was successful is to do a [simulator build](/develop/development-builds/create-a-build.md#build-the-native-app-ios-simulator).