React-native-maps: Updated and complete installation instructions?

[rborn]

Hi everyone,
Now that the module moved from AirBnb to the community repo, could anybody make an updated and complete installation manual that would work 100%, with and without google maps and so on ?

It's very frustrating to make this module work, and most of the time of it works in simulator it won't work on device or won't work when uploaded to Testflight and so on and it's more a matter of luck instead of a clear way on how to make it work.

I can help with any testing or what's needed for this to become a reality, because I simply cannot make it work reliably.

Sorry for the "_rant_" but I believe this is a real problem for many devs, just look at how many issues are there with "won't compile, duplicated symbols, missing symbols" and so on.

Thank you 🤗

[alvelig]

As far as I can see the most problems are with GoogleMaps and pods.

Following first part (clean install and react-native link) of the readme I could reproduce without problems. https://github.com/alvelig/react-native-maps-example

It will be very helpful if you followed instructions for GoogleMaps and Pods and pointed out specific problems.

Also I welcome you to help me and review those bugs you are able to reproduce. Just ping me there.

[alvelig]

Look, I've done the 2nd part (Pods first option with GoogleMaps) https://github.com/alvelig/react-native-maps-pods-example and did not face any issues yet.

[rborn]

@alvelig thanks a lot for helping with this.
I'll have a look at your example and try to use it in more situations to see if I can make it work (develop mode, release mode, testflight) and let you know

If all goes fine maybe we should remove from the installation instructions what's extra.
I'll let you know

Thanks 🤗

[satori-ytolstoguzov]

I went through installation guide yesterday for Google Maps on iOS. I used example Podfile. Few points I noticed:

• It looks like you should not add AirGoogleMaps folder to your project. It introduces duplicate symbols. Also you have to remove direct reference to AirMaps project as well as libAirMaps from project settings, since you have this in pods already. It all specified in here and linked from installation guide, but I don't see a reason why installation steps are not updated with that in mind.
• I had to use reference to master branch instead of last release tag, because of obsolete version of Google Maps referenced from one of the podspecs. It was fixed in master already, but not in last release.

[alvelig]

@satori-ytolstoguzov yep if you use pods like here https://github.com/alvelig/react-native-maps-pods-example, you should not copy anything.

[rborn]

@satori-ytolstoguzov #1884 😉

[antonsivogrivov]

@alvelig, I have followed the new installation docs and have "Module 'GoogleMaps' not found" error on line where "@import GoogleMaps;" in AppDelegate.m. Any ideas?

[rborn]

@tonygriv ios/android ?

[antonsivogrivov]

ios

[rborn]

@tonygriv new or old project?

[antonsivogrivov]

old

[rborn]

@tonygriv try to install the git version of the module, not the npm one.

[satori-ytolstoguzov]

@rborn I had to use "react-native-maps": "git+https://github.com/react-community/react-native-maps.git", but other than that it worked for iOS Google Maps!

Few minor style inconsistencies in guide:

• In Podfile: We use react-native path as variable: rn_path = '../node_modules/react-native', but react-native-map path as string literal;
• In Podfile: wrong indentation after 5th line;
• "Get a map developer key" header really should be "Get a Google map developer key" or should specify that in content of the following paragraph.

[rborn]

@satori-ytolstoguzov good to hear it worked for you, will push to npm soon.
Would you mind a PR for the changes you suggest? :)

[satori-ytolstoguzov]

@rborn Sure, will open it today, if I will have a spare time.

[antonsivogrivov]

