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

Lethe

Can you maybe update your post with your Application.java file? – Mikol

@Mikol I have posted Application.java file. You can check this out. – Lethe

@Mikol can you please help on this issue – Lethe

Mmm... I was expecting the getPackages() not to have the new MapsPackage() line, which was likely to be the error, but other than that, I am out of ideas. The problem is that the name 'AIRMap' cannot be found in any of the native modules. The module names are found in the getName function, as in here: github.com/airbnb/react-native-maps/blob/master/android/src/… I'd suggest you go through the files and check if there is a name mismatch of some sort. – Mikol

@Mikol There is no name mismatch for AIRMap in MapView.js file. So, how can we identify the problem behind this. – Lethe

Mmm... I am not sure. Check that you have followed all the steps in the documentation, try to replicate them in a new clear project and also maybe the example projects included in the repo might be of help. – Mikol

Did you succeed finding a solution to this problem? I'm facing the same issue when developing in a simulator with react-native. – Trahurn

@GarimaMathur Did you find any solution to this issue. I am using react-native-maps(0.13.0) and react-native(0.43.3)) – Previdi

Ok I fixed it using react-native start and closing the app and then running react-native run-android – Previdi

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

Trahurn

Answer 2

I fixed the problem by adding MapsPackage to the getPackages method in MainApplication.java file.

no need to add @Override

My Code looks like this:

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

Engadine

Answer 3

ITS WORKING

it repeated this failure to recreate successfull working react-native-maps

react - 16.3.1 react-native - 0.55.4 react-native-maps - 0.21.0

step 1 i created app like this $react-native init tank1

step 2 I followed installation from react-native-maps

step 3 follow installation from Moses Lucas post important

step 4 in MainApplication.java use below code without @Override

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

Note 1 I had doub't about synatx @import GoogleMaps; in AppDelegete.m but this too works fine

Note 2 If you had run react-native link please check settings.gradle it should not contain duplicate entries

Note 3 Do not remove include ':app' from settings.gradle

Ancona