Using Local Notifications In Your NativeScript Mobile App

When developing mobile apps, at some point in time you may find yourself needing to show a background notification to your users.  There are two types of notifications, one being the push notification which is sent from a remote server and the other being local notifications that are triggered from within the application.

We’re going to focus on local notifications here.

So when might you need to use a local notification?  There are many scenarios.  Let’s say you’re creating an app that communicates with iBeacons.  When you’re within proximity maybe you want to trigger a notification to the user.  There are many other scenarios that I won’t get into.

We’re going to see a basic example on how to use local notifications in a NativeScript Android and iOS mobile application.

Let’s start by creating a new NativeScript project.  From your Command Prompt (Windows) or Terminal (Mac and Linux), execute the following commands:

It is important to note that if you’re not using a Mac, you cannot add and build for the iOS platform.

To make use of local notifications we’re going to use a plugin.  If we really wanted to we could include the native code for notifications directly within our JavaScript, but for convenience we want to use a plugin.

We’re going to use the nativescript-local-notifications plugin by Eddy Verbruggen.  To install it, execute the following from the Terminal or Command Prompt:

We can now start developing the application.  Before going forward, some code was taken directly from Eddy Verbruggen’s README file.  I’ve given it my own flair.

Let’s start by working with our view model which will contain our data.  Open the project’s app/main-view-model.js and include the following code:

A lot is going on here so we should probably break it down.

The first part of this file is the doAddOnMessageReceivedCallback function.  This is the function that will be called it the notification is clicked.  It can be the router to future functionality within your application based on the particular notification.  For example maybe you have a chat application and you want to be directed to the particular chat room.

The bulk of our local notification code will be in the createViewModel function.  We’ll be returning an Observable that has various variables that will be bound to a UI form.  It also contains a schedule function for scheduling the notification itself.

Now we can take a look at the application model which acts as our page controller.  Open the project’s app/main-page.js file and include the following code:

For iOS you must first ask for permission to use notifications.  Before loading the view model that we created previously, we attempt to grant permission.  If permission is granted we can proceed as normal.  This all happens when the page loads, or in this case the page was navigated to.

Finally we can look at the UI file.  Let’s modify our user interface by making the project’s app/main-page.xml file look like the following:

We have a basic form above.  There are four text fields, two of which are for multiple lines of text.  The text properties use the variables that we bound in the view model file.  The button also uses the function that we created in the view model.

At this point we should be good to go!

If you schedule a notification, you can close the application and it will still show at the scheduled time.  In iOS, the notification will show regardless if the application is in the foreground or background.


You just saw how to make use of local notifications, not to be confused with push notifications.  These notifications have zero dependence on a remote service and can be seen while the application is in the background.

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 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.

  • weldja

    I’d like to use this feature but am struggling with the angular equivalent – would you be able to share something similar using nativescript angular typescript – thanks!

    • I’ve added it to my list of topics.


  • Giorgos Karagounis

    I’m encountering issues with the above example in a Angular/Typescript project. Getting the following error while building:

    /platforms/android/src/main/java/com/tns/broadcastreceivers/ error: NotificationEventReceiver is not abstract and does not override abstract method onReceive(Context,Intent) in BroadcastReceiver
    public class NotificationEventReceiver extends implements com.tns.NativeScriptHashCodeProvider {
    Note: Some input files use or override a deprecated API.
    Note: Recompile with -Xlint:deprecation for details.
    1 error
    :compileF0F1F2F3F4F5F6DebugJavaWithJavac FAILED

    FAILURE: Build failed with an exception.

    What went wrong:
    Execution failed for task ‘:compileF0F1F2F3F4F5F6DebugJavaWithJavac’.

    Compilation failed; see the compiler error output for details.

    Run with –stacktrace option to get the stack trace. Run with –info or –debug option to get more log output.


    Total time: 1.863 secs
    Command ./gradlew failed with exit code 1