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

Question

I have successfully added an airbnb map in the response app.

But when I add the airbnb map view to my existing native Android application. I always get a blank card with a red border.

I use RN 0.40 and native maps 0.13.0.

after commands to respond to your own links . Then android always has a Warning: The native component for "AIRMap" does not exist.

Launching the Application application with appParams: {"initialProps": {}, "rootTag": 1}. DEV === true, development level warning is enabled, performance optimization is disabled

Here is the 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); } } 

Please suggest any solution.

Answer 1

In my case, I was getting this error (and a blank screen) when trying to run the application on an Android simulator. I fixed the problem with the following steps:

1 - Launch react-native link , then restart the js server ( react-native start ) and redistribute the application on the simulator (run-native run-android)

2 - Work on a real device or on a simulator based on the image of the GoogleApi system . If you get googleApi not supported message , add some packages to android studio and create a new device, as described in the following link:

My application uses Google Play services that are not supported by your device. contact the manufacturer for help

Working configuration for my virtual device:

3 - Adding Google_API_KEY (if you don’t have one, you will need to create one) in the manifest file (android \ app \ src \ main \ AndroidManifest.xml) :

  <!-- make sure it 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 the js server, redistributed on the device

• Everything should have worked, but I ran into a problem with my google_api_key (empty yellow card), as in the following image:

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

• Rebooting the JS server, launched react-native run-android , and it worked:

For debugging, I used adb logcat in a separate terminal.

Inspired by: 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 does not appear, you may need styling. I added the base component for my component as follows:

 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

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

no need to add @Override

My code is as follows:

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

Answer 3

WORKS

he repeated this refusal to recreate successful working interactive maps

respond - 16.3.1 react - native - 0.55.4 native cards - 0.21.0

step 1, I created an application, like this $ -active init tank1

Step 2 I followed the installation of adaptive maps

step 3 subsequent installation by Moses Lucas post important

step 4 in MainApplication.java is using below code without @Override

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

Note 1. I was not associated with the syntax @import GoogleMaps; in AppDelegete.m but it works fine too

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

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