NativeScript - Templates

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

Using template

As learned earlier, new application 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 application. 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 application −

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

Tab Navigation Template

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

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

Master-Detail Template

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

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 list of guidelines. Let us see the guidelines 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/light';

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

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