Android Warning: Native component for "AIRMap" does not exist - react-native

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

Answer 2

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

Answer 3

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