Invariant Violation: requireNativeComponent: "AIRMap" was not found in the UIManager. No fix? - react-native

Question

I have followed the guide on the react-native-maps documentation : I got the error.
I looked everywhere on stackoverflow and on google and I was not able to find a fix.
I tried all answers I could find on forums and I still get the error.
The error :
Invariant Violation: requireNativeComponent: "AIRMap" was not found in the UIManager.
My code :
import React from 'react';
import MapView from 'react-native-maps';
import { StyleSheet } from 'react-native';
export default class App extends React.Component {
constructor() {
super();
this.state = {};
}
render() {
return (
<MapView
style = {styles.map}
showsUserLocation = {false}
followUserLocation = {false}
zoomEnabled = {true}
/>
)
}
}
const styles = StyleSheet.create ({
map: {
height: 400,
marginTop: 80
}
})

Answer 1

Please check these two links which provide you detailed information about react native map integration in iOS & Android
Map integration link 1 for Android & ios
Map integration link 2
Some time iOS library does not link properly so you need to manually add library into Xcode.

Answer 2

Try this:
open xcode project > your project > Build Phases > Link Binaries > Remove libAirMaps.a >
then add it again > check if it works ...
check image for detailed instruction
Edit :
if you already installed react-native-maps try to add AirMapsLib manually. Follow the instructions on this image. after that, try again the above instruction.

Answer 3

I do not face this issue yet in iOS but on Android.
Invariant Violation: requireNativeComponent:xxx not found in UIManager
Issue seems to be the dependent is not linked to your project, hence 2 solutions for this issue (depending on your 'dependency')
run react-native link in terminal/cmd at your project path.
Manual append the dependency in your MainApplication.java as shown below:
Manual append the dependency in your MainApplication.java as shown below:
#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
packages.add(new RNFirebaseAnalyticsPackage());
packages.add(new xxxPackage());
}
There may be

Answer 4

I have solved this issue by only running react-native run-android.
Note: if you have run react-native link unlink this first.

Answer 5

Add below lines to MainApplication.java
import com.airbnb.android.react.maps.MapsPackage;
#Override
protected List<ReactPackage> getPackages() {
#SuppressWarnings("UnnecessaryLocalVariable")
List<ReactPackage> packages = new PackageList(this).getPackages();
packages.add(new MapsPackage());
return packages;

Answer 6

Take advantage of yarn. As npm would give giving errors that has no relevance to the solve the problem.

Answer 7

you need to add google api key in your project as well to install the library properly.

Answer 8

for me i had on my ios map, i had to close my terminal and my stimulator then restart again and everything was okay.

Answer 9

There are 2 possible errors which throw AIRMap error in your application.
Check your GOOGLE GEO API KEY is set correctly in AndroidManifest.xml. For e.g.:
<application android:usesCleartextTraffic="true" tools:targetApi="28" tools:ignore="GoogleAppIndexingWarning"> <meta-data android:name="com.google.android.geo.API_KEY" android:value="YOUR_API_KEY"/> </application>
react-native-maps package is out of date.
With "react-native-maps": "^0.25.0" i had this problem too.
So try to update react-native-maps package. In your package.json set for e.g. "react-native-maps": "^1.4.0"