Use CocoaPods Module in React Native Custom UI Component

Question

I'm building a React Native UI component which will make use of the Google Maps iOS SDK to render maps in a React app. This is being built as a static Cocoa Touch Framework so that I can use it in different projects.

So far this framework doesn't do much, I'm just trying to get it to compile before I try and do anything useful with it. I have a Podfile which loads in the Google Maps SDK and I've run the pod install command:

# Uncomment this line to define a global platform for your project
platform :ios, '8.1'
# Uncomment this line if you're using Swift
# use_frameworks!

target 'GoogleMapView' do
    source 'https://github.com/CocoaPods/Specs.git'
    pod 'GoogleMaps'
end

I have GoogleMapView.h and GoogleMapView.m files which will do the heavy lifting in this module. For now they don't really do much:

@import GoogleMaps;

@interface GoogleMapView: GMSMapView

@end

--

#import "GoogleMapView.h"

@implementation GoogleMapView {
    GMSMapView *mapView_;
}

- (void)viewDidLoad {
    // Create a GMSCameraPosition that tells the map to display the
    // coordinate -33.86,151.20 at zoom level 6.
    GMSCameraPosition *camera = [GMSCameraPosition cameraWithLatitude:-33.86
                                                            longitude:151.20
                                                                 zoom:6];
    mapView_ = [GMSMapView mapWithFrame:CGRectZero camera:camera];
    mapView_.myLocationEnabled = YES;
    self.view = mapView_;

    // Creates a marker in the center of the map.
    GMSMarker *marker = [[GMSMarker alloc] init];
    marker.position = CLLocationCoordinate2DMake(-33.86, 151.20);
    marker.title = @"Sydney";
    marker.snippet = @"Australia";
    marker.map = mapView_;
}

@end

Then I have GoogleMapViewManager.h and GoogleMapViewManager.m files which provide the bridge to React Native. Again, these don't do much right now!:

#import "RCTViewManager.h"

@interface GoogleMapViewManager : RCTViewManager

@end

--

#import "GoogleMapView.h"
#import "GoogleMapViewManager.h"

@implementation GoogleMapViewManager

RCT_EXPORT_MODULE()

- (UIView *)view
{
    GoogleMapView *map = [[GoogleMapView alloc] init];

    return map;
}

@end

I've added this library to my React Native XCode project like so - there are some red files listed (I'm not too sure what they mean?):

I've also added the product from my static library to the Link Binary With Libraries list in the Build Phases section of the main React project:

However, when I try to compile the project, I get some errors which are causing the build to fail like so:

I'm certain that I've done something wrong when importing the Google Maps SDK using CocoaPods. I wasn't able to follow the docs and use the .xcworkspace file when importing my static library into the React app which is possibly what's wrong, but I can't figure out how to get it to run!

Update:

I can get the code to compile if I include the map project using the .xcworkspace file, but then I'm not able to access the binaries or include them in any build phases which isn't useful:

Does anyone know how I could make use of the Google Maps iOS SDK like this in a React Native app?

Answer 1

In the case that you have a React Native App Project, let's call it MyApp.xcodeproj, and you are including a library project, GoogleMapView.xcodeproj, you won't be able to use CocoaPods in GoogleMapView just by dragging it into MyApp.xcodeproj as you have done in this example.

If you want to use CocoaPods to pull in the GoogleMaps Pod, you must pull in your GoogleMapView project ALSO using CocoaPods.

Like so:

# MyApp/Podfile

pod 'GoogleMapView', :path => 'Libraries/GoogleMapView'

But before you do that, you'll need to make sure that the GoogleMapView project / private CocoaPod is correctly configured.

First, the Podfile:

# MyApp/Libraries/GoogleMapView/Podfile

pod 'GoogleMaps'

Then, the Podspec. This file is what marks the project as a CocoaPods library.

You can generate this with pod spec create GoogleMapView.

Here's what yours needs to look like:

# MyApp/Libraries/GoogleMapView/GoogleMapView.podspec

    Pod::Spec.new do |s|

      s.name         = "GoogleMapView"
      s.version      = "0.0.1"
      s.summary      = "A short description of GoogleMapView."

      s.description  = <<-DESC
                       DESC

      s.homepage     = "http://EXAMPLE/GoogleMapView"
      s.license      = "MIT (example)"


      s.author             = { "David Young-Chan Kay" => "[email protected]" }

      s.source       = { :git => "http://EXAMPLE/GoogleMapView.git", :tag => "0.0.1" }

      s.source_files  = "Classes", "Classes/**/*.{h,m}"
      s.exclude_files = "Classes/Exclude"

      # This is the key line. You must add it by hand.
      s.dependency 'GoogleMaps'

    end

Once these three files are in place, you will be able to re-use your GoogleMapView using CocoaPods!

You can even upload it to the central CocoaPods repository for sharing with others.

Hope this helps. Let me know if you need clarification.