skip to Main Content

I am working on a React-Native app using Expo, and I am trying to integrate Google Maps on the home screen. However, the map does not load and only shows a blank white screen. Here’s the relevant code and configuration:

    import React from 'react';
    import { StyleSheet } from 'react-native';
    import MapView, { Marker, PROVIDER_GOOGLE } from 'react-native-maps';
    
    export default function HomeScreen() {
      return (
        <MapView
          provider={PROVIDER_GOOGLE}
          style={StyleSheet.absoluteFill}
          initialRegion={{
            latitude: 41.0082,
            longitude: 28.9784,
            latitudeDelta: 0.0922,
            longitudeDelta: 0.0421,
          }}
        >
          <Marker coordinate={{ latitude: 41.0082, longitude: 28.9784 }} />
        </MapView>
      );
    }

app.json configuration

    "ios": {
      "googleServicesFile": "./GoogleService-Info.plist",
      "supportsTablet": true,
      "bundleIdentifier": "com.xxx.xxx.xxx",
      "config": {
        "googleMapsApiKey": "XXX"
      }
    },

Steps I have taken

  • I added the googleMapsApiKey under the ios.config section in app.json.
  • I ensured the PROVIDER_GOOGLE is used in the MapView.
  • The app has permissions for location access.
  • I verified the API Key is enabled for Google Maps SDK for iOS in the Google Cloud Console.

Despite these steps, the map screen remains blank.

What I have tried

  • Confirmed that the googleMapsApiKey is valid and has no restrictions.
  • Checked that the Google Maps SDK for iOS is enabled in the Google Cloud Console.
  • Cleaned the Expo cache with expo start -c.
  • Rebuilt the app and tested on a physical device as well as on the iOS simulator.

Questions

  • Am I missing any configuration for Google Maps with Expo on iOS?
  • Do I need to include any additional native dependencies or steps since I’m using Expo?
  • Could there be an issue with how Expo handles the googleMapsApiKey or permissions?

Api Key Restriction

Blank Map View

2

Answers


  1. I was facing the same issue when i updated my expo from 50 to 52 and on my side the bug got resolved when I changed the provider from PROVIDER_GOOGLE to PROVIDER_DEFAULT.

    Solution

    So just import PROVIDER_DEFAULT and use PROVIDER_DEFAULT instead of PROVIDER_GOOGLE.

       <MapView provider={PROVIDER_DEFAULT}>
          ...
       </MapView>
    

    Version

        "expo": "^52.0.18",
        "react-native": "0.76.5",
        "react-native-maps": "1.18.0",
    

    enter image description here

    Login or Signup to reply.
  2. Same issue, followed the instructions of: https://github.com/react-native-maps/react-native-maps/blob/master/docs/installation.md

    The instructions here: https://docs.expo.dev/versions/latest/sdk/map-view/
    weren’t working as well, please help.

    Login or Signup to reply.
Please signup or login to give your own answer.
Back To Top
Search