react-native-maps: "AIRMap" was not found in the UIManager.

Is this a bug report?

Yes and No, as it has been answered in many other Issues, but none of the answers seems to work for me…

Invariant Violation: requireNativeComponent: “AIRMap” was not found in the UIManager.

This error is located at: in AIRMap (at MapView.js:760) in MapView (at Home.js:118)

skjermbilde 2018-09-18 kl 16 34 47

Have you read the Installation Instructions?

Yes

Environment

“react-native”: “^0.57.0-rc.4”, “react-native-maps”: “^0.21.0”,

Target platform: iOS Simulator: iPhone 6

Steps to Reproduce

I tried this:

  1. rm -rf ios android node_modules
  2. npm install
  3. react-native upgrade
  4. react-native link
  5. libAirMaps.a is added in Build Phases
  6. AirGoogleMaps and AirMaps is added to Frameworks
  7. Followed this guide to add Maps SDK for iOS manually without CocoaPods: https://developers.google.com/maps/documentation/ios-sdk/start
  8. Added @import GoogleMaps; and [GMSServices provideAPIKey:@“YOUR_API_KEY”]; to AppDelegate.m

Expected Behavior

I have not added this to package.json, as I am unsure what path it is asking for? I found this at https://github.com/react-community/react-native-maps/blob/master/docs/installation.md

{
  "name": "your-app",
  "scripts": {
    "postinstall": "./node_modules/react-native-maps/enable-google-maps REPLACE_ME_RELATIVE_PATH_TO_GOOGLE_MAPS_INSTALL"
  }
}

The Map would be displayed. But I get the error no matter what I do.

Actual Behavior

Added this to my component, followed the guides excactly. Also tried creating a new app, but it doesn’t work:

import MapView from 'react-native-maps';
<MapView
        initialRegion={{
          latitude: 37.78825,
          longitude: -122.4324,
          latitudeDelta: 0.0922,
          longitudeDelta: 0.0421,
        }}
      />

Reproducible Demo

Working on setting this up.

About this issue

  • Original URL
  • State: closed
  • Created 6 years ago
  • Reactions: 16
  • Comments: 43

Most upvoted comments

My issues fixed by using this step

  1. Using "react-native-maps": "https://github.com/react-community/react-native-maps.git" in my package.json and run yarn install

  2. In my android/build.gradle, add:

ext {
    buildToolsVersion = "27.0.3"
    minSdkVersion = 16
    compileSdkVersion = 27
    targetSdkVersion = 26
    supportLibVersion = "27.1.1"
    googlePlayServicesVersion = "15.0.1"
    androidMapsUtilsVersion = "0.5+"
}

May be you must adjust with your project

  1. In android/app/build.grade add compile project(':react-native-maps') in dependencies object

  2. In android/app/src/main/java/com/projectName/MainApplication.java edit in getPackages() function so it look like this

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

I fixed my issue by adding this last step. I got the AIRMap error when I forget to adding new MapsPackage() in my MainApplication.java

May be you must adjust with yout ios setting, btw I didn’t develop in ios 😄

I love how every issue gets simply closed without solution or help. A simple statement what could be wrong/missing would help. People writing their Android “solution” to an ios OP is also not very helpful and only clutters everything.

I get that it might be a stupid little error. Something missing or clashing. But giving a hint how to validate that everything is linked correctly would be nice. Something like “downgrade your RN until it works” like many stated is clearly no solution or option whatsoever.

As the podfile in the instructions differs significantly from the default one - and simply replacing it is normally not an option (we have other pods, you know?) - my guess would be people not including all the dependencies correctly. But no one can validate things like that without knowing what is actually needed from the podfile.

These steps fixed this error for me.

  1. Clear watchman watches: watchman watch-del-all
  2. Delete the node_modules: rm -rf node_modules && npm install
  3. Reset Metro Bundler cache: rm -rf /tmp/metro-bundler-cache-*
  4. Remove haste cache: rm -rf /tmp/haste-map-react-native-packager-*
  5. Shut down all terminal windows.
  6. Delete the app on the ios simulator (I’m using the simulator).
  7. Delete /ios/build
  8. run ‘react-native run-ios’.

