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 theios.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 theGoogle 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?
2
Answers
I was facing the same issue when i updated my expo from
50
to52
and on my side the bug got resolved when I changed the provider fromPROVIDER_GOOGLE
toPROVIDER_DEFAULT
.Solution
So just import
PROVIDER_DEFAULT
and usePROVIDER_DEFAULT
instead ofPROVIDER_GOOGLE
.Version
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.