<commit_before>---
layout: post
title: Using CocoaPods in NativeScript Versus React Native
comments: true
---

I really like React Native, but one thing that has always bothered me—in my obviously biased opinion as an employee of Telerik that works on [NativeScript](https://www.nativescript.org/)—is just how much native iOS and Android you need to know in order to build anything nontrivial.

This really hit home when I read a recently published [Beginner’s Guide to Using CocoaPods with React Native](https://medium.com/infinite-red/beginner-s-guide-to-using-cocoapods-with-react-native-46cb4d372995) by <NAME>, which shows how to use the [JTSImageViewController CocoaPod](https://cocoapods.org/pods/JTSImageViewController) in a React Native app. Although the article is really well written, a quick skim of the article shows the inherit difficulty of the task: there are a half dozen manual Xcode steps, some `.m` and `.h` files to create, and dozens of lines of Objective-C to write—which isn’t exactly trivial for your average JavaScript developer like me.

This article particularly hit home because in NativeScript we spent a _lot_ of time trying to optimize this exact use case for your average JavaScript developer. We feel that leveraging third-party iOS and Android frameworks—such as CocoaPods for iOS—is essential for building high-quality native applications, and that these libraries should be just as easy to use as JavaScript libraries from npm. In this article I’ll show the difference between React Native and NativeScript in this respect, by recreating the exact same functionality—using the JTSImageViewController CocoaPod—but in a NativeScript context.

> **Note**: Laborde’s React Native article assumes you know the basics of React Native, so I’ll be assuming you know the basics of NativeScript as well. If you don’t have the NativeScript CLI installed, or you don’t know the basics of how to start and run a new app, you may want to go through [the official NativeScript Getting Started Guide](http://docs.nativescript.org/start/getting-started) before continuing.

## Building a plugin

In NativeScript you use CocoaPods (and native SDKs in general) by wrapping them in a NativeScript plugin. We have thorough documentation on creating [NativeScript plugins](http://docs.nativescript.org/plugins/plugins) and [using CocoaPods in particular](http://docs.nativescript.org/plugins/cocoapods), but the basics are really simple.

To mirror the React Native article we’ll create a NativeScript plugin named “image-preview”. Start by adding the folder structure below to any existing NativeScript project:

<pre class="language-shell"><code class="language-shell">image-preview/
    ├── package.json
    └── platforms/
        └── ios/
            └── Podfile</code></pre>

Next, paste the following code into the `image-preview/package.json` file, which gives the plugin a name, a version, and defines what NativeScript versions the plugin supports:

<pre class="language-shell"><code class="language-shell">{
  "name": "nativescript-image-preview",
  "version": "0.1.0",
  "nativescript": {
    "platforms": {
      "ios": "1.5.0"
    }
  }
}</code></pre>
<commit_msg>Get to the point quicker<commit_after>---
layout: post
title: Using CocoaPods in NativeScript Versus React Native
comments: true
---

I really like React Native, but after reading [a Beginner’s Guide to Using CocoaPods with React Native](https://medium.com/infinite-red/beginner-s-guide-to-using-cocoapods-with-react-native-46cb4d372995) by <NAME>, I wanted show how [NativeScript](https://www.nativescript.org/) handles the same thing, but easier.

If you’re curious, start by reading through [Laborde’s article](https://medium.com/infinite-red/beginner-s-guide-to-using-cocoapods-with-react-native-46cb4d372995). It’s well written, but a quick skim of the content shows the inherit difficulty of the task: there are a half dozen manual Xcode steps, some `.m` and `.h` files to create, and dozens of lines of Objective-C to write—which isn’t exactly trivial for your average JavaScript developer like me.

In NativeScript we spent a _lot_ of time trying to optimize this exact use case for your average JavaScript developer. We feel that leveraging third-party iOS and Android frameworks—such as CocoaPods for iOS—is essential for building high-quality native applications, and that these libraries should be just as easy to use as JavaScript libraries from npm. To show that in action let’s look at how to use the JTSImageViewController CocoaPod in a NativeScript app.

> **Note**: Laborde’s React Native article assumes you know the basics of React Native, so I’ll be assuming you know the basics of NativeScript as well. If you don’t have the NativeScript CLI installed, or you don’t know the basics of how to start and run a new app, you may want to go through [the official NativeScript Getting Started Guide](http://docs.nativescript.org/start/getting-started) before continuing.

## Building a plugin

In NativeScript you use CocoaPods (and native SDKs in general) by wrapping them in a NativeScript plugin. We have thorough documentation on creating [NativeScript plugins](http://docs.nativescript.org/plugins/plugins) and [using CocoaPods in particular](http://docs.nativescript.org/plugins/cocoapods), but the basics are really simple.

To mirror the React Native article we’ll create a NativeScript plugin named “image-preview”. Start by adding the folder structure below to any existing NativeScript project:

<pre class="language-shell"><code class="language-shell">image-preview/
    ├── package.json
    └── platforms/
        └── ios/
            └── Podfile</code></pre>

Next, paste the following code into the `image-preview/package.json` file, which gives the plugin a name, a version, and defines what NativeScript versions the plugin supports:

<pre class="language-shell"><code class="language-shell">{
  "name": "nativescript-image-preview",
  "version": "0.1.0",
  "nativescript": {
    "platforms": {
      "ios": "1.5.0"
    }
  }
}</code></pre>

{'fraction_non_alphanumeric': 0.0830860534124629, 'fraction_numerical': 0.006429277942631058, 'mean_word_length': 4.612395929694727, 'pattern_counts': {'":': 10, '<': 21, '<?xml version=': 0, '>': 23, 'https://': 6, 'lorem ipsum': 0, 'www.': 2, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '520033', 'n_tokens_mistral': 1667, 'n_tokens_neox': 1603, 'n_words': 758}