Android: AIRMap was not found in the UIManager - react-native

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
I am using ../../../node_modules because I am using Monorepo technique to maintain 2 apps in one git repo
../node_modules might work for you
keep google() at last of the code-block
IOS
See this for solution in IOS https://stackoverflow.com/a/67945288/3437900