Find The Application Version In Your NativeScript App

With all the buzz around NativeScript, I figured it was about time that I demonstrate how to access native features of a device without the use of any plugins. To start off slow I decided it might be convenient to see how to obtain the application version number and display it within the application.

To be clear, there are plugins to do all this for you, but the point I’m trying to prove is how easy it is to access core features of iOS and Android with limited knowledge of both.

Let’s start off by creating a fresh NativeScript project from the Terminal (Mac and Linux) or Command Prompt (Windows):

tns create ExampleProject
cd ExampleProject
tns platform add ios
tns platform add android

It is important to note that if you’re not using a Mac you won’t be able to add and build for the iOS platform.

Before going any further, lets first understand how to access the application version using the relative native SDKs. In native Android, you would make use of the android.content.pm.PackageInfo and android.content.pm.PackageManager classes. In native iOS, at least with Objective-C, you would make use of the NSBundle class.

Here is what it might look like in an Android project:

import android.content.pm.PackageInfo;
import android.content.pm.PackageManager;

PackageInfo packageInfo = getApplicationContext()
    .getPackageManager()
    .getPackageInfo(getApplicationContext().getPackageName(), PackageManager.GET_META_DATA);

System.out.println(packageInfo.versionCode);

In an iOS project, getting the version information might look like this:

NSString *version = [[NSBundle mainBundle] objectForInfoDictionaryKey: @"CFBundleShortVersionString"];
NSLog(@"%@", version);

Since we’re using NativeScript, things will be slightly different, but not too different.

Going back into our freshly created ExampleProject, find the app/main-page.js file and add the following include:

var application = require("application");

This will allow us to access native features such as the Android application context.

Now we are going to slightly change the base application that was created for us. In your app/main-page.xml file, change it to look like the following:

<Page xmlns="http://www.nativescript.org/tns.xsd" loaded="pageLoaded">
    <StackLayout>
        <Button text="TAP" tap="getVersion" />
    </StackLayout>
</Page>

I essentially just stripped everything out and replaced the tap attribute of the button to call the getVersion function that we’re about to create. Back in your app/main-page.js file, add the following function:

exports.getVersion = function(args) {
    var page = args.object;
}

This is where the magic is going to happen.

First we’re going to see whether or not we’re using Android or iOS by adding the following to that getVersion function:

if(page.android) {

} else {

}

Now we can convert those native ways to get the version information into JavaScript. The final app/main-page.js file will look like this:

var application = require("application");

exports.pageLoaded = function(args) {
    var page = args.object;
    page.bindingContext = {};
}

exports.getVersion = function(args) {
    var page = args.object;
    if(page.android) {
        var PackageManager = android.content.pm.PackageManager;
        var pkg = application.android.context.getPackageManager().getPackageInfo(application.android.context.getPackageName(), PackageManager.GET_META_DATA);
        alert({title: "Version", message: java.lang.Integer.toString(pkg.versionCode), okButtonText: "Close"});
    } else {
        var version = NSBundle.mainBundle().objectForInfoDictionaryKey("CFBundleShortVersionString");
        alert({title: "Version", message: version, okButtonText: "Close"});
    }
}

Notice a few things in the above code.

First we are importing the class just by assigning it to a JavaScript variable. Since we included the application we now have access to the Android context and can proceed to using the functions how we did in native Android. Since PackageInfo.versionCode is an integer we need to convert it to a string using the Java class Integer.

The second thing we are doing is working with the iOS NSBundle. We are using dot notation instead of brackets for the Objective-C functions, but for the most part nothing really changed.

Not so difficult right?

Conclusion

Even though we had to access native iOS and Android features to get the application version, it wasn’t necessarily hard. I for one hardly know Objective-C, so that snippet basically came from a Google search. In other words, you don’t need to know the native languages to make this happen.

A video version of this article can be seen below.

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.