Skip to main content

Create Pages In Nativescript

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 see what it takes to create pages in NativeScript . When you create an app using the NativeScript CLI the default app that is created has only one page which is useful for a demo app but as your app grows so will the need for different pages.

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

Step 1) Create A Nativescript App

We will first start off by creating a fresh Nativescript app and navigate into the app directory. We do that by running the following commands.

 

Step 2) Adding Platform to NativeScript

After creating our new app and navigating inside the project directory we now need to add Android and iOS platforms. A thing to keep in mind is that you will need to have a Mac (OS X) otherwise you will not be able to add or build for iOS platform. We add platforms by running the following commands.

 

Step 3) Taking A Look At The Folder Structure

Before we go any further let’s go ahead and take a look at the folders and files that we have inside our project directory.

A thing to note here is that the folder structure shown is for NativeScript version 1.7.0 in the future versions some files may be added or removed if you find that the folder structure has changed let me know in the comments and i will update the post.

 

Step 4) Understanding Pages In NativeScript

Let’s understand pages, we will be working inside the app folder inside of our project. As I mentioned above the default app that the NativeScript CLI creates for us has only one page or view.

So what exactly is a page in NativeScript?

A page in NativeScript can be best understood as a combination of views, functionality and Model (Optional) bundled as one which is also know as M-V-VM or M-V-* architectural pattern .

Let’s dig a bit deeper views are UI elements in the .xml files and functionality refers to the JavaScript code in the .js files and the Model refers to the data that the page might need which is optional. This type of architectural pattern can also be seen in many other frameworks Angular, Angular2, React, etc.

In the folder structure that we saw above in step-3 we have a main-page page. A thing to note here is that both the main-page.xml and main-page.js file have the same name. This is important as native script will treat both of them as one page or module or component what ever you might want to call it.

So simply put main-page.xml and main-page.js make main-page page. As I already mentioned the model here is optional so the name does not matter hence it has been named main-view-model.js

 

Step 5) Creating A New Page In NativeScript

We can create a new page directly in our app folder but it is a good practice to keep things organized so let’s create a new page in it’s own folder. So firstly we will create a new folder inside our app folder called otherPages So the full path to the otherPages folder is newPageDemo\app\otherPages.

Inside of this folder we will create a new page, as we already know a page consist of two files xml and js which have the same name, here we will name the files as pageTwo.xml and pageTwo.js (Yeah I know not so creative name 🙂 )

First let’s create the pageTwo.xml file we will put the following code in it

Here we arecreating a Stack Layout which stacks each element within on top of one another like a stack hence the name. Inside the stackLayout tag we have a label with some text. Note the on the page tag on line 1 we have navigatingTo attribute set to a function called onNativiatingTo. This function will get called as soon as the page is brought into context or is loaded.

 

Finally we will create the pageTwo.js file and put the following code in it

As we gave the navigatingTo attribute on the page a function we are coding it here. We are declaring the function on line 1 and then exporting it on line 5. The exports.onNavigatinTo statement exposes the function which can be used in the view pageTwo.xml file as we already saw.

And just like that we have created a second page in NativeScript.

But How Do I Navigate Between Pages In NativeScript?

If you open up the newPageDemo\app\app.js file which is the first file that loads up you will see that we have the following code

Here on application.start method we are loading the main-page page. Which you can change to point to the pageTwo page if you wanted, that way the app will load pageTwo first instead of main-page but I will not be doing that here.

 

We created a new page in this tutorial but there is no way to get to that page. How do we navigate to it? Let’s go ahead and handle Navigating between pages with parameters in the next post where we will build upon what we have seen here.

 

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

%d bloggers like this: