React-Native-Maps not showing on Android Emulator or real device

Question

I added react-native-maps in my project and it doesn't showup

I am not able to figure out what I'm doing wrong

Things I have tried:

• Test the example app available on the official repo: https://github.com/react-native-maps/react-native-maps
• Followed all the instructions available in the installation guide and also tried many articles guiding through the installation process

Please review the code snippets below and let me know if you need code from any other files that are important to find the issue.

For some people it shows an empty map with white screen and Google logo at the bottom. I have nothing at all. Just blank screen.

Doesn't throw any error while compilation.

code in Maps.js

import React from "react";
import { StyleSheet, View } from "react-native";
import MapView, { PROVIDER_GOOGLE } from "react-native-maps";

const Maps = () => {
  return (
    <View style={styles.container}>
      <MapView
        styles={styles.map}
        provider={PROVIDER_GOOGLE}
        initialRegion={{
          latitude: 37.78825,
          longitude: -122.4324,
          latitudeDelta: 0.0922,
          longitudeDelta: 0.0421,
        }}
      />
    </View>
  );
};

export default Maps;

const styles = StyleSheet.create({
  container: {
    flex: 1,
    ...StyleSheet.absoluteFillObject,
    justifyContent: 'flex-end',
    alignItems: 'center',
  },
  map: {
    ...StyleSheet.absoluteFillObject,
    
  },
 });

\android\app\build.gradle file

dependencies {
   ...
   implementation(project(':react-native-maps')){
       exclude group: 'com.google.android.gms', module: 'play-services-base'
       exclude group: 'com.google.android.gms', module: 'play-services-maps'
   }
   implementation 'com.google.android.gms:play-services-base:17.2.1'
   implementation 'com.google.android.gms:play-services-maps:17.0.0'
}

\android\build.gradle

// Top-level build file where you can add configuration options common to all sub-projects/modules.

buildscript {
    ext {
        buildToolsVersion = "30.0.2"
        minSdkVersion = 21
        compileSdkVersion = 30
        targetSdkVersion = 30
        ndkVersion = "20.1.5948944"
        supportLibVersion = "28.0.0"
    }
    repositories {
        google()
        jcenter()
    }
    dependencies {
        classpath('com.android.tools.build:gradle:4.2.1')
        // NOTE: Do not place your application dependencies here; they belong
        // in the individual module build.gradle files
    }
}

AndroidManifest.xml (Note: I have my API key and tested with the example project from the github repo and it worked)

<meta-data
     android:name="com.google.android.geo.API_KEY"
     android:value="I_ADDED_MY_KEY"/>

settings.gradle

include ':react-native-maps'
project(':react-native-maps').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-maps/lib/android')

package.json

{
  "name": "my-app",
  "version": "0.0.1",
  "private": true,
  "scripts": {
    "android": "react-native run-android",
    "ios": "react-native run-ios",
    "start": "react-native start",
    "test": "jest",
    "lint": "eslint ."
  },
  "dependencies": {
    "@material-ui/core": "^4.12.3",
    "@material-ui/icons": "^4.11.2",
    "@react-native-async-storage/async-storage": "^1.15.9",
    "@react-native-community/checkbox": "^0.5.8",
    "@react-native-community/masked-view": "^0.1.11",
    "@react-navigation/bottom-tabs": "^6.0.7",
    "@react-navigation/drawer": "^5.12.9",
    "@react-navigation/native": "^5.9.8",
    "@react-navigation/stack": "^5.14.9",
    "axios": "^0.21.4",
    "react": "17.0.1",
    "react-dom": "^16.8.0",
    "react-native": "0.64.2",
    "react-native-bootsplash": "^3.2.4",
    "react-native-confirmation-code-input": "^1.0.4",
    "react-native-device-info": "^8.1.3",
    "react-native-extra-dimensions-android": "^1.2.5",
    "react-native-fast-image": "^8.3.7",
    "react-native-gesture-handler": "^1.10.3",
    "react-native-maps": "^0.29.3",
    "react-native-orientation-locker": "^1.3.1",
    "react-native-reanimated": "^2.2.0",
    "react-native-safe-area-context": "^3.3.2",
    "react-native-screens": "^3.7.0",
    "react-native-svg": "^12.1.1",
    "react-native-svg-transformer": "^0.14.3",
    "react-native-video": "^5.1.1"
  },
  "devDependencies": {
    "@babel/core": "^7.14.6",
    "@babel/runtime": "^7.14.6",
    "@react-native-community/eslint-config": "^3.0.0",
    "babel-jest": "^27.0.6",
    "eslint": "^7.30.0",
    "jest": "^27.0.6",
    "metro-react-native-babel-preset": "^0.66.0",
    "react-test-renderer": "17.0.1"
  },
  "jest": {
    "preset": "react-native"
  }
}

Answer 1

You must need to make a width, heigh style for MapView: Copy it: map: { width: Dimensions.get('window').width, height: Dimensions.get('window').height, }, It working on Emulator, but in real device, I'm not sure.