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:

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:

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

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:

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:

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:

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:

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:

The above commands will create a NativeScript Angular 2 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:

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:

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

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 Java, JavaScript, Golang and a variety of frameworks such as Angular, NativeScript, and Apache Cordova. Nic writes about his development experiences related to making web and mobile development easier to understand.

  • Am David Mwangi

    Very informative. Have been trying to write an autocomplete plugin for my project using Nathan Walker’s seed for angular 2 https://github.com/NathanWalker/nativescript-ng2-plugin-seed but haven’t had any luck in getting it to work. If you are familiar with the plugin,can you provide a tutorial using it?

  • R Jovany Mezura

    thanks nic i’m had take your course of nativescript for angular developer

  • Ashish Gaude

    can you tell me how can i create a jar file along with dependencies in android studio which i can use as a plugin for nativescirpt angular?

    • Any JAR or AAR file will only work on Android, not iOS. In regards to creating Android libraries, you’d have to read about it in the Android documentation. It isn’t related to NativeScript because NativeScript will accept any native library.