Create a gist now

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Visual instructions how to enable Google Maps on IOS using react-native-maps

Visual instructions how to enable Google Maps on IOS using react-native-maps

UPDATE: Following instructions are now a year old. I have recently managed to upgrade react-native-maps from 0.17 to the latest version 0.21 with react-native 0.51 - if you want to follow my instruction scroll down to the end this doc! Hope that will work for you too!

This is for my personal use, things might not be correctly explained here. For the official docs please check https://github.com/airbnb/react-native-maps

Steps from scratch:

1.react-native init GoogleMapPlayground

2.cd GoogleMapPlayground

3.npm install react-native-maps --save

4.Replace in package.json following:

"react-native-maps": "^0.12.4"

into:

"react-native-maps": ">=0.12.4"

5.Run npm update

6.react-native link

7.Create the Podfile file at ios/Podfile

(but before that you might also need to add cocoapods: gem install cocoapods, if you have permission issue add sudo)

touch ios/Podfile

8.Output of the Podfile file (important: for newest version of RN scroll down to the comments - there are few examples of updated Podfile )

# You Podfile should look similar to this file. React Native currently does not support use_frameworks!
source 'https://github.com/CocoaPods/Specs.git'

platform :ios, '8.0'

target 'GoogleMapPlayground' do
  pod 'React', path: '../node_modules/react-native', :subspecs => [
    'Core',
    'RCTActionSheet',
    'RCTAnimation',
    'RCTGeolocation',
    'RCTImage',
    'RCTLinkingIOS',
    'RCTNetwork',
    'RCTSettings',
    'RCTText',
    'RCTVibration',
    'RCTWebSocket'
  ]

  pod 'GoogleMaps'  # <~~ remove this line if you do not want to support GoogleMaps on iOS

# when not using frameworks  we can do this instead of including the source files in our project (1/4):
#  pod 'react-native-maps', path: '../../'
#  pod 'react-native-google-maps', path: '../../'  # <~~ if you need GoogleMaps support on iOS
end

