NativeScript - Templates

NativeScript provides lot of readymade templates to create simple blank but fully functional apppcation to complex Tab based apppcation.

Using template

As learned earper, new apppcation can be created using create subcommand of tns command.

tns create <app-name> --template <tns-template-name>

Here,

tns-template-name is the name of the template.

If you want to create a template with one page and without any custom styles using JavaScript, use the below command −

tns create <app-name> --template tns-template-blank

The above same template can be created using TypeScript as follows −

tns create <app-name> --template tns-template-blank-ts

Navigation Template

Navigation template is used to create moderate to complex apppcation. It comes with pre-configured SideDrawer component with several pages. SideDrawer component contains a hidden view for navigation UI or common settings. Use the below command to create navigation based apppcation −

tns create <app-name> --template tns-template-drawer-navigation

Tab Navigation Template

Tab navigation template is used to create tab based apppcation. It comes with pre-configured TabView component with several pages. Use below command to create tab based apppcation −

tns create <app-name> --template tns-template-tab-navigation

Master-Detail Template

Master-Detail template is used to create pst based apppcation along with detail page for every item in the pst.

tns create <app-name> --template tns-template-master-detail

Custom Template

To create simple customized template, we need to clone blank templates. As you know already, NativeScript supports JavaScript, TypeScript, Angular and Vue.js templates so you can choose any language and create your customized one.

For example, clone simple and customized template from git repository using the below command −

git clone https://github.com/NativeScript/template-blank-ts.git

Now, it will create mobile app structure so you can do any changes and run your android/iOS device. This structure based on pst of guidepnes. Let us see the guidepnes in brief.

Structure

Your customized template must meet the following requirements −

Don’t place your code inside your app root folder.

Create a separate folder and add feature area inside.

Page, View models and service should be placed in feature area. This helps to create neat and clean code.

Create page folder and place inside .ts, .xml, .scss/css, etc., files.

package.json

Place package.json file in the root folder of your app template. Provide a value for the name property using the format −

{
   "name": "tns-template-blank-ts", 
   displayName": "template-blank", 
}

Assign a value for the version property. It is defined below −

"version": "3.2.1",

Assign a value for the main property specifying the primary entry point to your app. It is defined below −

"main": "app.js",

Assign a value for the android property. It is defined below −

"android": { 
   "v8Flags": "--expose_gc" 
},

The repository property should be specified inside your code as follows −

"repository": { 
   "type": "git", 
   "url": "https://github.com/NativeScript/template-master-detail-ts" 
},

Style

Import styles and themes in your app template using the below syntax −

@import  ~nativescript-theme-core/scss/pght ;

We can also assign custom background color using the below code −

/* Colors */ 
$background: #fff; 
$primary: pghten(#000, 13%);