Understanding NativeScript Navigation Events

Share on FacebookTweet about this on TwitterShare on Google+Share on RedditShare on StumbleUponDigg thisFlattr the authorPin on PinterestShare on TumblrShare on LinkedInPrint this pageBuffer this page

In this tutorial we will understand navigation events between pages in NativeScript. Understanding navigation events is essential for UX. As a developer there are times when you need to send some data to the server or perform some action depending on user navigation.

 

Learn More About NativeScript in my NativeScript Jumpstart For Beginners Course on Udemy.com Click here for a great discount.

 

Before we code a sample app let’s understand navigation events with an example. Let’s say we have two pages, page-1 and page-2. Our landing page is page-1 i.e, when we open our app the first page that loads up in page-1

If we take a look at the NativeScript documentation we can see that NativeScript Provides us with four Navigation events.

  • navigatingTo
  • navigatedFrom
  • navigatedTo
  • navigatingFrom

So if we were to navigate form page-1 to page-2 the navigation events would occur in the following sequence

  1. navigatingFrom will occur on page page-1 when navigation has started.
  2. navigatingTo will occur on page-2 when navigation has started.
  3. navigatedFrom will occur on page-1 when navigation has finished.
  4. navigatedTo will occur on page-2 when navigation has finished.

 

Let’s code up a sample app and see these events in action. The default NativeScript app has only one page which won’t be useful for us. I already covered How to Navigate Between Pages For NativeScript App in one of my previous tutorial also How to create Pages In NativeScript where I showed you how you can create a multi page App. So I if you have arrived on this tutorial directly I recommend you read previous tutorials first then follow along with this one.

 

Step 1) Creating A NativeScript App

We will start off by creating a NativeScript app by running the following command in the terminal

Make sure to navigate inside the created app as show above.

 

Step 2) Copying Code From Git

The above command will create a demo NativeScript app but as I mentioned above we won’t be using that. So in this step we will replace the demo app that NativeScript CLI gives us with a multi page app create in my previous tutorial.

So first delete all the files inside the app folder inside your project, then paste the files for our multi page app which you can download form GitHub click here.

 

Step 3) Adding A Platform To NativeScript App

Now it’s time to add a platform to our NativeScript app. You can add Android and iOS platforms by running the following commands, a thing to remember here is that you will need a Mac (OS X) if you wish to add / build for iOS.

 

Step 4) Prepping Page-1

Here we will add attributes to our main-page.xml. This main-page.xml is our landing page when out app starts and we will consider is as page-1.

So open up main-page.xml and add the following code to it.

As you can seeĀ  we have added navigatingTo, navigatedFrom, navigatedTo, navigatingFrom attributes to the <Page> tag. These events will fire the corresponding functions when they are raised.

 

Now it’s time to code the functions that will get executed when the navigation events fire. We will code the functions in main-page.js as follows.

When each of the function is called we are just logging some text to the console that gives us info as to which event was fired.

 

Step 5) Prepping Page-2

Here we will add the same functions and event handlers that we did in the previous step pageTwo.xml and pageTwo.js inside the otherPages folder. The only difference in the code will be in console.log() messages just so we know which page firing which event.

So open up pageTwo.xml and put the following code in it.

 

Now let’s code up the functions the same way, so open up pageTwo.js and put the following code

 

Step 5) Running Our App

Now it’s time to check run our app we can do that by using the run command as follows

The run command will automatically build and deploy our app to a connected device or an emulator. Here the device needs to have debug mode enabled also if you wish to use an emulator the emulator needs to be running in the background.

The app that we used here which was from the previous tutorial on navigation has a Navigate button that when pressed will navigate to pageTwo.

We will get the following result in the console

 

Conclusion

Navigation events are best way to do housekeeping before user enters a view or leaves a view and NativeScript makes it very easy for us to do so.

 

Download Code:


Code Will Be Sent Via Email

 

Leave Me Your Questions And Feedback

Getting your feedback inspires me the most so hit me up in the comments here or on the comments section on my YouTube Channel or on twitter @pointDeveloper

Consider Subscribing / Donating
Subscribe To Mailing List
Donate
If my site was helpful to you, then please consider donating via paypal:

Prantik Vaghela (pointdeveloper)

Hi my name is Prantik Vaghela. I have done my Bachelors and Masters in Computer Science and am a web developer and now a Tutor through my blog. :-)