Replace the GoogleMapPlayground with your project name (this file is a copy version from official docs https://github.com/airbnb/react-native-maps/blob/master/example/ios/Podfile)

9.Navigate to cd ios and run pod install

10.cd ..

11.open ios/GoogleMapPlayground.xcworkspace

12.Project structure in xCode (picture 1)

13.Open your project (e.g from terminal: open .)

14.Drag this folder node_modules/react-native-maps/ios/AirGoogleMaps/ into your project, and choose Create groups in the popup window. (picture 2)

15.Your project structure should look like in (picture 3)

16.Enable your Google API Key - follow this link (READ SECTION AT THE BOTTOM - IMPORTANT): https://developers.google.com/maps/documentation/android-api/signup#release-cert

  • press Get Key
  • Create a new project or use an existing one (I used existing one for simplicity)

16.In ios/GoogleMapPlayground/AppDelegate.m add two lines of code:

  • before the @implementation AppDelegate

    • add @import GoogleMaps;
  • inside the (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions.....

    • add [GMSServices provideAPIKey:@"YOUR_GOOGLE_MAP_API_KEY"];

This is the example of AppDelegate.m

/**
 * Copyright (c) 2015-present, Facebook, Inc.
 * All rights reserved.
 *
 * This source code is licensed under the BSD-style license found in the
 * LICENSE file in the root directory of this source tree. An additional grant
 * of patent rights can be found in the PATENTS file in the same directory.
 */

#import "AppDelegate.h"

#import <React/RCTBundleURLProvider.h>
#import <React/RCTRootView.h>
@import GoogleMaps;

@implementation AppDelegate

- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions
{
  NSURL *jsCodeLocation;
  [GMSServices provideAPIKey:@"YOUR_GOOGLE_MAP_API_KEY"];
  jsCodeLocation = [[RCTBundleURLProvider sharedSettings] jsBundleURLForBundleRoot:@"index.ios" fallbackResource:nil];

  RCTRootView *rootView = [[RCTRootView alloc] initWithBundleURL:jsCodeLocation
                                                      moduleName:@"GoogleMapPlayground"
                                               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;
}

@end

17.Go back to xCode, click on the project name, then click on Build Settings (picture 4)

18.Scroll down to section Search Paths

  • double click on Header Search Path - url on the right (picture 5)

  • press the small plus icon in the left corner

  • add $(SRCROOT)/../node_modules/react-native-maps/ios/AirMaps and change from non-recursive to recursive (picture 6)

19.You are all set now!

20.Go back to your code and add some initial map, for example (index.ios.js):

/**
 * Sample React Native App
 * https://github.com/facebook/react-native
 * @flow
 */

import React, { Component } from 'react';
import {
  AppRegistry,
  StyleSheet,
  Dimensions,
  Text,
  View
} from 'react-native';

import MapView, { PROVIDER_GOOGLE } from 'react-native-maps';

const { width, height } = Dimensions.get('window');

const ASPECT_RATIO = width / height;
const LATITUDE = 37.78825;
const LONGITUDE = -122.4324;
const LATITUDE_DELTA = 0.0922;
const LONGITUDE_DELTA = LATITUDE_DELTA * ASPECT_RATIO;


class GoogleMapPlayground extends React.Component {
  constructor(props) {
    super(props);

    this.state = {
    };
  }

  render() {
    return (
      <View style={{ flex: 1 }}>
        <View style={{ backgroundColor: 'green', height: 100, justifyContent: 'center', alignItems: 'center'}}>
          <Text>Some div</Text>
        </View>
        <View style={styles.container}>
          <MapView
            provider={PROVIDER_GOOGLE}
            style={styles.map}
            initialRegion={{
              latitude: LATITUDE,
              longitude: LONGITUDE,
              latitudeDelta: LATITUDE_DELTA,
              longitudeDelta: LONGITUDE_DELTA,
            }}
          />
        </View>
      </View>
    );
  }
}

GoogleMapPlayground.propTypes = {
  provider: MapView.ProviderPropType,
};

const styles = StyleSheet.create({
  container: {
    ...StyleSheet.absoluteFillObject,
    top: 100,
    justifyContent: 'flex-end',
    alignItems: 'center'
  },
  map: {
     ...StyleSheet.absoluteFillObject,
  },
});

AppRegistry.registerComponent('GoogleMapPlayground', () => GoogleMapPlayground);

21.Run react-native run-ios

IMPORTANT!

Enabling API_KEY by following the link provided on point 16 - didn't work for me.

After successful build I had empty map (picture 8)

Follow these steps to enable the API_KEY:

  • open this link: https://console.developers.google.com/flows/enableapi?apiid=maps_android_backend
  • create or use your existing project (I used existing project)
  • Go to credentials
  • Add credentials to your project - pick Google Maps Android API (picture 9)
  • Click on What credentials do I need
  • I created new API key by following the link create new api... (picture 10)
  • On the next screen (I chose - IOS apps) (picture 11) - Create (COPY YOUR NEW API KEY)
  • Navigate to Library - on your left
  • Click on Google Maps SDK for IOS (picture 12)
  • Enable it (picture 13)

22.Replace new key with the old one if you were unsuccessful previously.

23.Run react-native run-ios again and hopefully you will see the map (picture 14)

UPGRADE existing react-native-maps from 0.17 to 0.21 with react-native 0.51.0 (xCode 9.4.1)

  1. Update Podfile according to the official docs (https://github.com/react-community/react-native-maps/blob/master/docs/installation.md#on-ios)
source 'https://github.com/CocoaPods/Specs.git'

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

target 'NAME_OF_YOUR_PROJECT' 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',
    '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"
  # 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
  1. Update ios/YOUR_PROJECT_NAME/AppDelegate.m literally exactly what the docs says
  2. Update dependencies android/app/build.grade :
    compile project(':react-native-navigation')
    ... some other libraries...
    compile fileTree(dir: "libs", include: ["*.jar"])
    compile "com.android.support:appcompat-v7:23.0.1"
    compile "com.facebook.react:react-native:+"  // From node_modules

    implementation(project(':react-native-maps')){
        exclude group: 'com.google.android.gms', module: 'play-services-base'
        exclude group: 'com.google.android.gms', module: 'play-services-maps'
    }
    implementation 'com.google.android.gms:play-services-base:10.0.1'
    implementation 'com.google.android.gms:play-services-maps:10.0.1'
}
  1. Update android/settings.gradle

The only difference from previous version was to add lib

include ':react-native-maps'
project(':react-native-maps').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-maps/lib/android')
  1. Check if you still have your API_KEY in android/app/src/main/AndroidManifest.xml

  2. Check if have new MapsPackage() in MainApplication.java

  3. Previously I used react-native link react-native-maps to build my 0.17 version so I had to remove AIRMaps.xcodeproj from Libraries and remove link from Build Phase libAIRMaps.a

  • open ios/NAMEOFPROJECT.xcodeproj and at the top in left sidebar under Libraries delete AIRMaps.xcodeproj - should be listed there, I also deleted the red highlighted AIRMaps.xcodeproj which was listed at the very end.

  • in Build Phases -> Link Binary With Libraries delete libAIRMaps.a if it exists

  1. npm uninstall react-native-maps --save
  2. npm install react-native-maps --save
  3. Remove again everything: rm-rf node_modules, rm-rf ios/build, rm ios/Podfile.lock, rm -rf ios/Pods, rm yarn.lock
  4. yarn install I have yarn version 1.7
  5. cd ios pod install sometimes I also run pod cache clean --all and then pod repo update && pod install but it might not be necessary
  6. cd .. watchman watch-del-all
  7. This step is probably redundant but I might just say it anyway. So I had previously an error Print: Entry, ":CFBundleIdentifier", Does Not Exist

I opened open ios/myproj.xcodeproj - File - Project Settings - Advanced - I clicked on Custom and removed build from the path - resulting: Products: Build/Products, the same at Intermediates - Build/Intermediates.noindex

The same I did for open ios/myproj.xcworkspace

Clean the project - Product at the top - Clean

  1. react-native run-ios I finally got Build Succeeded but I still had termination error Print: Entry, ":CFBundleIdentifier", Does Not Exist

  2. So my final changed was: go again to myproj.xcodeproj - File - Project Settings - Advanced and instead of Custom, I picked Unique The same for myproj.xcworkspace - File - Workspace Settings - Advanced - picked Unique

Clean the project - Product at the top - Clean for both - xcworkspace and xcodeproj

Also I double checked my Info.plist which is:

	<string>org.reactjs.native.example.$(PRODUCT_NAME:rfc1034identifier)</string>
  1. Run react-native run-ios Success!
@akilbekov

This comment has been minimized.

Show comment
Hide comment
@akilbekov

akilbekov Jan 23, 2017

Enabling Google Maps SDK for IOS solved the problem for me, thank you!

Enabling Google Maps SDK for IOS solved the problem for me, thank you!

@heron2014

This comment has been minimized.

Show comment
Hide comment
Owner

heron2014 commented Jan 24, 2017

@akilbekov That's great!

@gerardus1995

This comment has been minimized.

Show comment
Hide comment
@gerardus1995

gerardus1995 Jan 26, 2017

Very good explanations of everything, but i got a problem. When i import google maps to appdelegate.m it says googlemaps file not found. And when i execute after finishing the whole proccess i get google maps not found and googlemapsbase not found. Any idea whats that about?

Very good explanations of everything, but i got a problem. When i import google maps to appdelegate.m it says googlemaps file not found. And when i execute after finishing the whole proccess i get google maps not found and googlemapsbase not found. Any idea whats that about?

@heron2014

This comment has been minimized.

Show comment
Hide comment
@heron2014

heron2014 Jan 27, 2017

@gerardus1995 its hard to say, but if you still have this issue, please paste in here the exact steps you've done and error log as well. Will be easier to debug it.

Owner

heron2014 commented Jan 27, 2017

@gerardus1995 its hard to say, but if you still have this issue, please paste in here the exact steps you've done and error log as well. Will be easier to debug it.

@rajeshkos

This comment has been minimized.

Show comment
Hide comment
@rajeshkos

rajeshkos Feb 2, 2017

Thank you very much. I was looking for this map issue on iphone from last 2 days, finally i have followed your steps and solved the issue. :)

Thank you very much. I was looking for this map issue on iphone from last 2 days, finally i have followed your steps and solved the issue. :)

@ha1vy

This comment has been minimized.

Show comment
Hide comment
@ha1vy

ha1vy Feb 2, 2017

@heron2014 I love you, after one week of tries. Your tutorial save my life!
Love you! <3 s2

ps: Sorry bad english.

ha1vy commented Feb 2, 2017

@heron2014 I love you, after one week of tries. Your tutorial save my life!
Love you! <3 s2

ps: Sorry bad english.

@kunall17

This comment has been minimized.

Show comment
Hide comment
@kunall17

kunall17 Feb 3, 2017

@heron2014

Getting this error

The following commands produced analyzer issues:
	Analyze Modules/RCTRedBox.m
(1 command with analyzer issues)

The following build commands failed:
	CompileC build/Build/Intermediates/client.build/Debug-iphonesimulator/client.build/Objects-normal/x86_64/AppDelegate.o client/AppDelegate.m normal x86_64 objective-c com.apple.compilers.llvm.clang.1_0.compiler

(1 failure)

Installing build/Build/Products/Debug-iphonesimulator/client.app
An error was encountered processing the command (domain=NSPOSIXErrorDomain, code=22):
Failed to install the requested application
The bundle identifier of the application could not be determined.
Ensure that the application's Info.plist contains a value for CFBundleIdentifier.
Print: Entry, ":CFBundleIdentifier", Does Not Exist

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

Can you please help?

kunall17 commented Feb 3, 2017

@heron2014

Getting this error

The following commands produced analyzer issues:
	Analyze Modules/RCTRedBox.m
(1 command with analyzer issues)

The following build commands failed:
	CompileC build/Build/Intermediates/client.build/Debug-iphonesimulator/client.build/Objects-normal/x86_64/AppDelegate.o client/AppDelegate.m normal x86_64 objective-c com.apple.compilers.llvm.clang.1_0.compiler

(1 failure)

Installing build/Build/Products/Debug-iphonesimulator/client.app
An error was encountered processing the command (domain=NSPOSIXErrorDomain, code=22):
Failed to install the requested application
The bundle identifier of the application could not be determined.
Ensure that the application's Info.plist contains a value for CFBundleIdentifier.
Print: Entry, ":CFBundleIdentifier", Does Not Exist

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

Can you please help?

@kunall17

This comment has been minimized.

Show comment
Hide comment
@kunall17

kunall17 Feb 3, 2017

Ok It seems its an react native issue, anyways I used xcode to start the ios and it worked! :)
Thank you so much!

