Navigate Between Routes In A NativeScript Mobile App

To continue my sprint on Telerik NativeScript related topics, I figured it was time I talk about how to handle navigation to different routes or views within an application. With platforms such as React Native you would use a Navigator component and in platforms such as Ionic Framework you would use the AngularJS UI-Router. With NativeScript, it is even easier to navigate between routes.

In this guide we’re going to look at what it takes to navigate a multiple screen Android and iOS application using NativeScript.

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

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

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

With the base project created, we need to go ahead and create a few directories that will house each of the views of our application. Within your project, create the following parent and child directories:

mkdir app/views
mkdir app/views/myview
mkdir app/views/yourview

The way things work in NativeScript is you’ll have a directory for each model, view, and view model (MVVM) in your application. In this case we have two.

In your app/views/myview directory create the following three files:

touch app/views/myview/myview.xml
touch app/views/myview/myview.js
touch app/views/myview/myview.css

All your UI will be in the myview.xml file, all view logic will be in the myview.js file, and all local view styles will be in the myview.css file. We need to do the same thing for our other view like so:

touch app/views/yourview/yourview.xml
touch app/views/yourview/yourview.js
touch app/views/yourview/yourview.css

Notice the naming used in the second view.

Being that we’re still working with the base template that NativeScript gives us, now we need to tell it to point to myview as being the default and primary view. In your project’s app/app.js file, edit the following line appropriately:

application.mainModule = "views/myview/myview";

Now when the application starts, you’ll be taken to the myview view.

Time to throw some code into these files! Don’t be alarmed by the simplicity we’re going at. It is really just that easy. Starting with the app/views/myview/myview.xml file, include the following XML:

<Page loaded="pageLoaded">
    <StackLayout>
        <Label text="First Screen!" class="title" />
        <Button text="Next Screen" tap="tapAction" />
    </StackLayout>
</Page>

Essentially we just have a Label to tell us what screen we’re on and a Button for navigating to the next.

Now let’s add the JavaScript logic to power this view. In your project’s app/views/myview/myview.js file include the following small bit of code:

var frameModule = require("ui/frame");

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

exports.tapAction = function() {
    frameModule.topmost().navigate("views/yourview/yourview");
}

We are including the Frame module which allows us to navigate. Then in our tapAction function we are navigating directly to the secondary view called yourview.

Now we get to craft the yourview UI and logic. Starting with the XML, open app/views/yourview/yourview.xml and add the following:

<Page loaded="pageLoaded">
    <StackLayout>
        <Label text="Second Screen!" class="title" />
    </StackLayout>
</Page>

This time we’re only adding a Label to tell us what screen we’re on. In iOS you’ll automatically receive a navigation bar with a back button and on Android you can make use of the hardware or software back buttons to go back.

The logic for this yourview can be seen in the app/views/yourview/yourview.js like so:

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

As of right now you have a two screen mobile application where all your UI and logic are separated between the views. Let’s you maintain a clean project that is easy to use.

Yes, I know we didn’t touch the local CSS files, but that is because we didn’t need to. If you wanted to have CSS specific to each of the views you would just add it to the appropriate files. Otherwise, both views can share the CSS found in the global app.css file.

Conclusion

You just saw how easy it was to create different navigation routes within your NativeScript Android and iOS mobile application. Using the MVVM approach you can create applications with very clean and maintainable source code.

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.