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;