And if you have fix for this one do post it! @heron2014

kunall17 commented Feb 3, 2017

Ok It seems its an react native issue, anyways I used xcode to start the ios and it worked! :)
Thank you so much!

And if you have fix for this one do post it! @heron2014

@tedjames

This comment has been minimized.

Show comment
Hide comment
@tedjames

tedjames Feb 6, 2017

I'm still having an issue even after all of these steps:
bug_meh
screenshot at feb 05 20-04-23
screenshot at feb 05 20-04-47
screenshot at feb 05 20-05-16

Anyone have any suggestions? I can't seem to get past this build error...

tedjames commented Feb 6, 2017

I'm still having an issue even after all of these steps:
bug_meh
screenshot at feb 05 20-04-23
screenshot at feb 05 20-04-47
screenshot at feb 05 20-05-16

Anyone have any suggestions? I can't seem to get past this build error...

@awojtczyk

This comment has been minimized.

Show comment
Hide comment
@awojtczyk

awojtczyk Feb 7, 2017

Hi there, this is working untill the archive process.
image

Any tips?

UPDATE:
Figured it out (just don't know if it's the right way, but "whatever works"...).

I've deleted pretty much everything from podfile expect google maps.
So now, I've ended up with something like this:
image

awojtczyk commented Feb 7, 2017

Hi there, this is working untill the archive process.
image

Any tips?

UPDATE:
Figured it out (just don't know if it's the right way, but "whatever works"...).

I've deleted pretty much everything from podfile expect google maps.
So now, I've ended up with something like this:
image

@Jorger

This comment has been minimized.

Show comment
Hide comment
@Jorger

Jorger Feb 7, 2017

I followed the steps and it worked perfect, Thanks!!

Jorger commented Feb 7, 2017

I followed the steps and it worked perfect, Thanks!!

@rajeshkos

This comment has been minimized.

Show comment
Hide comment
@rajeshkos

rajeshkos Feb 8, 2017

I am facing same error while archiving. @awojtczyk

Have you solved this ?

I am facing same error while archiving. @awojtczyk

Have you solved this ?

@awojtczyk

This comment has been minimized.

Show comment
Hide comment
@awojtczyk

awojtczyk Feb 8, 2017

@rajeshkos please, see edited version of my comment and let me know if it worked for you.

@rajeshkos please, see edited version of my comment and let me know if it worked for you.

@fiftysoft

This comment has been minimized.

Show comment
Hide comment
@fiftysoft

fiftysoft Feb 17, 2017

thank you it's worked !

thank you it's worked !

@pangpond

This comment has been minimized.

Show comment
Hide comment
@pangpond

pangpond Feb 26, 2017

you make it works! thank you.

you make it works! thank you.

@surendharreddy

This comment has been minimized.

Show comment
Hide comment
@surendharreddy

surendharreddy Feb 28, 2017

@awojtczyk, @rajeshkos try to clean and rebuild the project cmd + shift + k in XCode and then react-native run-ios again. This should solve your problem.

@awojtczyk, @rajeshkos try to clean and rebuild the project cmd + shift + k in XCode and then react-native run-ios again. This should solve your problem.

@heron2014

This comment has been minimized.

Show comment
Hide comment
@heron2014

heron2014 Mar 4, 2017

For RN = 0.42

If you have an issue with unable to execute pod install because of Yoga in RN 0.42.0 is not a latest version 1.2.0 or missing pod specs, use the following snippet for Podfile file:

# You Podfile should look similar to this file. React Native currently does not support use_frameworks!
source 'https://github.com/CocoaPods/Specs.git'

platform :ios, '8.0'

target 'app' do
  # Fixes required for pod specs to work with rn 0.42
  react_native_path = "../node_modules/react-native"
  pod "Yoga", :path => "#{react_native_path}/ReactCommon/yoga"
  pod "React", :path => react_native_path, :subspecs => [
    'Core',
    'RCTActionSheet',
    'RCTAnimation',
    'RCTGeolocation',
    'RCTImage',
    'RCTLinkingIOS',
    'RCTNetwork',
    'RCTSettings',
    'RCTText',
    'RCTVibration',
    'RCTWebSocket'
  ]

  pod 'GoogleMaps'  # <~~ remove this line if you do not want to support GoogleMaps on iOS

# when not using frameworks  we can do this instead of including the source files in our project (1/4):
#  pod 'react-native-maps', path: '../../'
#  pod 'react-native-google-maps', path: '../../'  # <~~ if you need GoogleMaps support on iOS
end
Owner

heron2014 commented Mar 4, 2017

For RN = 0.42

If you have an issue with unable to execute pod install because of Yoga in RN 0.42.0 is not a latest version 1.2.0 or missing pod specs, use the following snippet for Podfile file:

# You Podfile should look similar to this file. React Native currently does not support use_frameworks!
source 'https://github.com/CocoaPods/Specs.git'

platform :ios, '8.0'

