Android Warning: Native component for "AIRMap" does not exist

Question

I have successfully added an Airbnb map in react app.

But when I am adding an Airbnb map view to existing android native application. I am getting always empty map with red border.

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

After the react-native 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

Here is my MainApplication.java file

package punchh.customreactcomponent;

import android.app.Application;

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

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

  @Override
  public void onCreate() {
    super.onCreate();
    SoLoader.init(this, false);
  }
}

Answer 1

In my case I was getting that error (and a blank screen) when attempting to run an app on an android simulator. I fixed the issue with applying the next steps:

1 - Running react-native link then restarted the js server (react-native start) and redeployed the app on simulator (react-native run-android)

2 - Running on a real device or on a simulator based on GoogleApi system image. If you get a googleApi not supported message then add some packages in android studio and create a new device as described in next link:

My application relies Google play services, which is not supported by your device. contact the manufacturer for assistance

The working configuration for my virtual device:

3 - Adding the Google_API_KEY (If you don't have one you'll have to create it) in manifest file (android\app\src\main\AndroidManifest.xml):

   <!-- make sure it's a child of application -->
   <meta-data
     android:name="com.google.android.geo.API_KEY"
     android:value="Your Google maps API Key Here"/>

• Started the device, restarted js server, redeployed on device

• Everything should have worked but I faced an issue with my google_api_key (an empty yellow map) like in the next picture:

so I created and enabled a new one specific for my project here https://developers.google.com/maps/documentation/android-api/signup#release-cert

• Restarted JS server, ran react-native run-android and it worked:

To debug I used adb logcat in a separate terminal.

Inspired from: https://github.com/airbnb/react-native-maps/blob/master/docs/installation.md and from https://github.com/airbnb/react-native-maps/issues/118

If the map still doesn't show you might need some styling. I added a basic one to my component like this:

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

const styles = StyleSheet.create({
    container: {
        ...StyleSheet.absoluteFillObject,
        height: 400,
        width: 400,
        justifyContent: 'flex-end',
        alignItems: 'center',
    },
    map: {
        position: 'absolute',
        top: 0,
        left: 0,
        right: 0,
        bottom: 0,
        width: 300,
        height: 300
    },
});

export default class MyMap extends React.Component {
    render() {
        const { region } = this.props;

        return (
            <View style ={styles.container}>
                <MapView
                    style={styles.map}
                    region={{
                   latitude: 44.42,
                   longitude: 26.10,
                   latitudeDelta: 0.015,
                   longitudeDelta: 0.0121
                 }}
                >
                </MapView>
            </View>
        );
    }
}