react-native-maps blank on android device

Question

React native is blank on my android device. It's just a grey screen with the google logo. Unlike React-native-maps Blank page Only google logo it is is working on a simulator but not on real device.

I searched for the problem online:

• The API should be fine
• stylesheet is ok
• it's working on genymotion emulator

• working on android virtual device

  Perfectly working on Expo but not when I download the app from playstore. The meta-data in AndroidManifest.xml looks like this:

  This is how the mapView looks like:

   ` <MapView
            showsUserLocation={false}
            style={styles.map}
            provider='google'
            ref={ref => { map3 = ref; }}
            onMapReady = { this.onMapReady }
            initialRegion={this.state.region}
            >
              <Marker 
              image={logo}
              coordinate={this.state.coordinate}
              />
  </MapView>`
  

.. and the style:

    `const styles = StyleSheet.create({
      mapContainer: {
        flex: 1,
        alignItems: 'center',
        justifyContent: 'center',
        backgroundColor: '#ecf0f1',
      },
      map: {
        flex: 1,
        borderRadius: 4,
        width,
        height,
        zIndex: 1,
      },`

Nahtanha

Possible duplicate of React-native-maps Blank page Only google logo – Herc

+1. This question helped me :| I just forgot to put flex in style so the map was loading but not displaying on the screen because mapview was not taking height or width. I know it's a very small mistake. I am putting it here because maybe this can help beginners like me :| – Solleret

Answer 1

If all else fails, like was in my case, don't forget the basic stuff. Turns out I hadn't enabled 'Maps SDK for Android' in the console.developers.google.com

Herstein

One can get easily confused if working over expo because in expo the app works with the Maps Javascript API. But when you build the apk it works with the Maps SDK for Android/iOS. Don't forget to enable them from the cloud console. – Preexist

You deserve a beer man! I can't believe I was missing that – Orin

Answer 2

In My case, i didnt added stlye in main View Component, and MAPVIEW was rendering outside main app view, Also, Added text in MapView just to test is it rendering any text ?, when it rendered text, it displayed map in very small line, So i got to know after that its a style issue. So added style to my View, styles.container:

<View style={styles.container}>

        <MapView 
            style={styles.map} 
            initialRegion={{
                   latitude:this.state.latitude,
                   longitude:this.state.longitude,
                   latitudeDelta: 1,
                   longitudeDelta: 1,
            }}>

        </MapView>

        <Text>{this.state.latitude, this.state.longitude}</Text>

    </View> 

---

const styles = StyleSheet.create({
  container: {
   position: 'absolute',
   top: 0,
   left: 0,
   right: 0,
   bottom: 0,
   justifyContent: 'flex-end',
   alignItems: 'center',
 },
  map: {
    position: 'absolute',
    top: 0,
    left: 0,
    right: 0,
    bottom: 0,
  },
});

Pakistan

Answer 3

I think you've enabled Google Play's app signing service. The issues are with different hashes between expo app and a standalone app.

Go to Play Console -> Your App -> Release management -> App signing and then going to the API Dashboard -> Credentials and adding the signature to your existing credential.

Locklin

Thanks I'll just try it. Wich one do I have to add? - MD5 certificate fingerprint - SHA-1 certificate fingerprint -SHA-256 certificate fingerprint – Nahtanha

Copy your package name and SHA-1 signing-certificate fingerprint from Google play console and paste them in API Dashboard -> Credentials -> Create Credentials -> OAuth Client ID – Locklin

Thanks for your help. Do I need the generated client-id somewhere? – Nahtanha

Hi I had the same error and this fixed it for me. Basically I had the app signed for development but not for production. You should have two entries in credentials. Copy the App signing certificate SHA-1 into a new record (use the same package name). Hope this helps. – Haitian

Hi, Does the google play store account need to be the same as the google API account? or can they be different? – Skite

Answer 4

I also got the same error. After checking, it's my fault. Adding the style tag worked

{
    position: 'absolute',
    top: 0,
    left: 0,
    right: 0,
    bottom: 0,
}

Keavy

Answer 5

Posible solutions:

• Ensure that the "Google Maps Android API v2" is enabled.

Go to the google console -> api and services -> panel -> enable api and service -> select google maps

Bidding

Answer 6

Don't forget to add provider={PROVIDER_GOOGLE} My code was missing provider. As I added, maps loaded successfully.

import MapView, {PROVIDER_GOOGLE} from 'react-native-maps';

<MapView
        style={styles.mapcontainer}
        provider={PROVIDER_GOOGLE}
        region={{
          latitude: 42.882004,
          longitude: 74.582748,
          latitudeDelta: 0.0922,
          longitudeDelta: 0.0421,
        }}
        zoomEnabled={true}
        showsUserLocation={true}
      />

Lustrum

Answer 7

Also, check if your GPS or Internet connection is turned on. I had the same problem in development mode and took me few minutes to figure out that I have no internet connection or GPS enabled.

Felicidadfelicie

Answer 8

Instead of android:name="com.google.android.geo.API_KEY" try using android:name="com.google.android.maps.v2.API_KEY" in your AndroidManifest.xml file. It should work, I've tried everything and this worked for me.

Inequity

Answer 9

First, unlink react-native-maps library using:

react-native unlink react-native-maps

Then clean your build project:

cd android
gradlew clean

Finally, build the project again and run it on an Android device:

npx react-native run-android

Tested on React Native 0.61

Lanita