target 'app' do
  # Fixes required for pod specs to work with rn 0.42
  react_native_path = "../node_modules/react-native"
  pod "Yoga", :path => "#{react_native_path}/ReactCommon/yoga"
  pod "React", :path => react_native_path, :subspecs => [
    'Core',
    'RCTActionSheet',
    'RCTAnimation',
    'RCTGeolocation',
    'RCTImage',
    'RCTLinkingIOS',
    'RCTNetwork',
    'RCTSettings',
    'RCTText',
    'RCTVibration',
    'RCTWebSocket'
  ]

  pod 'GoogleMaps'  # <~~ remove this line if you do not want to support GoogleMaps on iOS

# when not using frameworks  we can do this instead of including the source files in our project (1/4):
#  pod 'react-native-maps', path: '../../'
#  pod 'react-native-google-maps', path: '../../'  # <~~ if you need GoogleMaps support on iOS
end
@davidhenley

This comment has been minimized.

Show comment
Hide comment
@davidhenley

davidhenley Mar 6, 2017

Thanks for your last comment. I have been searching for hours about this Yoga issue.

Thanks for your last comment. I have been searching for hours about this Yoga issue.

@rudyj03

This comment has been minimized.

Show comment
Hide comment
@rudyj03

rudyj03 Mar 7, 2017

@heron2014, I just stumbled across the 0.42 react_native_path through another thread. Scrolling down further here would have saved me a lot of time 😄 thanks for the excellent guide!

rudyj03 commented Mar 7, 2017

@heron2014, I just stumbled across the 0.42 react_native_path through another thread. Scrolling down further here would have saved me a lot of time 😄 thanks for the excellent guide!

@mbelgrader

This comment has been minimized.

Show comment
Hide comment
@mbelgrader

mbelgrader Mar 11, 2017

Thank you!!! Your steps worked perfect for me.

Thank you!!! Your steps worked perfect for me.

@grundmanise

This comment has been minimized.

Show comment
Hide comment
@grundmanise

grundmanise Mar 12, 2017

Thanks for such a great tutorial!

Only this pod worked for me:

source 'https://github.com/CocoaPods/Specs.git'

platform :ios, '8.0'

target ‘ProjectName’ do
  # Fixes required for pod specs to work with rn 0.42
  react_native_path = "../node_modules/react-native"
  pod "Yoga", :path => "#{react_native_path}/ReactCommon/yoga"
  pod "React", :path => react_native_path

  pod 'GoogleMaps'  # <~~ remove this line if you do not want to support GoogleMaps on iOS

end

also including $(SRCROOT)/../node_modules/react-native-maps/ios/AirMaps was unnecessary because $(SRCROOT)/../node_modules/react-native-maps/ios was already included by linking and it was set to recursive.

    "react": "15.4.2",
    "react-native": "0.42.0",
    "react-native-maps": "^0.13.0",

grundmanise commented Mar 12, 2017

Thanks for such a great tutorial!

Only this pod worked for me:

source 'https://github.com/CocoaPods/Specs.git'

platform :ios, '8.0'

target ‘ProjectName’ do
  # Fixes required for pod specs to work with rn 0.42
  react_native_path = "../node_modules/react-native"
  pod "Yoga", :path => "#{react_native_path}/ReactCommon/yoga"
  pod "React", :path => react_native_path

  pod 'GoogleMaps'  # <~~ remove this line if you do not want to support GoogleMaps on iOS

end

also including $(SRCROOT)/../node_modules/react-native-maps/ios/AirMaps was unnecessary because $(SRCROOT)/../node_modules/react-native-maps/ios was already included by linking and it was set to recursive.

    "react": "15.4.2",
    "react-native": "0.42.0",
    "react-native-maps": "^0.13.0",
@mgscreativa

This comment has been minimized.

Show comment
Hide comment
@mgscreativa

mgscreativa Mar 14, 2017

As @grundmanise said, if you use RN 0.42.0 then this guide works only with this Podfile react-community/react-native-maps#1078 (comment)

As @grundmanise said, if you use RN 0.42.0 then this guide works only with this Podfile react-community/react-native-maps#1078 (comment)

@heron2014

This comment has been minimized.

Show comment
Hide comment
@heron2014

heron2014 Mar 21, 2017

@mgscreativa, @grundmanise thanks for the tip for Podfile. I made the note about it in the tutorial.

Owner

heron2014 commented Mar 21, 2017

@mgscreativa, @grundmanise thanks for the tip for Podfile. I made the note about it in the tutorial.

@monzerhijazi

This comment has been minimized.

Show comment
Hide comment
@monzerhijazi

monzerhijazi Mar 23, 2017

