Native component for "AIRMap" does not exist' on IOS

[aniiskywalker]

Is this a bug report?

Not exactly, i think it needs more information for the instalation

Have you read the Installation Instructions?

Yes

Environment

react-native: 0.52.0
react: 16.2.0

react-native-maps: 0.20.1

Steps to Reproduce

I'm trying to use google maps for my project, I follow the instructions (I used pods with cocoapods)
I DON'T LINK REACT-NATIVE-MAPS and i get a red screen with an error 'Invariant Violation: Native component for "AIRMap" does not exist'

Expected Behavior

i'm trying to use maps and i spend all day long trying to find a solution but nothing works for me

Actual Behavior

I can't even show a map

Reproducible Demo

UPDATE: Hello Friends, I’ve seen that many of you still have this problem, I offered a solution (scroll down), my problem was related to Headers and frameworks not linked to my Xcode project, I understand that we can have different configurations, but, can you please take a look to my solution 👇? Thank you, have a nice development

[theflutterfactory]

I am getting the same issue

[rborn]

@aniiskywalker @JulianCurrie please try to use the git version and let us know if it works.

[chnbohwr]

I am getting it too ~

[rborn]

@chnbohwr are you using the git master version?

[aniiskywalker]

Hello fellas, i fix my error, it's a little tricky. First of all be sure you don't have linked any AirMap library, then check your podfile.


then copy this pod

target 'YourProjectName' do
  rn_path = '../node_modules/react-native'

    pod 'yoga', path: "#{rn_path}/ReactCommon/yoga/yoga.podspec"
    pod 'React', path: rn_path, subspecs: [
      'Core',
      'RCTActionSheet',
      'RCTAnimation',
      'RCTGeolocation',
      'RCTImage',
      'RCTLinkingIOS',
      'RCTNetwork',
      'RCTSettings',
      'RCTText',
      'RCTVibration',
      'RCTWebSocket',
      'BatchedBridge'
    ]

    pod 'GoogleMaps'  # Remove this line if you don't want to support GoogleMaps on iOS
    pod 'react-native-maps', path: '../node_modules/react-native-maps'
    pod 'react-native-google-maps', path: '../node_modules/react-native-maps'  # If you need GoogleMaps support on iOS
end

post_install do |installer|
  installer.pods_project.targets.each do |target|
    if target.name == 'react-native-google-maps'
      target.build_configurations.each do |config|
        config.build_settings['CLANG_ENABLE_MODULES'] = 'No'
      end
    end
    if target.name == 'yoga'
      target.build_configurations.each do |config|
        config.build_settings['GCC_TREAT_WARNINGS_AS_ERRORS'] = 'NO'
        config.build_settings['GCC_WARN_64_TO_32_BIT_CONVERSION'] = 'NO'
      end
    end
    if target.name == "React"
      target.remove_from_project
    end
  end
end

.. and this is the tricky part, you have to add at Framework Search Paths =>' GoogleMaps framework' and its headers, (Users/youruser/yourprojectname/ios/Pods/GoogleMaps/Base/Frameworks & Users/youruser/yourprojectname/ios/Pods/GoogleMaps/Maps/Frameworks)
I added $(inherited) but I'm not sure if it's relevant

Build and compile, and IT WORKS!

Alright if you have any questions about it feel free to ask, i'll leave this issue open.. And please forgive me about my not perfect english.

PS. thanks @rborn the example pods, it help me to find the issue

[rborn]

Going to close the issue as the solution was found.

[DavidNorena]

@rborn what was the solution, I'm still having the error :(

[aniiskywalker]

@DavidNorena have you tried my solution? :0

[DavidNorena]

@aniiskywalker Hi, and thanks for your answer, sadly I'm working with android, my workaround was to start a new project from scratch and now its working ...

Weird and tedious !

[aniiskywalker]

@DavidNorena we face an issue in android, we change some version from 10 to 11 (I don’t remember what was that but I hope you know what I’m talking about haha)

[jarmlaht]

I have the same issue in android, the command "react-native bundle --platform android --dev false --entry-file index.js --bundle-output android\app\src\main\assets\index.android.bundle --assets-dest android\app\src\main\res" seems to work just fine. I don't use AirMap at all in my code, I use MapView. When I try to show the screen using MapView, I get the same error message as shown above.

[DavidNorena]

@aniiskywalker yeah I know what you are talking about. The thing is that starting a project from scratch wasn't the real solution, as soon as I started using wix/react-native-navigation I found that again I had the issue, so after a good time searching I found that I had to change the following steps:

1. I had to remove new MapsPackage() from the getPackages as the docs says.

2. I had this code (for wix Rnn):

@Override
  public List<ReactPackage> createAdditionalReactPackages() {
      return null;
  }

