NativeScript

nativescript.md

NativeScript

with Angular & TypeScript

CLI

# without template
tns create MyApp --ng

# with template
tns create MyApp --template tns-template-master-detail-ts

available ng templates:

• tns-template-blank-ng
• tns-template-drawer-navigation-ng
• tns-template-tab-navigation-ng
• tns-template-master-detail-ng
• tns-template-master-detail-kinvey-ng

Resources:

• CLI: https://github.com/NativeScript/NativeScript/wiki/Using-the-%60tns-create%60-command
• Templates: https://docs.nativescript.org/tooling/app-templates

UI Controls

https://docs.nativescript.org/ui/components

• TextField

  • keyboardType = datetime | email | number | phone | url => https://docs.nativescript.org/ui/keyboard
  • secure="true" secure text (passwords)

• ActionBar => top bar on app https://docs.nativescript.org/angular/ui/action-bar

• layout organization

  • StackLayout := stack elements, orientation="'horizontal' | 'vertical'" // default: vertical  - GridLayout := display: grid  - FlexLayout := display: flex
  • code samples: https://docs.nativescript.org/angular/code-samples/ui/layouts

• GridLayout

  <!-- grid layout with two rows:
       1st child (GridLayout) will take up the size of its children (auto);
       2nd child (RadListView) will take up the rest of the size (*) -->
  <GridLayout rows="auto, *">
  
      <!-- 1st row (row0) -->
    <GridLayout row="0" columns="*, auto" class="add-bar">
      <TextField #groceryTextField hint="Enter a grocery item" col="0"></TextField>
      <Image src="~/images/add.png" col="1"></Image>
    </GridLayout>
  
    <!-- 2nd row (row1) -->
    <RadListView row="1" [items]="groceryList">
      <ng-template let-item="item">
        <Label [text]="item.name" class="p-15"></Label>
      </ng-template>
    </RadListView>
  
  </GridLayout>
  

     

• styling
  • SASS supported
  • available css subset: https://docs.nativescript.org/ui/styling
  • available css properties: https://docs.nativescript.org/ui/styling#supported-css-properties
  • themes:
    • default classes, e.g. form, input, input-border, btn, and btn-primary
    • more default classes, general info regarding core themes: https://docs.nativescript.org/ui/theme
• Page

  • NativeScript Page, invisible wrapper for every view

  • useful to hide the action bar (Page.actionBarHidden) (even on android)

    import { Page } from "tns-core-modules/ui/page";
    constructor(private page: Page)
    

• spacing classes:  - schema: margin/padding - top/bottom/left/right - amount  - p-15 = padding: 15  - m-t-2= margin-top: 2  - doc: https://docs.nativescript.org/ui/theme#padding-and-margin
• Advanced controls: NativeScript UI (actually a plugin)

  • ActivityIndicator

    <ActivityIndicator
      [busy]="isLoading"
      [visibility]="isLoading ? 'visible' : 'collapse'" row="1"
      horizontalAlignment="center"
      verticalAlignment="center">
    </ActivityIndicator>
    

  • video tutorial series: https://www.youtube.com/watch?v=4JJVOxybR4E

  • samples: https://github.com/telerik/nativescript-ui-samples-angular/

  • doc: https://www.nativescript.org/ui-for-nativescript

Plugins

• := are npm packages with some added native functionality, such as the ability to leverage Android and iOS SDKs.
• e.g. accelerometer, geolocation, NativeScript UI plugins
• doc: https://docs.nativescript.org/plugins/plugins

2-way-bindings

markup:

    <TextField [(ngModel)]="user.email"></TextField>

module:

import { NativeScriptFormsModule } from "nativescript-angular/forms";

@NgModule({
  imports: [
    NativeScriptFormsModule, // this is required for 2-way-bindings to work
  ],

NativeScriptHttpModule

:= a NativeScript wrapper of Angular’s HttpModule, a module that declares all of Angular’s HTTP-based services

import { NativeScriptHttpModule } from "nativescript-angular/http";
@NgModule({
  imports: [
    NativeScriptHttpModule
  ],

Routing

// app.routing.ts
import { LoginComponent } from "./login/login.component";

export const routes = [
  { path: "", component: LoginComponent }
];

export const navigatableComponents = [
  LoginComponent
];

// app.module.ts
import { NativeScriptRouterModule } from "nativescript-angular/router";

import { routes, navigatableComponents } from "./app.routing";

@NgModule({
  imports: [
    NativeScriptRouterModule,
    NativeScriptRouterModule.forRoot(routes)
  ],
  declarations: [
    AppComponent,
    ...navigatableComponents
  ],

// template
<page-router-outlet></page-router-outlet>

Other sources

• Code samples: https://docs.nativescript.org/angular/code-samples/overview
• Upgrading Hybrid Apps to Native with NativeScript http://www.hybridtonative.com/
• iOS colors: https://developer.apple.com/ios/human-interface-guidelines/visual-design/color/