Create Lists 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 the world of mobile apps Lists make the world round. In this tutorial we will learn how to create lists in NativeScript.

Step 1) Creating A New NativeScript App

We will start off by creating a new NativeScript app we do that by running the following commands in our command prompt

This will give us the default NativeScript app.

 

Step 2) Adding Platform to NativeScript

Before you add a platform make sure you have navigated inside of the new project. Also a thing to note here is that you will need a Mac i.e, (OS X) if you wish to add or build for iOS. We can add Android and iOS platform by running the following commands

 

Step 3) Creating The List Data

You can create a new page for your list if you want but I will not do that here, for the sake of keeping this tutorial simple I will work with the default NativeScript app pages. So open up main-page.js and put the following code in it.

Here we are using the page.bindingContext to blind listData to our page view.listDataas the name suggests contains the data that we want to display in our list.  Here I have hard coded the listData object but you could get the data off of some API. The format of the data will differ form API to API but the format used here which is known as Array of objects is most commonly used format.

 

Step 4) Creating List In The View

We coded the data to be displayed in our main-page.js file, now it’s time to display the data in list format for that open up main-page.xml and code it as shown below.

Here we are creating a list using the ListView tag on line 2. We have the items attribute set to the listData object which is available to us here through page.bindingContext.

Inside of the ListView tag we are displaying each list item using ListView.itemTemplate tag. As we set the item attribute to our listData object, the listView.itemTemplate will iterate over each item in the provided object.

Each individual object and is value can be accessed using the double curly braces {{}} as shown on line 4,  where we are displaying each object by accessing it’s {{key}} property using a Label tag.

 

Step 5) Running Our App

We can run our app using the run command. The run command will build and deploy the app to any connected device or emulator running in the background.It can be done as follows for Android and iOS

 

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

 

Conclusion

Lists in NativeScript are vary easy to create and populate. You can read more about list in NativeScript 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. :-)