Just replaced it for this one:

protected List<ReactPackage> getPackages() {
    // Add additional packages you require here
    // No need to add RnnPackage and MainReactPackage
    return Arrays.<ReactPackage>asList(
      new MapsPackage()
    );
  }

  @Override
  public List<ReactPackage> createAdditionalReactPackages() {
    return getPackages();
  }

Now it's working, remember I'm using android !!!

[jarmlaht]

@aniiskywalker Thanks for the tips! I tried the steps you suggested, I still get some errors. About getPackages() and createAdditionalReactPackages(), I get errors for the @OverRide annotation. Where are these methods coming from?

[jarmlaht]

Now after some struggle compiling works! I made several changes to the .gradle files, there were mismatches in the version numbers.

[aniiskywalker]

@DavidNorena that's right, that's how I have my mainApplication

protected List<ReactPackage> getPackages() {
      // Add additional packages you require here
      // No need to add RnnPackage and MainReactPackage
      return Arrays.<ReactPackage>asList(
                 new MapsPackage()
      );
    }

    @Override
    public List<ReactPackage> createAdditionalReactPackages() {
      return getPackages();
    }

    @Override
    public String getJSMainModuleName() {
      return "index";
    }

@jarmlaht Cool! Fortunately Android never gimme trouble 😄 . Good to know you both solved this issue

[noumanDev]

Environment
react-native : 0.53.0
react :16.2.0
react-native-maps : 0.21.0

Followed the installation steps

1. npm install react-native-maps —save
2. added code to cocoa pods
3. then run pod install
4. added code in appdelegate.m
5. Did not run react-native link react-native-maps
6. added code in app .js

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

7. After all these steps then i run the app and following error shows

8. Then performed additional steps suggested by @aniiskywalker

# Uncomment the next line to define a global platform for your project
platform :ios, '9.0'

target 'FikiFoo' do
  # Uncomment the next line if you're using Swift or would like to use dynamic frameworks
  # use_frameworks!

  # Pods for FikiFoo
  rn_path = '../node_modules/react-native' # This path is likely to be `../node_modules/react-native` in your own project.
  rn_maps_path = '../node_modules/react-native-maps/' # This path is likely to be `../node_modules/react-native-maps` in your own project.

  pod 'yoga', path: "#{rn_path}/ReactCommon/yoga/yoga.podspec"
  pod 'React', path: rn_path, subspecs: [
    'Core',
    'CxxBridge',
    'DevSupport',
    'RCTActionSheet',
    'RCTAnimation',
    'RCTGeolocation',
    'RCTImage',
    'RCTLinkingIOS',
    'RCTNetwork',
    'RCTSettings',
    'RCTText',
    'RCTVibration',
    'RCTWebSocket',
  ]

  # React Native third party dependencies podspecs
  pod 'DoubleConversion', :podspec => "#{rn_path}/third-party-podspecs/DoubleConversion.podspec"
  pod 'glog', :podspec => "#{rn_path}/third-party-podspecs/glog.podspec"
  pod 'Folly', :podspec => "#{rn_path}/third-party-podspecs/Folly.podspec"

  # react-native-maps dependencies
  pod 'react-native-maps', path: rn_maps_path
  pod 'react-native-google-maps', path: rn_maps_path  # Remove this line if you don't want to support GoogleMaps on iOS
  pod 'GoogleMaps'  # Remove this line if you don't want to support GoogleMaps on iOS
  pod 'Google-Maps-iOS-Utils' # Remove this line if you don't want to support GoogleMaps on iOS


end

post_install do |installer|
  installer.pods_project.targets.each do |target|
    if target.name == 'react-native-google-maps'
      target.build_configurations.each do |config|
        config.build_settings['CLANG_ENABLE_MODULES'] = 'No'
      end
    end
    if target.name == "React"
      target.remove_from_project
    end
  end
end

Still the same error, tried many solutions, like pod update and some other suggested solutions submitted on other issues, but no luck, already spend 4 days on this issue, i dont know what i am doing wrong,

[aniiskywalker]

@noumanDev Hello! I’m checking if I miss something with my installation but no, when you add .../ios/Pods/Headers/Public/react-native-maps you are adding AirMaps (because that path contains AirMap.h). I don’t want to sound basic but have you tried erase cache? Believe me, I tried everything ☹️. Also, maybe you have to add the condition for “yoga” cuz when I try to run in a real device (from Xcode) it crashes

[noumanDev]

Will try it tomorrow inshAllah

[jorgecasariego]

Oh my God! What a bad way I had to to found the solution.

I were to Xcode -> clean -> Build.

There I saw that I had 2 errors in my code:

