react-native-maps not working on Expo App for Android

I have followed every guide but cannot get the map to show up. I see the google logo on the bottom left, but not the map. I made an api key, set it in the manifest. I have it in the app.json. I’m not sure what else to add.

My friend was able to run the same repository fine for iOS with no problems, his map worked fine, with the same versions of everything.

app.json

{
  "name": "ReactNativeCore",
  "displayName": "ReactNativeCore",
  "expo": {
    "name": "ReactNativeCore",
    "slug": "ReactNativeCore",
    "privacy": "unlisted",
    "sdkVersion": "36.0.0",
    "version": "1.0.0",
    "entryPoint": "node_modules/expo/AppEntry.js",
    "platforms": [
      "ios",
      "android",
      "web"
    ]
  },
"android": {
    "config": {
      "googleMaps": {
        "apiKey": "myapikey"
      }
    }
  }
}

package.json



{
  "scripts": {
    "android": "react-native run-android",
    "ios": "react-native run-ios",
    "web": "expo start --web",
    "start": "react-native start",
    "test": "jest"
  },
  "dependencies": {
    "@expo/vector-icons": "^10.0.6",
    "@react-native-community/masked-view": "^0.1.7",
    "@react-navigation/bottom-tabs": "^5.2.5",
    "@react-navigation/native": "^5.1.4",
    "axios": "^0.19.2",
    "expo": "~36.0.0",
    "react": "~16.9.0",
    "react-dom": "~16.9.0",
    "react-native": "~0.61.4",
    "react-native-gesture-handler": "^1.6.1",
    "react-native-maps": "^0.27.1",
    "react-native-paper": "^3.6.0",
    "react-native-reanimated": "^1.7.1",
    "react-native-safe-area-context": "^0.7.3",
    "react-native-screens": "^2.4.0",
    "react-native-unimodules": "~0.7.0",
    "react-native-web": "~0.11.7",
    "react-navigation": "^4.3.5",
    "react-navigation-material-bottom-tabs": "^2.2.8"
  },
  "devDependencies": {
    "@babel/core": "~7.6.0",
    "babel-jest": "~24.9.0",
    "jest": "~24.9.0",
    "metro-react-native-babel-preset": "~0.56.0",
    "react-test-renderer": "~16.9.0"
  },
  "jest": {
    "preset": "react-native"
  },
  "private": true
}

MapTab

import React from 'react';
import { View, Text, Dimensions } from 'react-native';
import { styles } from '../Styles/style';
import MapView, {PROVIDER_GOOGLE} from 'react-native-maps';
import { render } from 'react-dom';

var counter = 0;

class MapTab extends React.Component  {

  constructor(props) {
    super(props);
    this.state = {
      region: null
    };
  }
  mapStyle = [
    {
      "elementType": "geometry",
      "stylers": [
        {
          "color": "#242f3e"
        }
      ]
    },
    {
      "elementType": "labels.text.fill",
      "stylers": [
        {
          "color": "#746855"
        }
      ]
    },
    {
      "elementType": "labels.text.stroke",
      "stylers": [
        {
          "color": "#242f3e"
        }
      ]
    },
    {
      "featureType": "administrative.locality",
      "elementType": "labels.text.fill",
      "stylers": [
        {
          "color": "#d59563"
        }
      ]
    },
    {
      "featureType": "poi",
      "elementType": "labels.text.fill",
      "stylers": [
        {
          "color": "#d59563"
        }
      ]
    },
    {
      "featureType": "poi.park",
      "elementType": "geometry",
      "stylers": [
        {
          "color": "#263c3f"
        }
      ]
    },
    {
      "featureType": "poi.park",
      "elementType": "labels.text.fill",
      "stylers": [
        {
          "color": "#6b9a76"
        }
      ]
    },
    {
      "featureType": "road",
      "elementType": "geometry",
      "stylers": [
        {
          "color": "#38414e"
        }
      ]
    },
    {
      "featureType": "road",
      "elementType": "geometry.stroke",
      "stylers": [
        {
          "color": "#212a37"
        }
      ]
    },
    {
      "featureType": "road",
      "elementType": "labels.text.fill",
      "stylers": [
        {
          "color": "#9ca5b3"
        }
      ]
    },
    {
      "featureType": "road.highway",
      "elementType": "geometry",
      "stylers": [
        {
          "color": "#746855"
        }
      ]
    },
    {
      "featureType": "road.highway",
      "elementType": "geometry.stroke",
      "stylers": [
        {
          "color": "#1f2835"
        }
      ]
    },
    {
      "featureType": "road.highway",
      "elementType": "labels.text.fill",
      "stylers": [
        {
          "color": "#f3d19c"
        }
      ]
    },
    {
      "featureType": "transit",
      "elementType": "geometry",
      "stylers": [
        {
          "color": "#2f3948"
        }
      ]
    },
    {
      "featureType": "transit.station",
      "elementType": "labels.text.fill",
      "stylers": [
        {
          "color": "#d59563"
        }
      ]
    },
    {
      "featureType": "water",
      "elementType": "geometry",
      "stylers": [
        {
          "color": "#17263c"
        }
      ]
    },
    {
      "featureType": "water",
      "elementType": "labels.text.fill",
      "stylers": [
        {
          "color": "#515c6d"
        }
      ]
    },
    {
      "featureType": "water",
      "elementType": "labels.text.stroke",
      "stylers": [
        {
          "color": "#17263c"
        }
      ]
    }
  ]

  clientLocationFunction = (e) => {
    let { width, height } = Dimensions.get('window');
    let ASPECT_RATIO = width / height;
    let LATITUDE = e.nativeEvent.coordinate.latitude;
    let LONGITUDE = e.nativeEvent.coordinate.longitude;
    let LATITUDE_DELTA = 0.0922;
    let LONGITUDE_DELTA = LATITUDE_DELTA * ASPECT_RATIO;

    this.setState({region: {
      latitude: LATITUDE,
      longitude: LONGITUDE,
      latitudeDelta: LATITUDE_DELTA,
      longitudeDelta: LONGITUDE_DELTA
    }})
    counter++;
  }
  
  render() {
    return (
      <MapView
        style={styles.map}
        provider={PROVIDER_GOOGLE}
        showsMyLocationButton={true}
        showsUserLocation={true}
        userLocationUpdateInterval={1000}
        region={this.state.region}
        onUserLocationChange={(e) => {counter == 0 ? this.clientLocationFunction(e, counter) : null}}
        showsScale={true}
        customMapStyle={this.mapStyle}
        minZoomLevel={15}
      />
    );
  }
}

export default MapTab;

Enable Maps SDK for Android here (https://console.developers.google.com/apis/library/maps-android-backend.googleapis.com/?id=01d8f5af-dc9a-4b12-af6f-37029d8e3e71&project=earthquake-map-191014&organizationId=384916252399). I’m sure you missed that step

Found the problem and solved it. The api key from google cloud console was only for web. I made it for ios and android too and problem solved. :slight_smile:

However this is weird, because in expo development the issue was not present.React JS Training Only in the build for live

hi, I did what you suggested but still the app crushes.