Using CocoaPods is a piece of cake with NativeScript 1.3.0

NativeScript 1.3.0 is already here packed and stacked with a bunch of improvements. One of these improvements is the ease of use of CocoaPods. For those of you who don’t know CocoaPods, ​it is the dependency manager for Swift and Objective-C project. It allows you to easily take an open source GitHub repo and add a reference to the library that it produces.

With NativeScript 1.3.0, you can easily take a pod and use it for the iOS part of your NativeScript projects working only with the NativeScript CLI, without touching Xcode. What it more, a pod can be easily turned into a NativeScript npm plugin.

With the huuuge number of CocoaPods-supporting repos out there, you are given virtually limitless possibilities for your NativeScript projects.

In this blog post, I will demonstrate how you can create a CocoaPod-enabled plugin, that can be later published as an npm plugin, and how you can use that plugin in your NativeScript app.

> Note: NativeScript requires the latest version of CocoaPods - 0.38.2. You can check your version executing the command pod --version

Our scenario for this blog today concerns loading/activity indicators. To be honest, while I am a true iOS fan, I don’t really like the design of the iOS loading indicator. On the contrary, the material design loading indicator of Android immediately caught my eye from the ​moment I saw it.

Since I want the best look and feel for my app, I would like to have the same great indicator experience on both Android and iOS. The cool thing is that there is a open source material design indicator already developed for iOS and what is more, the GitHub repo of that indicator supports CocoaPods. So, this is what we will achieve:

Creating the plugin

First, let’s create our plugin. Creating a plugin using CocoaPods is as easy as 1-2-3.

Create a folder to contain the plugin. Let’s call the folder nativescript-material-loading-indicator .

Inside that folder create a package.json file and fill it with the following minimum required content:

While in the ​nativescript-material-loading-indicator folder, create a platforms folder.

Enter the platforms folder and create an ios folder.

Enter the ios folder and and create a text file calling it Podfile.

Open the Podfile and fill it with the following content: pod "MMMaterialDesignSpinner"

As you may guess, the CocoaPods package manager requires the existence of a Podfile that specifies which pod should be used. In the CocoaPods infrastructure the name “MMMaterialDesignSpinner” is associated with the respective GitHub repo.

This is all we have to do to enable the CocoaPods usage in a NativeScript plugin, nothing more. Now, this plugin can be made an npm plugin, just like I did here.

The creatingView method will be called regardless of whether the Placeholder is visible or not, so we are making an OS check and then implementing our iOS related JavaScript.

Running the project

This is with the implementation. Now let’s run the app using:

tns run ios --emulator

You would notice in the Terminal output provided by the NativeScript CLI that upon the build/run command NativeScript is automatically executing the necessary CocoaPod command, so that our pod library can be loaded appropriately.

And here is the result, nice and smooth material design indicator for iOS, using NativeScript and CocoaPods:

If we are to add the Android platform (tns platform add android) and run the project for it (tns run android --emulator), we will get this look and feel:

Of course, the experience on your own simulator/device will be much smoother, so go and try the project and the plugin now!

Enterprise

Stay connected with NativeScript

I agree to receive email communications from Progress Software or its Partners, containing information about Progress Software’s products. Consent may be withdrawn at any time.

We see that you have already chosen to receive marketing materials from us. If you wish to change this at any time you may do so by clicking here.

Thank you for your continued interest in Progress. Based on either your previous activity on our websites or our ongoing relationship, we will keep you updated on our products, solutions, services, company news and events. If you decide that you want to be removed from our mailing lists at any time, you can change your contact preferences by clicking here.