1. Expected ';' after module name (@import GoogleMaps)

2. Use of undeclared identifier ([GMSPlacesClient provideAPIKey:@"MY_KEY"];)

So, I added ';' and deleted the line GMSPlacesClient provideAPIKey:@"MY_KEY"];

After that I executed again 'npm run ios' and all worked like a charm!

[7772]

Hello, guys~
I solved this error.

You should make sure that pod is perfectly installed. I think AIRMap problem came from Podfile.

To perfectly install, You follow next.

1. delete ./YOUR_PROJECT_NAME/node_modules
2. In root directory, $ npm install
3. $ cd ios
4. delete Podfile, Pods, and everything created by $pod install
5. create Podfile
6. ./YOUR_PROJECT_NAME/ios/Podfile

# Uncomment the next line to define a global platform for your project
# platform :ios, '9.0'

target 'YOUR_PROJECT_NAME' do
    rn_path = '../node_modules/react-native'
    rn_maps_path = '../node_modules/react-native-maps'
  
    # See http://facebook.github.io/react-native/docs/integration-with-existing-apps.html#configuring-cocoapods-dependencies
    pod 'yoga', path: "#{rn_path}/ReactCommon/yoga/yoga.podspec"
    pod 'React', path: rn_path, subspecs: [
        'Core',
        'RCTActionSheet',
        'RCTAnimation',
        'RCTGeolocation',
        'RCTImage',
        'RCTLinkingIOS',
        'RCTNetwork',
        'RCTSettings',
        'RCTText',
        'RCTVibration',
        'RCTWebSocket',
    ]
  
    # React Native third party dependencies podspecs
    pod 'DoubleConversion', :podspec => "#{rn_path}/third-party-podspecs/DoubleConversion.podspec"
    pod 'glog', :podspec => "#{rn_path}/third-party-podspecs/glog.podspec"
    # If you are using React Native <0.54, you will get the following error:
    # "The name of the given podspec `GLog` doesn't match the expected one `glog`"
    # Use the following line instead:
    #pod 'GLog', :podspec => "#{rn_path}/third-party-podspecs/GLog.podspec"
    pod 'Folly', :podspec => "#{rn_path}/third-party-podspecs/Folly.podspec"
  
    # react-native-maps dependencies
    pod 'react-native-maps', path: rn_maps_path
    pod 'react-native-google-maps', path: rn_maps_path  # Remove this line if you don't want to support GoogleMaps on iOS
    pod 'GoogleMaps'  # Remove this line if you don't want to support GoogleMaps on iOS
    pod 'Google-Maps-iOS-Utils' # Remove this line if you don't want to support GoogleMaps on iOS
  end
  
  post_install do |installer|
    installer.pods_project.targets.each do |target|
      if target.name == 'react-native-google-maps'
        target.build_configurations.each do |config|
          config.build_settings['CLANG_ENABLE_MODULES'] = 'No'
        end
      end
      if target.name == "React"
        target.remove_from_project
      end
    end
  end

You can see line number 14~17.., pod reactpod 'React', path: rn_path, subspecs: [ ... ] !!
I updated this point unlike documentaion. I don't know why this error occurs but anyway, I implemented MapView for several month ago and I used old code.

7. In ios directory, $ pod install
8. In your root directory, $ react-native run-ios or android

Happy coding, thanks.

---

um... I think before you do $ pod install, you maybe delete node_modules and re-install.
The reason is that worked fine after I added all the same code writed documentation to Podfile.

I recommend after deleting and re-installing node_module, then you do $ pod install

[adamveld12]

I fixed this issue in my project by using #import <GoogleMaps/GoogleMaps.h> instead of @import GoogleMaps; in the AppDelegate.m

[KeithEinstein]

I have done the following

1. Installed cocoapods
2. added the file contents provided above by @7222
3. added #import <GoogleMaps/GoogleMaps.h> to AppDelegate.m provided by @adamveld12
4. deleted my node_modules, reinstalled them
5. called pod install on /ios

It still says Invariant Violation: Native component for "AIRMap" does not exist.

Can someone please help?

[sananddev]

i get little diffferent error , and the error is

[JosephochNils]

@aniiskywalker and @rborn -- Can you pls clarified your solution? I am testing the above solution RN@0.56.0 ; React@16.4.1 and React-native-maps@0.21.0 ; and iOS 9
I am getting the same Error : 'AIRMap was not found in the UIManager '. I have followed all the installation instruction. But something is missing in my configuration that I am not able to find out... Could you guys help me ... I am a RN beginner.

[aniiskywalker]

@JosephochNils Hello, can you please give more info? What steps have you tried?

[KeithEinstein]

