Beginner’s Guide to Using CocoaPods with React Native

A long but smooth tour at integrating a CocoaPod with React Native

As developers we are excited by the promise of rapid, configurable, and free libraries that get results for our applications.

CocoaPods are a powerful resource that seasoned developers love to use. Succinctly it’s a package manager for iOS 3rd party code. Over 10,000 libraries reside at your fingertips for development and new and inspiring features roll in each day. Spend a few hours just admiring the gallery of functionality with CocoaControls.com. I often do.

What We’ll Be Making

I’m a fan of the JTSImageViewController pod for interactive image previews. Pan, zoom, flick and more right at your fingertips! Let’s add this to a React Native project.

Image Preview CocoaPod JTSImageViewController

This is what we’ll be accomplishing in following steps:

Adding CocoaPods — The basics of how to add pods. Skip this if you know it.

— The basics of how to add pods. Skip this if you know it. Create a Bridge to Native — Adding code inside Xcode that can be called from React Native JavaScript.

— Adding code inside Xcode that can be called from React Native JavaScript. Call Our Native Code —Verifying that we can actually run the code we just added.

—Verifying that we can actually run the code we just added. Utilize Pod Code — Making this whole thing something useful by calling the functionality in a pod.

Adding CocoaPods

If you’ve never added CocoaPods to a project, it might seem somewhat daunting at first glance. Rest assured that the process is only a passing pain for first-timers.

Ruby

The CocoaPods manager is built and supported by Ruby. So firstly, you need to have Ruby. OS X ships with a version of Ruby installed by default, but they require sudo to install gems. *BLECH!* If you plan on NEVER touching Ruby again, I guess this is okay.

Use sudo if you must, but preferably install with:

$ gem install cocoapods

Podfile

If you’re familiar with most package management systems, the Podfile is simple. It’s merely a list of external resources to be gathered and inserted into your project.

We start by moving into the iOS folder of our RN project, and typing pod init, which generates the template Podfile.

$ cd ios

$ pod init

Now you can edit your Podfile to add what pods you’d like. I’ll be adding the Image Preview pod. My Podfile looks like so:

# Uncomment this line to define a global platform for your project

platform :ios, '8.0'

# Uncomment this line if you’re using Swift

# use_frameworks! target "RNImagePreview" do

pod 'JTSImageViewController'

end

at this point you can install with:

$ pod install

Pro Tip — Sometimes pod install just hangs forever: the following is a fix. $ pod repo remove master

$ pod setup

$ pod install

Now, you’ll open RNImagePreview.xcworkspace instead of xcodeproj for your project from here forward. Try to add pods early in a project, so you’re not reinventing habits for your team. ALSO, be sure you have the correct schemas selected.