@rborn, 0.19.0 and same error "Module 'GoogleMaps' not found"((

[antonsivogrivov]

Maybe this will help to understand the issue:

After pod install I have warning message

 The `carrier_mobile_app [Debug]` target overrides the `FRAMEWORK_SEARCH_PATHS` build setting defined in `Pods/Target Support Files/Pods-carrier_mobile_app/Pods-carrier_mobile_app.debug.xcconfig'. This can lead to problems with the CocoaPods installation
    - Use the `$(inherited)` flag, or
    - Remove the build settings from the target.

When I added $(inherited) in Framework Search Paths in my target, I get the duplicate symbols error and Module 'GoogleMaps' not found error disappeared.

Maybe I should add some correct path to Framework Search Paths?

[rborn]

@tonygriv did you try to do react-native link the project first ? If yes, please see the troubleshooting section of the docs.

You might also have to clean the search path from any map reference.

If you don't manage maybe you can share the project with me?

[antonsivogrivov]

Yes, at first I did react-native link, and then I made git revert of my project to the state where was no react-native-maps, than I try again to install it, but it failed. Than I found a troubleshooting guide and follow each step. The result is the same.

[rborn]

please check you project not to have left libraries in it even after git reset.

[antonsivogrivov]

A don't see any Map Libraries

[rborn]

@tonygriv can you show me your podfile and your appledelegate.m file?

[antonsivogrivov]

Podfile

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

target 'carrier_mobile_app' 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 'RSKImageCropper'
    pod 'QBImagePickerController'
    pod 'BugsnagReactNative', :path => '../node_modules/bugsnag-react-native'
    pod 'react-native-google-analytics-bridge', :path => '../node_modules/react-native-google-analytics-bridge'
    pod 'GoogleMaps'
    pod 'react-native-maps', path: '../node_modules/react-native-maps'
    pod 'react-native-google-maps', path: '../node_modules/react-native-maps'
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

AppDelegate.m

#import "AppDelegate.h"
#import <CodePush/CodePush.h>
#import <React/RCTPushNotificationManager.h>

#import <React/RCTBundleURLProvider.h>
#import <React/RCTRootView.h>
#import <BugsnagReactNative/BugsnagReactNative.h>

@import GoogleMaps;

@implementation AppDelegate

- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions
{
  [BugsnagReactNative start];
  [GMSServices provideAPIKey:@"my_api_key"];

  NSURL *jsCodeLocation;


    #ifdef DEBUG
        jsCodeLocation = [[RCTBundleURLProvider sharedSettings] jsBundleURLForBundleRoot:@"index" fallbackResource:nil];
    #else
        jsCodeLocation = [CodePush bundleURL];
    #endif

  RCTRootView *rootView = [[RCTRootView alloc] initWithBundleURL:jsCodeLocation
                                                      moduleName:@"carrier_mobile_app"
                                               initialProperties:nil
                                                   launchOptions:launchOptions];
  rootView.backgroundColor = [[UIColor alloc] initWithRed:1.0f green:1.0f blue:1.0f alpha:1];

  self.window = [[UIWindow alloc] initWithFrame:[UIScreen mainScreen].bounds];
  UIViewController *rootViewController = [UIViewController new];
  rootViewController.view = rootView;
  self.window.rootViewController = rootViewController;
  [self.window makeKeyAndVisible];
  return YES;
}

// Required to register for notifications
  - (void)application:(UIApplication *)application didRegisterUserNotificationSettings:(UIUserNotificationSettings *)notificationSettings
{
  [RCTPushNotificationManager didRegisterUserNotificationSettings:notificationSettings];
}

// Required for the register event.
  - (void)application:(UIApplication *)application didRegisterForRemoteNotificationsWithDeviceToken:(NSData *)deviceToken
{
  [RCTPushNotificationManager didRegisterForRemoteNotificationsWithDeviceToken:deviceToken];
}

// Required for the notification event. You must call the completion handler after handling the remote notification.
  - (void)application:(UIApplication *)application didReceiveRemoteNotification:(NSDictionary *)userInfo
fetchCompletionHandler:(void (^)(UIBackgroundFetchResult))completionHandler
{
  NSLog(@"push-notification received: %@", userInfo);
  [RCTPushNotificationManager didReceiveRemoteNotification:userInfo fetchCompletionHandler:completionHandler];
}

// Required for the registrationError event.
  - (void)application:(UIApplication *)application didFailToRegisterForRemoteNotificationsWithError:(NSError *)error
{
  [RCTPushNotificationManager didFailToRegisterForRemoteNotificationsWithError:error];
}

// Required for the localNotification event.
  - (void)application:(UIApplication *)application didReceiveLocalNotification:(UILocalNotification *)notification
{
  [RCTPushNotificationManager didReceiveLocalNotification:notification];
}

@end

[rborn]

looks legit, let's try this:

• backup the project 😊
• open with Xcode ios/your_app.xcworkspace ->Product -> Clean (menu)
• kill Xcode
• delete ios/Pods folder
• delete ios/Podfile.lock file
• delete ios/build folder
• delete node_modules folder
• be sure your package.json has react-native 0.51 and react 16

• be sure you have a recent cocoapods (1.3.1)

• npm install

• cd ios
• pod install
• cd ../
• react-native run-ios

let me know

[antonsivogrivov]

8:9: fatal error: module 'GoogleMaps' not found
@import GoogleMaps;
 ~~~~~~~^~~~~~~~~~
1 error generated.

[alvelig]

@tonygriv Does cloning https://github.com/alvelig/react-native-maps-pods-example work for you? I mean as a standalone project

[rborn]

@tonygriv I'm out of ideas 😔

[markmssd]

I've started from expo.io (doc), which already have this library ready to be used without any installation. Could be worth mentioning it in the doc, (but also specifying that if we need to include other libraries not included in expo.io, we will need to detach from it, and warn them about other cons)

[rborn]

@markmssd I think expo is out of the scope to be honest. It's an amazing tool but we'll get newcomers confused.

But that's only my 2c, so maybe @alvelig and @christopherdro wanna jump in 🤗

[markmssd]

Yeah maybe, we'll see what they say. If yes I can PR instructions, and specify in bold that problems with expo should be issued to the expo project, and no support can be given for it, since they are unrelated to this one.

[antonsivogrivov]

@alvelig, yes, example builded successfully

[alvelig]

@markmssd that's expo's responsibility. But I would state the following in the docs: "this assumes you started your application with react-native init, if using create-react-native-app or expo you should eject and/or refer to their documentation."

PRs are welcome!

[alvelig]

@tonygriv Maybe would be easier to rebuild your project around the example? 😕 I had to do that several times in my experience though LOL

[antonsivogrivov]

Ok, I have solved my problem. Steps:

1. Add $(inherited) in framework search path
2. After pt 1, I have duplicate symbol error, but I have noticed that this error refers to another lib. After solving this issue for another lib, all errors has gone away

[timo-leanact]

@alvelig I followed your installation instructions but the build failed. So I cloned your example and ran npm install and react-native run-ios. But I got the same error message there :(

The following build commands failed:
CompileC /Users/Timo/Entwicklung/Meldoo_React/Test2/react-native-maps-pods-example/ios/build/Build/Intermediates/Pods.build/Debug-iphonesimulator/react-native-maps.build/Objects-normal/x86_64/RCTConvert+AirMap.o /Users/Timo/Entwicklung/Meldoo_React/Test2/react-native-maps-pods-example/node_modules/react-native-maps/lib/ios/AirMaps/RCTConvert+AirMap.m normal x86_64 objective-c com.apple.compilers.llvm.clang.1_0.compiler
(1 failure)

Installing build/Build/Products/Debug-iphonesimulator/ReactNativeMapsPodsExample.app
An error was encountered processing the command (domain=NSPOSIXErrorDomain, code=2):
Failed to install the requested application
An application bundle was not found at the provided path.
Provide a valid path to the desired application bundle.
Print: Entry, ":CFBundleIdentifier", Does Not Exist

Command failed: /usr/libexec/PlistBuddy -c Print:CFBundleIdentifier build/Build/Products/Debug-iphonesimulator/ReactNativeMapsPodsExample.app/Info.plist
Print: Entry, ":CFBundleIdentifier", Does Not Exist

Is there anything your can do for me?

[alvelig]

@timo-leanact Check this please (added recently to the installation docs, so you may have missed that):

If you use Xcode with version less than 9 you may get use of undeclared identifier 'MKMapTypeMutedStandard' or Entry, ":CFBundleIdentifier", Does Not Exist errors. In this case you have to update your Xcode.

[timo-leanact]

Thanks, yeah I missed that. So I will try this and take another shot.

[timo-leanact]

Worked like magic :)

[chochihim]

So CocoaPods is the only way that guaranteed to work with this library?

I am using other libraries which is installed by react-native link. If I need to use CocoaPods to install react-native-maps, I think I need to update the PodFile to link other libraries for consistency.

[rborn]

For now yes 😟

[anthonyhumphreys]

Hate to +1 but, I have followed all the instructions above in this thread and getting nowhere. When I try to load up my map, i just get 'Native Component for Airmap does not exist'

[sibelius]

I think we should support react-native link (without cocoapods)

I've linked using react-native link and just worked

for GoogleMaps you need to follow this https://developers.google.com/maps/documentation/ios-sdk/start?hl=en

Install manually and you are good to go

[anthonyhumphreys]

Will give that a bash this evening and post back here :) It would be nice, the big warning against react-native link in the documentation shouts package degradation to me....!

[rborn]

@antwan2093 @sibelius I am for any improvement of the docs if you guys want to participate.
We kind of removed the link part to avoid confusion, a lot of users just half read the manual so will run link for google maps than start crying that it's not working.

If we could make it very clear there is a separation would be amazing.

[anthonyhumphreys]

Once I fully understand the installation process and have a working build I will be happy to put a pull request in for that documentation switch up!

I am trying to install react-native-maps - not interested in Google Maps, so can I just npm install it and then run react-native link? My understanding in previous builds (I have a working older project with an older version of the library and older react-native version too for that matter) was that you need to include the AirMaps project in xcode?

If we can establish a clear set of steps here in the ticket, i'll get the docs updated and will happily publish an example repo :)

Thanks

----- Original Message -----
From: Dan Tamas [mailto:[email protected]]
To: react-community/react-native-maps [email protected]
Cc: [email protected]>, Mention
Sent: Tue, 16 Jan 2018 12:53:54 +0000 (UTC)
Subject: Re: [react-community/react-native-maps] Updated and complete installation instructions? (#1862)

@antwan2093 @sibelius I am for any improvement of the docs if you guys want to participate.
We kind of removed the link part to avoid confusion, a lot of users just half read the manual so will run link for google maps than start crying that it's not working.

If we could make it very clear there is a separation would be amazing.
—
You are receiving this because you were mentioned.
Reply to this email directly, view it on GitHub, or mute the thread.

[rborn]

For apple maps link should be enough.

[sibelius]

We could have a Q&A section much like this one https://github.com/evollu/react-native-fcm#q--a

manually linking on ios is hard, but causes less troubles then using cocoadpos

[bramus]

What @sibelius said: “I think we should support react-native link (without cocoapods)” …

Why was this removed in the first place _(because the docs now say you can't)_? It worked fine, was easy to use, and was in line with how other projects work: add the project as a dependency + run react-native link. Easy peasy.

The manual steps one has to do now add too much friction, and create an extra barrier to using this library. Updating the docs won't fix this, only a re-introduction of react-native link will.

[rborn]

@bramus it's easy peasy, make a PR with react-native link that works well without manual linking and it will be merged 😉

[anthonyhumphreys]

Hmmm intriguing...so i just created a brand new project:
react-native init maptest
cd maptest
npm install react-native-maps
react-native link
react-native run-ios

Added basic boilerplate MapView and everything worked fine first time. I'll look into this with my non-working project. Must be some junk knocking about somewhere. Will update on here. Would be good to clarify in the docs though, that if you just want Apple Maps then react-native link will suffice

[lpb006]

It means when i use 'react-native-maps',i can't use 'react-native link' or 'react-native link xxxx' anymore? @rborn

[satori-ytolstoguzov]

@lpb006 Every time you execute:

$ react-native link
# OR
$ react-native link react-native-maps

You will have to do these steps:
https://github.com/react-community/react-native-maps/blob/master/docs/installation.md#on-ios

If you do link for other libraries (via react-native link xxxx), you should be fine.

[lpb006]

@satori-ytolstoguzov In my project, i used OC & swift so i need add 'use_frameworks' in podfile. Once i add this, i will get the error not found. How can i solve this

[satori-ytolstoguzov]

@lpb006 Unfortunately, I dunno, I haven't tried such setup. May be someone else will help you.

[MarkOSullivan94]

Nothing about Android in this discussion?

[alvelig]

@MarkOSullivan94 we would be very grateful for your help in developing a better documentation.

[nikhildaga]

react-native link is such a common command and going through all these steps https://github.com/react-community/react-native-maps/blob/master/docs/installation.md#on-ios after running it, is really bad.

[rborn]

you should NEVER run react-native link without specifying the package you want to link

[MarkOSullivan94]

@alvelig still having issues getting AIRMaps working within a React Native component within our Android project, going to do a separate individual React Native project and see if I'm still having issues getting it working with the Android device.

For now I've made some changes to the react native website which is showing old / incorrect information: https://github.com/facebook/react-native-website/pull/189

I'm currently running Android 8.1.0

@rborn is it possible to run react-native link without specifying the package? If so, why?

[rborn]

@MarkOSullivan94 you can run this to link all your packages, but in this case will break the module if using google maps

[MarkOSullivan94]

@rborn so in this case react-native link should never be used when trying to setup react-native-maps?

[rborn]

yes

[lpb006]

@rborn I will use some library,so i have to add 'use_frameworks!' in my Podfile, but when i add this, i get the error ' not found'. How can i solve this? Thanks

[rborn]

@lpb006 sadly I don't have a solution for this :(

[keithics]

wasted 6hours.. I simply upgrade my mac to 10.12.6 and Xcode to 9.2. Now it's working fine.
Hope this will help someone. I think there is an issue with xcode 8.x

[gvlekke]

still issues with the documentation doesn't work out of the box. :(

get the error
Requiring unknown module "undefined".

I already did a yarn install and pod install.
Also the @import from google maps doesnt work without changing the module config in ios.

[tss101]

I've been holding back from updating react-native-maps to the community version because I saw it had moved to CocoaPods. It would be helpful to have a note in the installation instructions saying you can still use react-native-link react-native-maps if you don't need Google Maps (assuming that's still the case).

[rborn]

@tss101 in theory it should work if you don't use google maps so make a new branch and give it a shot 😊

[tss101]

@rborn Thanks I'll give it a shot, and report back!

[greenwombat]

I've just started using react-native & react-native-apps for the first time and have struggled a bit with getting going by trying to use the Installation page. The default place to start for new users is now with Expo so I'd recommend including some info about it on that page.

In particular, you don't need to eject to use Google Maps in iOS or mess around with any Pods or the ios directory. You just need to use their version of MapView.

The following is all you need to do in order to get a Google Map on iOS:

import { MapView } from "expo";

<MapView  provider="google"  initialRegion={this.state.latlng} / >

[heron2014]

I recently managed to upgrade existing react-native-maps from 0.17 to 0.21 with react-native 0.51 (xCode 9.4) - these are the instructions:

https://gist.github.com/heron2014/e60fa003e9b117ce80d56bb1d5bfe9e0#upgrade-existing-react-native-maps-from-017-to-021-with-react-native-0510

Hope that helps anyone.

[rborn]

Closing. We should be up-to-date now. Please open a new issue if you find anything wrong.