If you install the pods and followed the instructions properly and still see the problem then check to make sure your using the workspace of the project when opening Xcode instead of the of the xcodeproj. Keith Einstein Founder & CEO Servd Inc. Servd.com

…

________________________________ From: Ana Victoria <notifications@github.com> Sent: Sunday, July 22, 2018 11:04:03 AM To: react-community/react-native-maps Cc: Keith Einstein; Comment Subject: Re: [react-community/react-native-maps] Native component for "AIRMap" does not exist' on IOS (#2064) @JosephochNils<https://github.com/JosephochNils> Hello, can you please give more info? What steps have you tried? — You are receiving this because you commented. Reply to this email directly, view it on GitHub<#2064 (comment)>, or mute the thread<https://github.com/notifications/unsubscribe-auth/AA-HLqWezL_jyQf4OG5d2qB_-OS3tJw8ks5uJJRjgaJpZM4SeJ_7>.

[JosephochNils]

@aniiskywalker and @KeithEinstein - I have managed to fix it by following @7772 advices and the installation instruction.

[bavachaucp0002]

@sananddev did you fixed ? i have same error

[bashirpour]

i have same error

[Khsed4]

@aniiskywalker I have the same error on android
This is my Package.json file

and here is my MainApplication.java

[ProteanDev]

@aniiskywalker is there a way to solve this same issue without using Cocoapods?
I already install Google Maps SDK manually for iOS

[aniiskywalker]

@Khsed4 hello, sorry for answer till now, fortunately (or unfortunately hehe) I didn’t have problems with android, but someone fix the issue above on this post, hope it helps, please let us know. @ProteanDev Hi, I didn’t try it without using cocoa pods, what I know is if you don’t use cocoa pods you have to link library, be sure headers and frameworks (build settings)are set with react-native-maps folders.

[aniiskywalker]

@Khsed4 here's my main application and my package json

import android.app.Application;

import com.agontuk.RNFusedLocation.RNFusedLocationPackage;
import com.airbnb.android.react.maps.MapsPackage;
import com.facebook.react.ReactApplication;
import com.geektime.rnonesignalandroid.ReactNativeOneSignalPackage;
import co.apptailor.googlesignin.RNGoogleSigninPackage;
import com.geektime.rnonesignalandroid.ReactNativeOneSignalPackage;
import cl.json.RNSharePackage;
import cl.json.ShareApplication;

import com.imagepicker.ImagePickerPackage;


import org.devio.rn.splashscreen.SplashScreenReactPackage;
import com.brentvatne.react.ReactVideoPackage;
import com.oblador.vectoricons.VectorIconsPackage;
import com.facebook.react.ReactNativeHost;
import com.facebook.react.ReactPackage;
import com.facebook.react.shell.MainReactPackage;
import com.facebook.soloader.SoLoader;
import com.magus.fblogin.FacebookLoginPackage;
import com.reactnativenavigation.NavigationApplication;

import java.util.Arrays;
import java.util.List;

public class MainApplication extends NavigationApplication implements ShareApplication{

    @Override
    public boolean isDebug() {
      // Make sure you are using BuildConfig from your own application
      return BuildConfig.DEBUG;
    }

    protected List<ReactPackage> getPackages() {
      // Add additional packages you require here
      // No need to add RnnPackage and MainReactPackage
      return Arrays.<ReactPackage>asList(
              new ReactVideoPackage(),
              new VectorIconsPackage(),
              new RNFusedLocationPackage(),
              new SplashScreenReactPackage(),
              new FacebookLoginPackage(),
              new MapsPackage(),
              new ImagePickerPackage(),
              new RNSharePackage(),
              new ReactNativeOneSignalPackage(),
              new RNGoogleSigninPackage()

      );
    }

    @Override
    public List<ReactPackage> createAdditionalReactPackages() {
      return getPackages();
    }
    @Override
    public String getJSMainModuleName() {
      return "index";
    }
    @Override
    public String getFileProviderAuthority() {
        return "com.app.provider";
    }
}

{
  "name": "app",
  "version": "0.1.0",
  "private": true,
  "devDependencies": {
    "babel-preset-react-native-stage-0": "^1.0.1",
    "jest-react-native": "^18.0.0",
    "react-test-renderer": "16.2.0"
  },
  "scripts": {
    "start": "react-native start",
    "android": "react-native run-android",
    "ios": "react-native run-ios",
    "test": "node node_modules/jest/bin/jest.js"
  },
  "jest": {
    "preset": "react-native"
  },
  "dependencies": {
    "react": "16.2.0",
    "react-native": "0.52.0",
    "react-native-maps": "^0.20.1",
  }
}

[Khsed4]

@aniiskywalker firstly really appreciate your responses secondly I have solved my problem , not sure how I did it though . hahahaha