Creating native Android packages and using them in NativeScript

In this post I will walk you through the process of creating a jar library which will then be referenced from within a custom NativeScript plugin.

Why?

​Couple of days ago was the 1.2 release of NativeScript. With this release the support for NativeScript plugins was enhanced to support native libraries. You can now package native iOS and Android libraries into a single npm package and distribute it as a plugin. In the general case you will be able to find already implemented native package for you app, but if you can't find an existing UI for your app you may want to create a custom native component. Because NativeScript is all about bringing you the native user experience right? In this post we will guide you how to create a simple JAR package and embed it into a NativeScript plugin.

How?

I will use Android Studio to create a project and export it to a jar and version 1.2 of NativeScript. The jar will serve the basic purpose of displaying a toast notification as soon as the main view of the NativeScript application loads. This will be the end result.

Creating a jar library with Android Studio

Start by creating a new Android Studio project.

When the project has finished loading, switch to Project view and expand the app module.

Add a new Java file within org.nativescript.kstanoev.toaster and add the code for showing a toast notification.

package org.nativescript.kstanoev.toaster;

import android.content.Context;

import android.widget.Toast;

publicclassToaster {

publicvoidshow(Context context) {

CharSequence text = "Hello NativeScript!";

intduration = Toast.LENGTH_SHORT;

Toast toast = Toast.makeText(context, text, duration);

toast.show();

}

}

The next step is to export the project as jar. Open build.gradle (the one located in the app module) and apply the changes below.

The final step is to export our Android Studio project to a jar. We'll use gradle for this purpose. On the right side of Android Studio you should have a tab called ‘Gradle’.

This tab contains various gradle tasks. The one we’re looking for is called exportJar.

Double-clicking on the task will run it. Let it do its job. In the meantime you can relax with a beverage. If exportJar has finished without any issues you should have a ToastPlugin.jar file located in the release folder of your project.

Now, we’ll leave the jar alone for a moment and focus on creating the NativeScript plugin.

Creating a NativeScript plugin

According the documentation, this is the structure our NativeScript plugin must follow.

For the sake of simplicity let’s assume that our working folder is C:\Work\

In C:\Work\ create a new folder called toastplugin. In the toastplugin folder create a package.json file with the following content.

{

"name": "nativescript-toaster",

"version": "0.0.1",

"main": "index.js",

"nativescript": {

"platforms": {

"android": "1.​2.0"

}

}

}

Save and close the file.

While in the toastplugin folder, create a new folder called platforms. Open the platforms folder and create yet another folder called android. Open the android folder and create an AndroidManifest.xml file with the following content.

Note that showing toast notifications does not require special permissions. I’ve added the internet permission for showing purposes.

Save and close the AndroidManifest.xml file.

While still being in the android folder create a new folder called libs. Open the libs folder and copy/paste your ToastPlugin.jar.

The folder structure has been set up so go up to the toastplugin folder where the package.json file is located. In the toastplugin folder create a new file called index.js.

index.js will contain the code that exposes the functionality of ToastPlugin.jar.

Open index.js and paste the following content.

varapplication = require("application");

varcontext = application.android.context;

module.exports = {

showToast: function() {

vartoaster = neworg.nativescript.kstanoev.toaster.Toaster();

toaster.show(context);

}

};

We're done with the plugin!

Installing the plugin

Let’s install the plugin we just created. NativeScript allows you to install plugins from a local folder as well as through npm.

Using the plugin

Installing the plugin is just the first step towards using the functionality of the jar within your NativeScript application. Now open main-page.js (located in C:\Work\toast-test\app\) and paste the following contents.

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.