Try this before you try anything of the above (I tried a bunch of them and none worked, but they made it more difficult to apply the fix below as I screwed up my project in the process)

I fixed this one by

cd ios
pod install

The instructions are simply unclear on what to do - the implication seems to be one can either use react native link OR install CocoaPods. When in actuality you have manually run pod install

It’s not difficult to fix! The problem is there’s poor documentation, and a lot of the “fixes” above are unnecessary and don’t work. I am guessing they were for version 0.21 and possibly others that actually had an issue with integration.

0.22 works!

You only have to go to ./ios and run ‘pod install’.

When you install react native map, react native keep the old build. You must remote iOS/build and node modules and re-build your application ! In new version builded there are AirMap ! Enjoy

For me

My issues fixed by using this step

  1. Using "react-native-maps": "https://github.com/react-community/react-native-maps.git" in my package.json and run yarn install
  2. In my android/build.gradle, add:
ext {
    buildToolsVersion = "27.0.3"
    minSdkVersion = 16
    compileSdkVersion = 27
    targetSdkVersion = 26
    supportLibVersion = "27.1.1"
    googlePlayServicesVersion = "15.0.1"
    androidMapsUtilsVersion = "0.5+"
}

May be you must adjust with your project

  1. In android/app/build.grade add compile project(':react-native-maps') in dependencies object
  2. In android/app/src/main/java/com/projectName/MainApplication.java edit in getPackages() function so it look like this
@Override
    protected List<ReactPackage> getPackages() {
      return Arrays.<ReactPackage>asList(
          new MainReactPackage(),
            new MapsPackage()
      );
    }

I fixed my issue by adding this last step. I got the AIRMap error when I forget to adding new MapsPackage() in my MainApplication.java

May be you must adjust with yout ios setting, btw I didn’t develop in ios 😄

This fixed my, I forgot to add new MapsPackage() to getPackages after RNN install. what a painnnnn 🗡

I got the same error but fix it. In android/build.gradle, set minSdkVersion value to 22

Anyone have fix this issue for RN version 0.60 ?

I have got this lib working, after completely updating node and yarn to the latest versions. In the end I’ve used yarn instead npm, so there might be a problem with npm install.

@vemundeldegard did you run react-native link react-native-maps ?

What worked for me was using yarn instead of npm.

I ran yarn add react-native-maps -E instead of npm install react-native-maps.

The package was missing under node_modules folder, using yarn did the trick.

Then cd ios pod install

If you followed all instructions on the react-native-maps properly, the way to fix this issue is simply to uninstall the app from your device / simulator, then re-running it.

This is a general advice when installing new pods.

I had the same issue and I fixed it by the folowing steps :

  1. Go to your android/settings.gradle file and add :
include ':react-native-maps'
project(':react-native-maps').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-maps/lib/android')
  1. Go to your android/app/src/java/MainApplication.java file and add :

import com.airbnb.android.react.maps.MapsPackage;

And add new MapsPackages() to getPackages() that return a list, something like this :

@Override
    protected List<ReactPackage> getPackages() {
      return Arrays.<ReactPackage>asList(
          ...
          new MapsPackage(),
          ...
      );
    }
  1. Go to your android/app/build.gradle file and add :

compile project(':react-native-maps') to dependencies block.

  1. Add your API key to your manifest file (android/app/src/main/AndroidManifest.xml):
<application>
   <!-- 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="Your Google maps API Key Here"/>
</application>
  1. Finally, go to your android/build.gradle file and add :
ext {
       buildToolsVersion = "28.0.3"
       minSdkVersion = 21
       compileSdkVersion = 28
       targetSdkVersion = 27
       supportLibVersion = "28.0.0"
       googlePlayServicesVersion = "15.0.1"
       androidMapsUtilsVersion = "0.5+"
   }

I hope this will help you, I am waiting for your feedbacks

I solved it by adding the .xcodeproj in node_modules/react-native-maps/lib to Libraries by right clicking and then adding it to link binary with libraries and linked frameworks and libraries.

Shout out to @spearmootz for guiding me on this 😄

@vemundeldegard sadly no, there is only one person that is allowed to publish to npm and he’s very busy

@vemundeldegard many other issues say to use the github version - did you try?