For folks who are getting the GoogleMapsBase not found error, make sure you have the $(inherited) flag in the Framework Search Paths as that ensures the pod search paths are included in overall build (at least that's my understanding :)

monzerhijazi commented Mar 23, 2017

For folks who are getting the GoogleMapsBase not found error, make sure you have the $(inherited) flag in the Framework Search Paths as that ensures the pod search paths are included in overall build (at least that's my understanding :)

@dikarel

This comment has been minimized.

Show comment
Hide comment
@dikarel

dikarel Apr 12, 2017

For latest RN (0.43), don't forget to add 'DevSupport' to React's subspecs in the Podfile.
Otherwise, devtools may not work properly.

For reference, a complete list of React subspecs can be found here

dikarel commented Apr 12, 2017

For latest RN (0.43), don't forget to add 'DevSupport' to React's subspecs in the Podfile.
Otherwise, devtools may not work properly.

For reference, a complete list of React subspecs can be found here

@Mjuk-Biltvatt

This comment has been minimized.

Show comment
Hide comment
@Mjuk-Biltvatt

Mjuk-Biltvatt Apr 19, 2017

Thanks a ton! I've been struggling with this!

Thanks a ton! I've been struggling with this!

@khaledalyawad

This comment has been minimized.

Show comment
Hide comment
@khaledalyawad

khaledalyawad Apr 26, 2017

I'm having this error

[!] Unable to satisfy the following requirements:

- `Yoga (= 0.43.4.React)` required by `React/Core (0.43.4)`

This is happening after I did pod install

pod version pod 1.2.1
ruby version ruby 2.4.
react-native-cli version 2.0.1
node version 7.9.0
react-native version 0.43.4

I followed the instructions above, but the error above shows up

khaledalyawad commented Apr 26, 2017

I'm having this error

[!] Unable to satisfy the following requirements:

- `Yoga (= 0.43.4.React)` required by `React/Core (0.43.4)`

This is happening after I did pod install

pod version pod 1.2.1
ruby version ruby 2.4.
react-native-cli version 2.0.1
node version 7.9.0
react-native version 0.43.4

I followed the instructions above, but the error above shows up

@davorbadrov

This comment has been minimized.

Show comment
Hide comment
@davorbadrov

davorbadrov May 9, 2017

Thanks a lot, solved the problem without much trouble.

Thanks a lot, solved the problem without much trouble.

@hussamkurd

This comment has been minimized.

Show comment
Hide comment
@hussamkurd

hussamkurd May 10, 2017

@khaledalyawad add this line
pod 'Yoga', :path => '../node_modules/react-native/ReactCommon/yoga'

@khaledalyawad add this line
pod 'Yoga', :path => '../node_modules/react-native/ReactCommon/yoga'

@KrauseFx

This comment has been minimized.

Show comment
Hide comment
@KrauseFx

KrauseFx May 16, 2017

That's awesome, that worked for me, thanks 👍

That's awesome, that worked for me, thanks 👍

@anhtuank7c

This comment has been minimized.

Show comment
Hide comment
@anhtuank7c

anhtuank7c May 30, 2017

I have AirGoogleMap issue.
I did follow guide, but in vain.
Project tell me to add AirGoogleMap dir even that dir existing in project.
I have no idea to fix it :(

I have AirGoogleMap issue.
I did follow guide, but in vain.
Project tell me to add AirGoogleMap dir even that dir existing in project.
I have no idea to fix it :(

@anhtuank7c

This comment has been minimized.

Show comment
Hide comment

I integrated successful.
Guide here: https://github.com/anhtuank7c/maps-example

@luco

This comment has been minimized.

Show comment
Hide comment
@luco

luco May 31, 2017

@auaden I'm getting the same thing. Tried everything.
@anhtuank7c Tried your method. Doesn't work.
It's a pain to add Google Maps to iOS.

luco commented May 31, 2017

@auaden I'm getting the same thing. Tried everything.
@anhtuank7c Tried your method. Doesn't work.
It's a pain to add Google Maps to iOS.

@anhtuank7c

This comment has been minimized.

Show comment
Hide comment
@anhtuank7c

anhtuank7c Jun 1, 2017

@luco No, it is not.
I also have video guide to tell you exactly what i have done.
https://www.youtube.com/watch?v=XTwpYtNTV48

@luco No, it is not.
I also have video guide to tell you exactly what i have done.
https://www.youtube.com/watch?v=XTwpYtNTV48

@luco

This comment has been minimized.

Show comment
Hide comment
@luco

luco Jun 1, 2017

@anhtuank7c
Nice! In fact it worked man, thanks a lot. Now I gotta figure out how to implement in my current project.

luco commented Jun 1, 2017

@anhtuank7c
Nice! In fact it worked man, thanks a lot. Now I gotta figure out how to implement in my current project.

@grundmanise

This comment has been minimized.

Show comment
Hide comment
@grundmanise

grundmanise Jun 2, 2017

@monzerhijazi oh my... lost 4 hours struggling with google map implementation before found your suggestion which actually fixed all my issues. Thank you!

@monzerhijazi oh my... lost 4 hours struggling with google map implementation before found your suggestion which actually fixed all my issues. Thank you!

@jsierles

This comment has been minimized.

Show comment
Hide comment
@jsierles

jsierles Jun 15, 2017

This is what worked for me on 0.45.1

  react_native_path = "../node_modules/react-native"
  pod "Yoga", :path => "#{react_native_path}/ReactCommon/yoga"
  pod 'React', path: react_native_path, :subspecs => [
     'Core',
     'RCTActionSheet',
     'RCTAnimation',
     'RCTGeolocation',
     'RCTImage',
     'RCTLinkingIOS',
     'RCTNetwork',
     'RCTSettings',
     'RCTText',
     'RCTVibration',
     'RCTWebSocket',
     'DevSupport',
     'BatchedBridge'
  ]

This is what worked for me on 0.45.1

  react_native_path = "../node_modules/react-native"
  pod "Yoga", :path => "#{react_native_path}/ReactCommon/yoga"
  pod 'React', path: react_native_path, :subspecs => [
     'Core',
     'RCTActionSheet',
     'RCTAnimation',
     'RCTGeolocation',
     'RCTImage',
     'RCTLinkingIOS',
     'RCTNetwork',
     'RCTSettings',
     'RCTText',
     'RCTVibration',
     'RCTWebSocket',
     'DevSupport',
     'BatchedBridge'
  ]
@brh55

This comment has been minimized.

Show comment
Hide comment
@brh55

brh55 Jun 18, 2017

@jsierles thanks! I can confirmed this worked for me on iOS.

A few things to note:

Here is my RN 0.45.1, AppDelegate.m file

/**
 * Copyright (c) 2015-present, Facebook, Inc.
 * All rights reserved.
 *
 * This source code is licensed under the BSD-style license found in the
 * LICENSE file in the root directory of this source tree. An additional grant
 * of patent rights can be found in the PATENTS file in the same directory.
 */

#import "AppDelegate.h"

#import <React/RCTBundleURLProvider.h>
#import <React/RCTRootView.h>
@import GoogleMaps;

@implementation AppDelegate

- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions
{
  NSURL *jsCodeLocation;
  [GMSServices provideAPIKey:@"<APIKEY>"];


  jsCodeLocation = [[RCTBundleURLProvider sharedSettings] jsBundleURLForBundleRoot:@"index.ios" fallbackResource:nil];

  RCTRootView *rootView = [[RCTRootView alloc] initWithBundleURL:jsCodeLocation
                                                      moduleName:@"LadleApp"
                                               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;
}

@end

Hopefully this helps a few people, I was struggling on this for a few days.

brh55 commented Jun 18, 2017

@jsierles thanks! I can confirmed this worked for me on iOS.

A few things to note:

Here is my RN 0.45.1, AppDelegate.m file

/**
 * Copyright (c) 2015-present, Facebook, Inc.
 * All rights reserved.
 *
 * This source code is licensed under the BSD-style license found in the
 * LICENSE file in the root directory of this source tree. An additional grant
 * of patent rights can be found in the PATENTS file in the same directory.
 */

#import "AppDelegate.h"

#import <React/RCTBundleURLProvider.h>
#import <React/RCTRootView.h>
@import GoogleMaps;

@implementation AppDelegate

- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions
{
  NSURL *jsCodeLocation;
  [GMSServices provideAPIKey:@"<APIKEY>"];


  jsCodeLocation = [[RCTBundleURLProvider sharedSettings] jsBundleURLForBundleRoot:@"index.ios" fallbackResource:nil];

  RCTRootView *rootView = [[RCTRootView alloc] initWithBundleURL:jsCodeLocation
                                                      moduleName:@"LadleApp"
                                               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;
}

@end

Hopefully this helps a few people, I was struggling on this for a few days.

@peterpme

This comment has been minimized.

Show comment
Hide comment
@peterpme

peterpme Jun 22, 2017

Confirmed working on 0.45.1 and react-native-maps 0.15.2 with Google Maps.

Thanks to everyone involved, you are all heroes! ❤️

Tips:

  • Remember to run pod update instead of pod install unless you delete your Pods folder
  • If you're going to copy the AppDelegate.m or Podfile file, remember to replace Tally with your own app name!

Podfile:

# Podfile content
source 'https://github.com/CocoaPods/Specs.git'

platform :ios, '9.1'

target 'Tally' do
  react_native_path = "../node_modules/react-native"
  pod "Yoga", :path => "#{react_native_path}/ReactCommon/yoga"
  pod 'React', path: react_native_path, :subspecs => [
     'Core',
     'RCTActionSheet',
     'RCTAnimation',
     'RCTGeolocation',
     'RCTImage',
     'RCTLinkingIOS',
     'RCTNetwork',
     'RCTSettings',
     'RCTText',
     'RCTVibration',
     'RCTWebSocket',
     'DevSupport',
     'BatchedBridge'
  ]

  pod 'GoogleMaps'

end

AppDelegate.m

/**
 * Copyright (c) 2015-present, Facebook, Inc.
 * All rights reserved.
 *
 * This source code is licensed under the BSD-style license found in the
 * LICENSE file in the root directory of this source tree. An additional grant
 * of patent rights can be found in the PATENTS file in the same directory.
 */

#import "AppDelegate.h"

#import <React/RCTBundleURLProvider.h>
#import <React/RCTRootView.h>
@import GoogleMaps;

@implementation AppDelegate

- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions
{
  NSURL *jsCodeLocation;
  [GMSServices provideAPIKey:@"AIzaSyDyCc_-1H3AnPUE3PHXC5ETon6xM-CtGhQ"];
  
  
  jsCodeLocation = [[RCTBundleURLProvider sharedSettings] jsBundleURLForBundleRoot:@"index.ios" fallbackResource:nil];
  
  RCTRootView *rootView = [[RCTRootView alloc] initWithBundleURL:jsCodeLocation
                                                      moduleName:@"Tally"
                                               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;
}

@end

peterpme commented Jun 22, 2017

Confirmed working on 0.45.1 and react-native-maps 0.15.2 with Google Maps.

Thanks to everyone involved, you are all heroes! ❤️

Tips:

  • Remember to run pod update instead of pod install unless you delete your Pods folder
  • If you're going to copy the AppDelegate.m or Podfile file, remember to replace Tally with your own app name!

Podfile:

# Podfile content
source 'https://github.com/CocoaPods/Specs.git'

platform :ios, '9.1'

target 'Tally' do
  react_native_path = "../node_modules/react-native"
  pod "Yoga", :path => "#{react_native_path}/ReactCommon/yoga"
  pod 'React', path: react_native_path, :subspecs => [
     'Core',
     'RCTActionSheet',
     'RCTAnimation',
     'RCTGeolocation',
     'RCTImage',
     'RCTLinkingIOS',
     'RCTNetwork',
     'RCTSettings',
     'RCTText',
     'RCTVibration',
     'RCTWebSocket',
     'DevSupport',
     'BatchedBridge'
  ]

  pod 'GoogleMaps'

end

AppDelegate.m

/**
 * Copyright (c) 2015-present, Facebook, Inc.
 * All rights reserved.
 *
 * This source code is licensed under the BSD-style license found in the
 * LICENSE file in the root directory of this source tree. An additional grant
 * of patent rights can be found in the PATENTS file in the same directory.
 */

#import "AppDelegate.h"

#import <React/RCTBundleURLProvider.h>
#import <React/RCTRootView.h>
@import GoogleMaps;

@implementation AppDelegate

- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions
{
  NSURL *jsCodeLocation;
  [GMSServices provideAPIKey:@"AIzaSyDyCc_-1H3AnPUE3PHXC5ETon6xM-CtGhQ"];
  
  
  jsCodeLocation = [[RCTBundleURLProvider sharedSettings] jsBundleURLForBundleRoot:@"index.ios" fallbackResource:nil];
  
  RCTRootView *rootView = [[RCTRootView alloc] initWithBundleURL:jsCodeLocation
                                                      moduleName:@"Tally"
                                               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;
}

@end
@MathieuMailhos

This comment has been minimized.

Show comment
Hide comment
@MathieuMailhos

MathieuMailhos Jun 25, 2017

Anyone else having Apple Mach-O Linker Error Group: : Linker command failed with exit code 1 (use -v to see invocation) ?
EDIT: Solved the link issue from there: react-community/react-native-maps#718
@peterpme: you probably modified it but if not, you should not show your API key publicly ;)

MathieuMailhos commented Jun 25, 2017

Anyone else having Apple Mach-O Linker Error Group: : Linker command failed with exit code 1 (use -v to see invocation) ?
EDIT: Solved the link issue from there: react-community/react-native-maps#718
@peterpme: you probably modified it but if not, you should not show your API key publicly ;)

@benjamin3991

This comment has been minimized.

Show comment
Hide comment
@benjamin3991

benjamin3991 Jul 14, 2017

Need Help:

For a new project I am able to get Google Maps for iOS, but when configuring for the existing project, It's still showing "console.error: "react-native-maps" AirGoogleMaps dir must be added to your xCode project"
Tried each and everything mentioned above.

screen shot 2017-07-14 at 9 56 47 pm

Need Help:

For a new project I am able to get Google Maps for iOS, but when configuring for the existing project, It's still showing "console.error: "react-native-maps" AirGoogleMaps dir must be added to your xCode project"
Tried each and everything mentioned above.

screen shot 2017-07-14 at 9 56 47 pm

@quangtruongdinh

This comment has been minimized.

Show comment
Hide comment
@quangtruongdinh

quangtruongdinh Jul 22, 2017

Did you drag AirGoogleMaps from "node_modules/react-native-maps/lib/ios/AirGoogleMaps/" to your xcode project?

Did you drag AirGoogleMaps from "node_modules/react-native-maps/lib/ios/AirGoogleMaps/" to your xcode project?

@eriirawan

This comment has been minimized.

Show comment
Hide comment
@eriirawan

eriirawan Jul 31, 2017

Hello everyone, I've followed the steps. But I can get an error like this. Is there any help me?

The version I use:
"React": "16.0.0-alpha.6",
"React-native": "0.44.0",
"React-native-maps": "^ 0.15.3"
screen shot 2017-07-31 at 8 12 28 am
screen shot 2017-07-31 at 8 12 57 am

Hello everyone, I've followed the steps. But I can get an error like this. Is there any help me?

The version I use:
"React": "16.0.0-alpha.6",
"React-native": "0.44.0",
"React-native-maps": "^ 0.15.3"
screen shot 2017-07-31 at 8 12 28 am
screen shot 2017-07-31 at 8 12 57 am

@quyhic

This comment has been minimized.

Show comment
Hide comment
@quyhic

quyhic Aug 10, 2017

In step "18.Scroll down to section Search Paths"
You need to change from $(SRCROOT)/../node_modules/react-native-maps/ios/AirMaps
To
$(SRCROOT)/../node_modules/react-native-maps/lib/ios/AirMaps

quyhic commented Aug 10, 2017

In step "18.Scroll down to section Search Paths"
You need to change from $(SRCROOT)/../node_modules/react-native-maps/ios/AirMaps
To
$(SRCROOT)/../node_modules/react-native-maps/lib/ios/AirMaps

@kidmysoul

This comment has been minimized.

Show comment
Hide comment
@kidmysoul

kidmysoul Aug 17, 2017

@benjamin3991
does your node_modules/react-native-maps/lib/ios/AirGoogleMaps/ folder have nothing in it??

@benjamin3991
does your node_modules/react-native-maps/lib/ios/AirGoogleMaps/ folder have nothing in it??

@raihanrazi

This comment has been minimized.

Show comment
Hide comment
@raihanrazi

raihanrazi Sep 12, 2017

Currently, does this support image based custom overlays? Such as this https://developers.google.com/maps/documentation/javascript/examples/overlay-simple

Currently, does this support image based custom overlays? Such as this https://developers.google.com/maps/documentation/javascript/examples/overlay-simple

@dhhiep

This comment has been minimized.

Show comment
Hide comment
@dhhiep

dhhiep Sep 18, 2017

@MrEi91: My solution:

react-native unlink react-native-maps
react-native run-ios

dhhiep commented Sep 18, 2017

@MrEi91: My solution:

react-native unlink react-native-maps
react-native run-ios
@benjamin3991

This comment has been minimized.

Show comment
Hide comment
@benjamin3991

benjamin3991 Sep 26, 2017

@kidmysoul it has multiple .m and .h files.
screen shot 2017-09-26 at 7 21 47 pm

@kidmysoul it has multiple .m and .h files.
screen shot 2017-09-26 at 7 21 47 pm

@KalebPortillo

This comment has been minimized.

Show comment
Hide comment
@KalebPortillo

KalebPortillo Sep 27, 2017

Hey @benjamin3991, I just had the same issue as you, I tried everything mentioned above, and nothing.
I went to react-native-maps and crossed with this thread: react-community/react-native-maps#693

So what i did was run react-native unlink react-native-maps as suggested and then update my podfile as follows
target ‘YOUR PROJECT NAME AS IT APPEARS IN XCODE’ do

# You Podfile should look similar to this file. React Native currently does not support use_frameworks!
source 'https://github.com/CocoaPods/Specs.git'

target ‘YOUR PROJECT NAME AS IT APPEARS IN XCODE’ do

  pod 'Yoga', :path => '../node_modules/react-native/ReactCommon/yoga/Yoga.podspec'
  pod 'React', path: '../node_modules/react-native', :subspecs => [
    'Core',
    'RCTActionSheet',
    'RCTAnimation',
    'RCTGeolocation',
    'RCTImage',
    'RCTLinkingIOS',
    'RCTNetwork',
    'RCTSettings',
    'RCTText',
    'RCTVibration',
    'RCTWebSocket',
    'BatchedBridge'
  ]

  pod 'GoogleMaps'
  pod 'react-native-maps', path: '../node_modules/react-native-maps' #<- PATH to your node_modules/react-native-maps directory
  pod 'react-native-google-maps', path: '../node_modules/react-native-maps' #<- PATH to your node_modules/react-native-maps directory

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
  end
end

and then pod update inside ios folder

Hey @benjamin3991, I just had the same issue as you, I tried everything mentioned above, and nothing.
I went to react-native-maps and crossed with this thread: react-community/react-native-maps#693

So what i did was run react-native unlink react-native-maps as suggested and then update my podfile as follows
target ‘YOUR PROJECT NAME AS IT APPEARS IN XCODE’ do

# You Podfile should look similar to this file. React Native currently does not support use_frameworks!
source 'https://github.com/CocoaPods/Specs.git'

target ‘YOUR PROJECT NAME AS IT APPEARS IN XCODE’ do

  pod 'Yoga', :path => '../node_modules/react-native/ReactCommon/yoga/Yoga.podspec'
  pod 'React', path: '../node_modules/react-native', :subspecs => [
    'Core',
    'RCTActionSheet',
    'RCTAnimation',
    'RCTGeolocation',
    'RCTImage',
    'RCTLinkingIOS',
    'RCTNetwork',
    'RCTSettings',
    'RCTText',
    'RCTVibration',
    'RCTWebSocket',
    'BatchedBridge'
  ]

  pod 'GoogleMaps'
  pod 'react-native-maps', path: '../node_modules/react-native-maps' #<- PATH to your node_modules/react-native-maps directory
  pod 'react-native-google-maps', path: '../node_modules/react-native-maps' #<- PATH to your node_modules/react-native-maps directory

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
  end
end

and then pod update inside ios folder

@markspereira

This comment has been minimized.

Show comment
Hide comment
@markspereira

markspereira Sep 28, 2017

@heron2014 You deserve a gold medal for this, that was amazing stuff! All working, burning the late night oil.

@heron2014 You deserve a gold medal for this, that was amazing stuff! All working, burning the late night oil.

@anthonied

This comment has been minimized.

Show comment
Hide comment
@anthonied

anthonied Oct 5, 2017

After compiling I get this:
ld: warning: directory not found for option '-L/Users/anthoniedeklerk/Library/Developer/Xcode/DerivedData/GoogleMapPlayground-aawswioqogmgvqebwkqwotdtfgat/Build/Products/Debug-iphoneos/React'
ld: warning: directory not found for option '-L/Users/anthoniedeklerk/Library/Developer/Xcode/DerivedData/GoogleMapPlayground-aawswioqogmgvqebwkqwotdtfgat/Build/Products/Debug-iphoneos/Yoga'
ld: library not found for -lPods-GoogleMapPlayground
clang: error: linker command failed with exit code 1 (use -v to see invocation)

Any ideas?

After compiling I get this:
ld: warning: directory not found for option '-L/Users/anthoniedeklerk/Library/Developer/Xcode/DerivedData/GoogleMapPlayground-aawswioqogmgvqebwkqwotdtfgat/Build/Products/Debug-iphoneos/React'
ld: warning: directory not found for option '-L/Users/anthoniedeklerk/Library/Developer/Xcode/DerivedData/GoogleMapPlayground-aawswioqogmgvqebwkqwotdtfgat/Build/Products/Debug-iphoneos/Yoga'
ld: library not found for -lPods-GoogleMapPlayground
clang: error: linker command failed with exit code 1 (use -v to see invocation)

Any ideas?

@yokesharun

This comment has been minimized.

Show comment
Hide comment
@yokesharun

yokesharun Oct 22, 2017

@heron2014 , build got failed fatal error: module 'GoogleMapsBase' not found and the app says this 👍

simulator screen shot - iphone 6 - 2017-10-22 at 19 52 24

i followed this doc also https://github.com/airbnb/react-native-maps/blob/master/docs/installation.md
Thanks in advance

@heron2014 , build got failed fatal error: module 'GoogleMapsBase' not found and the app says this 👍

simulator screen shot - iphone 6 - 2017-10-22 at 19 52 24

i followed this doc also https://github.com/airbnb/react-native-maps/blob/master/docs/installation.md
Thanks in advance

@deehuey

This comment has been minimized.

Show comment
Hide comment
@deehuey

deehuey Nov 5, 2017

I'm getting this too, but it's saying module 'GoogleMaps' not found. ^

deehuey commented Nov 5, 2017

I'm getting this too, but it's saying module 'GoogleMaps' not found. ^

@auaden

This comment has been minimized.

Show comment
Hide comment
@jordangrant

This comment has been minimized.

Show comment
Hide comment
@jordangrant

jordangrant Dec 11, 2017

As @auaden said, https://codeburst.io/react-native-google-map-with-react-native-maps-572e3d3eee14 helped me too.
(although, "You don’t need to install a React pod" was not accurate for me. I ended up installing the React pod as well.)

jordangrant commented Dec 11, 2017

As @auaden said, https://codeburst.io/react-native-google-map-with-react-native-maps-572e3d3eee14 helped me too.
(although, "You don’t need to install a React pod" was not accurate for me. I ended up installing the React pod as well.)

@nathmack

This comment has been minimized.

Show comment
Hide comment
@nathmack

nathmack Jan 5, 2018

I was getting the error:
[!] The name of the given podspec 'yoga' doesn't match the expected one 'Yoga'

So I had to change the casing of yoga:

# You Podfile should look similar to this file. React Native currently does not support use_frameworks!
source 'https://github.com/CocoaPods/Specs.git'

platform :ios, '8.0'



target 'APP_NAME' do
  # Fixes required for pod specs to work with rn 0.42
  react_native_path = "../node_modules/react-native"
  pod "yoga", :path => "#{react_native_path}/ReactCommon/yoga"
  pod "React", :path => react_native_path, :subspecs => [
    'Core',
    'RCTActionSheet',
    'RCTAnimation',
    'RCTGeolocation',
    'RCTImage',
    'RCTLinkingIOS',
    'RCTNetwork',
    'RCTSettings',
    'RCTText',
    'RCTVibration',
    'RCTWebSocket'
  ]

  pod 'GoogleMaps'  # <~~ remove this line if you do not want to support GoogleMaps on iOS

# when not using frameworks  we can do this instead of including the source files in our project (1/4):
#  pod 'react-native-maps', path: '../../'
#  pod 'react-native-google-maps', path: '../../'  # <~~ if you need GoogleMaps support on iOS
end

I'm not really sure why, but it fixed that issues

nathmack commented Jan 5, 2018

I was getting the error:
[!] The name of the given podspec 'yoga' doesn't match the expected one 'Yoga'

So I had to change the casing of yoga:

# You Podfile should look similar to this file. React Native currently does not support use_frameworks!
source 'https://github.com/CocoaPods/Specs.git'

platform :ios, '8.0'



target 'APP_NAME' do
  # Fixes required for pod specs to work with rn 0.42
  react_native_path = "../node_modules/react-native"
  pod "yoga", :path => "#{react_native_path}/ReactCommon/yoga"
  pod "React", :path => react_native_path, :subspecs => [
    'Core',
    'RCTActionSheet',
    'RCTAnimation',
    'RCTGeolocation',
    'RCTImage',
    'RCTLinkingIOS',
    'RCTNetwork',
    'RCTSettings',
    'RCTText',
    'RCTVibration',
    'RCTWebSocket'
  ]

  pod 'GoogleMaps'  # <~~ remove this line if you do not want to support GoogleMaps on iOS

# when not using frameworks  we can do this instead of including the source files in our project (1/4):
#  pod 'react-native-maps', path: '../../'
#  pod 'react-native-google-maps', path: '../../'  # <~~ if you need GoogleMaps support on iOS
end

I'm not really sure why, but it fixed that issues

@ShaikhKabeer

This comment has been minimized.

Show comment
Hide comment
@ShaikhKabeer

ShaikhKabeer Jan 18, 2018

I'm getting error in YGNodePrint.cpp

/node_modules/react-native/ReactCommon/yoga/yoga/YGNodePrint.cpp:208:46: Implicit conversion loses integer precision: 'size_type' (aka 'unsigned long') to 'const uint32_t' (aka 'const unsigned int')

I'm getting error in YGNodePrint.cpp

/node_modules/react-native/ReactCommon/yoga/yoga/YGNodePrint.cpp:208:46: Implicit conversion loses integer precision: 'size_type' (aka 'unsigned long') to 'const uint32_t' (aka 'const unsigned int')

@piyush8

This comment has been minimized.

Show comment
Hide comment
@piyush8

piyush8 Mar 7, 2018

Hi,
I'm this error what am I missing can anyone help me?

Failed to compile
./src/App.js
16:14-24 'expo' does not contain an export named 'Components'.
This error occurred during the build time and cannot be dismissed.

piyush8 commented Mar 7, 2018

Hi,
I'm this error what am I missing can anyone help me?

Failed to compile
./src/App.js
16:14-24 'expo' does not contain an export named 'Components'.
This error occurred during the build time and cannot be dismissed.

@pstanton

This comment has been minimized.

Show comment
Hide comment
@pstanton

pstanton Aug 1, 2018

react-native-maps has moved on since this post and now the installation instructions clearly state: "do not run react-native link react-native-maps"

pstanton commented Aug 1, 2018

react-native-maps has moved on since this post and now the installation instructions clearly state: "do not run react-native link react-native-maps"

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment