Android: AIRMap was not found in the UIManager

Question

So i'm trying to implement a map view in my react native app, using react-native-maps. When i'm installing it with npm it's all good, and linking it makes no errors. The problem is when i try to run it, then I get the

Invariant Violation: requireNativeComponent: "AIRMap" was not fount in the UIManager.

I've narrowed it down to being on the Android side, since that's the emulator i'm running. For some reason, the gradle files seems broken and I have no idea of what it can be. I've tried most guides i've found but none seems to handle the issue. I've tried to link it manually, remove the link and so on. I've also tried adding the direct link to GitHub which doesn't solve it either.

Some build info:

React version: 0.60.0

Gradle version: 5.4.1

Emulator version: Pie API 28

settings.gradle:

rootProject.name = 'ProjectName'
apply from: file("../node_modules/@react-native-community/cli-platform-android/native_modules.gradle");     
applyNativeModulesSettingsGradle(settings)
include ':app'
include ':react-native-maps'
project(':react-native-maps').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-maps/lib/android')

build.gradle:

implementation 'com.facebook.react:react-native:+
implementation project(':react-native-maps')

MapView:

import MapView from 'react-native-maps'
 <MapView
          region={{
            latitude: 42.882004,
            longitude: 74.582748,
            latitudeDelta: 0.0922,
            longitudeDelta: 0.0421,
          }}
          ></MapView>

Lastly, I have also created an API to Google maps in the android project. The project is manageable to recreate by initiating a new react-native project and implementing react-native-maps

Answer 1

For Android

AndroidManifest.xml

    <application
        android:usesCleartextTraffic="true"
        tools:targetApi="28"
        tools:ignore="GoogleAppIndexingWarning">
        <activity android:name="com.facebook.react.devsupport.DevSettingsActivity" />
      <!-- You will only need to add this meta-data tag, but make sure it's a child of application -->
      <meta-data
              android:name="com.google.android.geo.API_KEY"
              android:value="AIzDDDBBLn-PhCtBM1AnC_h66yH8Lw2DDD14WW0"/>
    </application>

MainApplication.java

import java.util.List;
import com.airbnb.android.react.maps.MapsPackage;  // <-- Add this line

...


        @Override
        protected List<ReactPackage> getPackages() {
          @SuppressWarnings("UnnecessaryLocalVariable")
          List<ReactPackage> packages = new PackageList(this).getPackages();
          // Packages that cannot be autolinked yet can be added manually here, for example:
          // packages.add(new MyReactNativePackage());
          packages.add(new MapsPackage()); // <-  ADD THIS LINE
          return packages;
        }

android/settings.gradle

if you are not using monorepo technique

include ':react-native-maps'
project(':react-native-maps').projectDir = new File(rootProject.projectDir, '../../../node_modules/react-native-maps/lib/android')

android/build.gradle

buildscript {
    ext {
        buildToolsVersion = "29.0.3"
        minSdkVersion = 21
        compileSdkVersion = 29
        targetSdkVersion = 29
        ndkVersion = "20.1.5948944"
        supportLibVersion = '28.0.0'
        playServicesVersion = "17.0.0" // or find latest version
        googlePlayServicesVersion = "17.0.0" // or find latest version
        androidMapsUtilsVersion = "2.2.3"
    }
    repositories {
        jcenter()
        google() // keep google() at last
    }
    dependencies {
        classpath("com.android.tools.build:gradle:4.1.0")
        // NOTE: Do not place your application dependencies here; they belong
        // in the individual module build.gradle files
    }
}

allprojects {
    repositories {
        mavenLocal()
        maven {
            // All of React Native (JS, Obj-C sources, Android binaries) is installed from npm
            url("$rootDir/../../../node_modules/react-native/android")
        }
        maven {
            // Android JSC is installed from npm
            url("$rootDir/../../../node_modules/jsc-android/dist")
        }

        jcenter()
        maven { url 'https://www.jitpack.io' }
        google() // keep google() at last
    }
}

android/app/build.gradle

dependencies {

    ...


    implementation project(':react-native-maps') // at last
}

Notes

1. I am using ../../../node_modules because I am using Monorepo technique to maintain 2 apps in one git repo
2. ../node_modules might work for you
3. keep google() at last of the code-block

---

IOS

See this for solution in IOS https://stackoverflow.com/a/67945288/3437900