Application

The Application module provides abstraction over the platform-specific Application implementations. It is the main BCL module and is required for other BCL modules to work properly. The default bootstrap.js implementation for each platform loads and initializes this module.

App Checking Target

Basic usage of the application module in a component to apply different code on Android and iOS

import { Component } from "@angular/core";
import { android as androidApp, ios as iosApp } from "tns-core-modules/application";

@Component({
    moduleId: module.id,
    templateUrl: "./app-checking-target.component.html"
})
export class AppCheckingTargetExampleComponent {
    public isItemVisible: boolean;

    constructor() {
        if (androidApp) {
            console.log("We are running on Android device!");
            this.isItemVisible = true;
        } else if (iosApp) {
            console.log("We are running on iOS device");
            this.isItemVisible = false;
        }
    }
}

App Using Android Specifics

Application Module Android Specific Properties

The application module provides a number of Android specific properties to access the Android app, context and activities.

// import { android as androidApp } from "tns-core-modules/application";
let isPaused = androidApp.paused; // e.g. false
let packageName = androidApp.packageName; // The package ID e.g. org.nativescript.nativescriptsdkexamplesng
let nativeApp = androidApp.nativeApp; // The native APplication reference
let foregroundActivity = androidApp.foregroundActivity; // The current Activity reference
let context = androidApp.context; console.log(context); // The current Android context

Using the Android Application Context

In the extended example below, the Android context is used to get the absolute path to Files directory. We are accessing methods from the Android SDK (like getCacheDir and getFilesDir)

this.fileList = [];
this.appContext = androidApp.context;

// https://developer.android.com/reference/android/content/Context.html#getFilesDir()
this.filesDir = this.appContext.getFilesDir();

// https://developer.android.com/reference/android/content/Context.html#getCacheDir()
this.cacheDir = this.appContext.getCacheDir();

let files = this.appContext.fileList();
for (let index = 0; index < files.length; index++) {
    let element = files[index];
    this.fileList.push(element.toString());
}

Registering a Broadcast Receiver (Android)

NativeScript can send/receive messages and system information though broadcast receivers. More on broadcast receivers in Android here.

this.batteryLife = "0";
let that = this;

// Broadcast Receiver https://developer.android.com/reference/android/content/BroadcastReceiver
androidApp.registerBroadcastReceiver(android.content.Intent.ACTION_BATTERY_CHANGED,
    function onReceiveCallback(androidContext: android.content.Context, intent: android.content.Intent) {
        let level = intent.getIntExtra(android.os.BatteryManager.EXTRA_LEVEL, -1);
        let scale = intent.getIntExtra(android.os.BatteryManager.EXTRA_SCALE, -1);
        let percent = (level / scale) * 100.0;

        that.batteryLife = percent.toString();
    });

Unregistering a Broadcast Receiver (Android)

androidApp.unregisterBroadcastReceiver(android.content.Intent.ACTION_BATTERY_CHANGED);

App Using Ios Specifics

Application Module iOS Specific Properties

The application module provides a number of iOS specific properties to access the iOS app, delegate and root view controller, etc..

// import { ios as iosApp } from "tns-core-modules/application";

// https://developer.apple.com/documentation/uikit/uiapplicationdelegate?language=objc
let delegate = iosApp.delegate; // the iOS application delegate

let nativeApp = iosApp.nativeApp; // The native iOS app

// https://developer.apple.com/documentation/uikit/uiwindow/1621581-rootviewcontroller?language=objc
let rootController = iosApp.rootController; // the iOS rootViewController

let window = iosApp.window; // UIWindow

Adding a Notification Observer (iOS)

UIDevice.currentDevice.batteryMonitoringEnabled = true;
this.batteryLife = +(UIDevice.currentDevice.batteryLevel * 100);

let that = this;
let observer = iosApp.addNotificationObserver(UIDeviceBatteryLevelDidChangeNotification,
    function onReceiveCallback(notification: NSNotification) {
        that.batteryLife = +(UIDevice.currentDevice.batteryLevel * 100);
    });

Removing a notification observer

// When no longer needed, remove the notification observer
iosApp.removeNotificationObserver(observer, UIDeviceBatteryLevelDidChangeNotification);

Application Events

The application module provides cross-platform application events to handle different application states. With the provided application events the user can handle launch, resume, suspend and exit states or provide logic related to the screen orientation, uncaught errors and low memory events.

Use the application method on to add event listeners.

Launch Event

launchListener = (args: LaunchEventData) => {
    console.log("The appication was launched!");
};
on(launchEvent, launchListener);

Suspend Event

suspendListener = (args: ApplicationEventData) => {
    console.log("The appication was suspended!");
};
on(suspendEvent, suspendListener);

Resume Event

resumeListener = (args: ApplicationEventData) => {
    console.log("The appication was resumed!");
};
on(resumeEvent, resumeListener);

Exit Event

exitListener = (args: ApplicationEventData) => {
    console.log("The appication was closed!");
};
on(exitEvent, exitListener);

Displayed Event

displayedListener = (args: ApplicationEventData) => {
    console.log("NativeScript displayedEvent!");
};
on(displayedEvent, displayedListener);

Low Memory Event

lowMemoryListener = (args: ApplicationEventData) => {
    // the instance that has raised the event
    console.log("Instance: ", args.object);
};
on(lowMemoryEvent, lowMemoryListener);

Orientation Changed Event

orientationChangedListener = (args: OrientationChangedEventData) => {
    // orientationChangedEventData.newValue: "portrait" | "landscape" | "unknown"
    console.log("Orientation: ", args.newValue);
};
on(orientationChangedEvent, orientationChangedListener);

Uncaught Error Event

uncaughtErrorListener = (args: UnhandledErrorEventData) => {
    // UnhandledErrorEventData.error: NativeScriptError
    console.log("NativeScript Error: ", args.error);
};
on(uncaughtErrorEvent, uncaughtErrorListener);

API Reference for Application Class

NativeScript Angular