react-native-maps: Map can not show on Android

I finally solved the problem by adding import com.airbnb.android.react.maps.MapsPackage; and new MapsPackage()

in

<project_root_dir>/android/app/src/main/java/com/<project_name>/MainApplication.java

So the completely code is below

package com.pullo;

import android.app.Application;
import android.util.Log;

import com.airbnb.android.react.maps.MapsPackage;
import com.facebook.react.ReactApplication;
import com.facebook.react.ReactInstanceManager;
import com.facebook.react.ReactNativeHost;
import com.facebook.react.ReactPackage;
import com.facebook.react.shell.MainReactPackage;

import java.util.Arrays;
import java.util.List;

public class MainApplication extends Application implements ReactApplication {

  private final ReactNativeHost mReactNativeHost = new ReactNativeHost(this) {
    @Override
    protected boolean getUseDeveloperSupport() {
      return BuildConfig.DEBUG;
    }

    @Override
    protected List<ReactPackage> getPackages() {
      return Arrays.<ReactPackage>asList(
          new MainReactPackage(),
          new MapsPackage()
      );
    }
  };

  @Override
  public ReactNativeHost getReactNativeHost() {
      return mReactNativeHost;
  }
}

I had same problem before and I resolved it by changing the styles to the following.

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
  }
});

Also, if you see Google logo in the bottom and the map is blank, then your API key is wrong.

From the beginning this is what I did:

1. Create project react-native init MAP

2. In android/app/src/main/AndroidManifest.xml add a new meta-data child to the application tag:

<meta-data
                android:name="com.google.android.maps.v2.API_KEY"
                android:value="YOUR_API_KEY"/>

1. Enable your API for Android or IOs: https://console.cloud.google.com/apis/api/maps_android_backend/overview?project=sage-etching-147318&duration=PT1H

2. Install and Link the package: npm i react-native-maps --save react-native link

3. Add the MapView in index.android.js:

import React, { Component } from 'react';
import {AppRegistry, StyleSheet, Text, View, Dimensions} from 'react-native';
import MapView from 'react-native-maps';

export default class MAP extends Component {
  render() {
    return (
        <View style ={styles.container}>
          <MapView
              style={styles.map}
              region={{
            latitude: 37.78825,
            longitude: -122.4324,
            latitudeDelta: 0.015,
            longitudeDelta: 0.0121,
          }}
          >
          </MapView>
        </View>
    );
  }
}

let { width, height } = Dimensions.get('window');
const styles = StyleSheet.create({
  container: {
    ...StyleSheet.absoluteFillObject,
    height: 400,
    width: 400,
    justifyContent: 'flex-end',
    alignItems: 'center',
  },
  map: {
    flex: 1,
    width: width,
    height: height,
  },
});

AppRegistry.registerComponent('MAP', () => MAP);

1. Run: npm start --clear-cache react-native run-android

In Case Of Error cd android gradlew clean cd .. react-native run-android

It works for me, I hope it helps someone in the future.

I I’m having this problem in Android only in release Bundle.

• I have the correct key
• I put the app package name and correct fingerprint on my API Restrictions

*My map shows all white, with no Google logo in bottom left corner. *In dev the same map shows correctly.

#import <React/RCTBundleURLProvider.h> in AppDelegate.m in Xcode, give this error ‘React/RCTBundleURLProvider.h’ file not found.

I have fixed by install react native link and install google play service in my android studio