Map can not show on Android

[spksoft]

I followed the Installation Guide, did link by using rnpm link and tried to search error log below to check if 'rnpm link' can link correctly following by the Installation Guide, that is correct and it works on iOS. But it doesn't work on Android.

React Native Version

Sippakorns-MacBook-Air:TestMap spksoft$ react-native -v
react-native-cli: 1.0.0
react-native: 0.34.1

Android Log : react-native android-log

10-12 07:12:56.286  5967  6731 I ReactNativeJS: undefined
10-12 07:13:02.608  5967  6738 W ReactNativeJS: Warning: Native component for "AIRMapUrlTile" does not exist
10-12 07:13:02.611  5967  6738 W ReactNativeJS: Warning: Native component for "AIRMap" does not exist
10-12 07:13:02.650  5967  6738 I ReactNativeJS: Running application "TestMap" with appParams: {"initialProps":{},"rootTag":1}. __DEV__ === true, development-level warning are ON, performance optimizations are OFF

index.android.js

/**
 * Sample React Native App
 * https://github.com/facebook/react-native
 * @flow
 */

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

class TestMap extends Component {
  render() {
    const { region } = this.props;
    console.log(region);
    return (
      <View style ={styles.container}>
       <MapView
         style={styles.map}
         region={{
           latitude: 37.78825,
           longitude: -122.4324,
           latitudeDelta: 0.015,
           longitudeDelta: 0.0121,
         }}
       >
       </MapView>
     </View>
    );
  }
}

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

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

[ochanje210]

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.

[spksoft]

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

[tugorez]

@spksoft many thanks bro, it helped me :D .
You should make a PR into the docs about your solution.

[tugorez]

Or if you can't, let me know and I'll do it

[lgalant]

Thanks @spksoft !! After many hours trying different stuff, this is the one that worked!!

[nix23]

@spksoft solution works. Thanks!

[GarimaMathur07]

@spksoft Have you integrate map view in existing android native project

I am adding airbnb map view to existing android native application.

I am using RN 0.40 and react-native-maps 0.13.0.

after the react-link commands. Then android always have the Warning:
Native component for "AIRMap" does not exist.
Running application "App" with appParams: {"initialProps":{},"rootTag":1}. DEV === true, development-level warning are ON, performance optimizations are OFF

and getting empty map with red border

Here is complete code
https://github.com/GarimaMathur07/CustomReactComponent

[lavarajallu]

Look @GarimaMathur Just You have to Install Co-coapods and After, in react-native-maps module you Must Drag on Air maps file to Xcode After that You are follow this Procedure like as attached below...

In your project's Build Settings > Header Search Paths, double click the value field. In the popup, add $(SRCROOT)/../node_modules/react-native-maps/ios/AirMaps and change non-recursive to recursive. (Dragging the folder node_modules/react-native-maps/ios/AirMaps/ into your project introduces duplicate symbols. We should not do it.)

[zengyanzi]

If I ran react-native link react-native-maps, could I skip the following step, please?
import com.airbnb.android.react.maps.MapsPackage;
and
new MapsPackage()
I found if I added them, there would be error.
but I still have problem to display the map, just like this

[zengyanzi]

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

[svjchrysler]

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

[lavarajallu]

@zengyanzi how Can u Install Google Play Services in your android studio Can you Explain step by step procedure

[lavarajallu]

I Need to run On Android Emulator

[zengyanzi]

@lavarajallu https://zengyanzi.github.io/2017/04/20/React-Native-Google-Map/
Here are the steps I recorded months ago, hope will help others.

[LuisMesa]

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"/>

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

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

5. 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);

6. 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.

[janpeter123]

Thank you, You helped me a lot!
YOU ARE MY SAVIOUR!

[GabeConsalter]

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.