Expo Docs MCP Server

--- title: React Native Maps sidebar_title: MapView 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"] --- > **info** This library is listed in the Expo SDK reference because it is included in [Expo Go](https://expo.dev/go). You may use any library of your choice with [development builds](/develop/development-builds/introduction/). `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](#deploy-app-with-google-maps). ## Installation ## Usage See full documentation at [`react-native-maps/react-native-maps`](https://github.com/react-native-maps/react-native-maps). ```jsx return ( <View style={styles.container}> </View> ); } 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.developers.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 <Tabs> <Tab label="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/) 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) > Release > Setup > App integrity > App Signing**. - Copy the value of **SHA-1 certificate fingerprint**. </Tab> <Tab label="For development builds"> - If you have already created a [development build](/develop/development-builds/introduction/), your project will be signed using a debug keystore. - After the build is complete, go to your [project's dashboard](https://expo.dev/accounts/[username]/projects/[project-name]), 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**. </Tab> </Tabs> #### 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 - Copy your **API Key** into your your to either a **.env** file and then add it to your **app.json** under the `android.config.googleMaps.apiKey` field like or copy it: ```json "android": { "config": { "googleMaps": { "apiKey": "process.env.GOOGLE_MAPS_API_KEY", }, }, } ``` - In your code, import `{ PROVIDER_GOOGLE }` from `react-native-maps` and add the property `provider={PROVIDER_GOOGLE}` to your `<MapView>`. 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/#create-a-development-build-for-emulatorsimulator). ### 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.developers.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 - Copy your **API Key** into your your to either a **.env** file and then add it to your **app.json** under the `ios.config.googleMapsApiKey` field like or copy it: ```json "ios": { "config": { "googleMapsApiKey": "process.env.GOOGLE_MAPS_API_KEY", }, } ``` - In your code, import `{ PROVIDER_GOOGLE }` from `react-native-maps` and add the property `provider={PROVIDER_GOOGLE}` to your `<MapView>`. 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/#create-a-development-build-for-emulatorsimulator).