Create Native iOS And Android Plugins With NativeScript

In my previous NativeScript tutorials I demonstrated how to access native platform APIs and features using JavaScript, but I never explained how to develop plugins that could accomplish this in a very maintainable fashion. By moving this native functionality to plugins, the application code remains a lot cleaner and is better for the long run.

For reference, you can see how to create Toast notifications in Android and determine the application version in Android and iOS using my previous tutorials.

This time we’re going to look at bundling that functionality into a plugin.

For the purpose of this tutorial, and to keep it simple, we’re going to make a plugin for finding the application version in NativeScript. We’re first going to make the plugin, then we’re going to make an application to use the plugin.

Creating a Plugin for Finding the Application Version

Starting with the creation of the plugin, create a new directory on your desktop. The name of the directory doesn’t matter, but let’s call it ns-appversion so we are on the same page. Navigate into the directory with your Command Prompt (Windows) or Terminal (Mac and Linux) and execute the following:

npm init -y

The above command will initialize an NPM project which will let us install some dependencies. Our dependencies will only be TypeScript, but let’s install it:

npm install typescript --save

With TypeScript included in the project we can initialize the TypeScript configuration file. Execute the following from your Terminal or Command Prompt:

tsc --init

If you haven’t already guessed it, we’re going to be creating our plugin with TypeScript rather than vanilla JavaScript. Before we get into the development, we need to make a few revisions to the package.json file that was created. Open it and include the following:

{
    "name": "ns-appversion",
    "version": "1.0.0",
    "description": "",
    "main": "appversion.js",
    "nativescript": {
        "platforms": {
            "android": "2.0.0",
            "ios": "2.0.0"
        }
    },
    "scripts": {
        "test": "echo \"Error: no test specified\" && exit 1"
    },
    "keywords": [],
    "author": "",
    "license": "ISC",
    "dependencies": {
        "typescript": "^1.8.10"
    }
}

Notice in the above we’ve given the plugin a name of ns-appversion and are saying that it works for both Android and iOS. With that out of the way let’s start developing.

Create an appversion.android.ts and appversion.ios.ts file at the root of the plugin directory. Android specific code will go in the android.ts file and iOS specific code will go in the ios.ts file. We’re going to start with the Android code.

Open the plugins appversion.android.ts file and include the following code:

import application = require("application");

declare var android: any;
declare var java: any;

export class AppVersion {

    public constructor() { }

    public getApplicationVersion(): string {
        let PackageManager = android.content.pm.PackageManager;
        let pkg = application.android.context.getPackageManager().getPackageInfo(application.android.context.getPackageName(), PackageManager.GET_META_DATA);
        return java.lang.Integer.toString(pkg.versionCode);
    }

}

If you read my previous tutorial, the above should look fairly familiar. Essentially we’ve created a TypeScript class and declared that we want to ignore a few of the Android and Java classes in terms of type definitions. Our single function getApplicationVersion will return a string value of the version.

Now let’s take a look at the iOS equivalent. Open the project’s appversion.ios.ts file and include the following code:

import application = require("application");

declare var NSBundle: any;

export class AppVersion {

    public constructor() { }

    public getApplicationVersion(): string {
        let version = NSBundle.mainBundle().objectForInfoDictionaryKey("CFBundleShortVersionString");
        return version;
    }

}

Pretty much the same logic, but iOS specific APIs. Because we care about the people who plan to use this plugin, we want to provide type definitions for this particular plugin.

Create an appversion.d.ts file and include the following code:

declare module "ns-appversion" {

    export class AppVersion {
        constructor();
        getApplicationVersion(): string;
    }

}

Now users can use the plugin in a JavaScript or TypeScript application.

Creating a NativeScript Application that Includes the Plugin

Our application won’t be much of anything, but it will demonstrate our freshly created plugin in action. To show this, let’s create a fresh NativeScript project for Android and iOS. From the Command Prompt (Windows) or Terminal (Mac and Linux), execute the following:

tns create ns-app --ng
cd ns-app
tns platform add ios
tns platform add android

The above commands will create a NativeScript Angular project that uses TypeScript. The Android and iOS build platforms will be added, but unless you have Xcode installed, you won’t be able to build for iOS.

Now we need to add the plugin to our project. Assuming both the NativeScript project and plugin both exist in directories on the desktop, execute the following:

tns plugin add ../ns-appversion

If the plugin exists somewhere else, use the appropriate path. It won’t exist in NPM, so you’ll have to use paths.

Open the project’s app/app.component.ts file and import the following:

import {AppVersion} from "ns-appversion";

To use this plugin, find the onTap method and include the following two lines to it:

let av = new AppVersion();
alert({title: "Version", message: av.getApplicationVersion(), okButtonText: "Close"});

Now when the button is pressed, an alert will show with the application version.

Conclusion

Creating NativeScript plugins is not difficult, as we demonstrated in this tutorial. We created a plugin for obtaining the application version using native Java and native Objective-C APIs. This is part of the beauty that NativeScript brings to the table when it comes to cross platform application development with JavaScript.

Nic Raboy

Nic Raboy is an advocate of modern web and mobile development technologies. He has experience in C#, JavaScript, Golang and a variety of frameworks such as Angular, NativeScript, and Unity. Nic writes about his development experiences related to making web and mobile development easier to understand.