NativeScript - Navigation

Navigation enables users to quickly swipe in to their desired screen or to navigate through an app or to perform a particular action. Navigation component helps you implement navigation using simple button clicks to more complex patterns.

Navigation differ substantially between core and angular version of NativeScript. While core framework navigation is foundation for navigation process, NativeScript’s Angular model adopts the core navigation concept and extends it to make it compatible with Angular framework.

Let us see both core navigation concept and angular adoption of navigation in this chapter.

Core Concepts

Let us understand how the navigation works in core NativeScript in this chapter.

In NativeScript, navigation is split into four different categories based on the direction it applies as specified below −

  • Forward navigation

  • Backward navigation

  • Lateral navigation

  • Bottom navigation

Forward Navigation

Forward Navigation refers to navigating users to the screen in the next level of hierarchy. It is based on two NativeScript components, Frame and Page.

Frame

Frame is the root level component for navigation. It is not a visible container but acts as a container for transitions between pages.

A simple example is as follows −

<Frame id="featured" defaultPage="featured-page" />

Here,

Frame navigates to (or loads) the featured-page page component and renders it.

Page

Page is next to Frame component and it acts as a container for UI component. Simple example is defined below −

<Page loaded="onPageLoaded"> 
   <ActionBar title="Item" class="action-bar"></ActionBar>
   <AbsoluteLayout> 
      <Label text="Label"/< 
      <Button text="navigate('another-page')" tap="onTap"/> 
   </AbsoluteLayout> 
</Page>

Here,

  • Initially, Page loads all the UI component of the screen and renders it.

  • When user clicks the button, it will navigate the user to another-page page.

Backward Navigation

Backward navigation method enables backward movement through screens within one app or across different apps. It is the opposite direction of forward navigation. Simple goBack() method is used to navigate back to the previous page.

It is defined below −

<Page class="page" loaded="onPageLoaded"> 
   <ActionBar title="Item" class="action-bar"></ActionBar> 
   <StackLayout class="home-panel"> 
      <Button class="btn btn-primary" text="Back" tap="goBack"/> 
   </StackLayout> 
</Page>

Here,

goBack() method will be triggered when user taps the button. goBack() navigates the users to the previous page, if one is available.

Lateral Navigation

Lateral navigation refers to the navigation between screens at same levels of hierarchy. It is based on hub pattern. It is enabled through specific navigation components such as BottomNavigation, Tabs, TabView, SideDrawer and Modal View.

A simple example is defined as below −

<Page class="page" xmlns="http://www.nativescript.org/tns.xsd"> 
   <ActionBar title="Hub" class="action-bar"></ActionBar> 
   <StackLayout class="home-panel"> 
      <Button class="btn btn-primary" text="navigate('featured-page')" tap="navigateToFeatured" /> 
      <Button class="btn btn-primary" text="navigate('search-page')" tap="navigateToSearch" />
   </StackLayout> 
</Page>

Here,

  • navigateToFeatured function uses navigate() method to navigate the user to featured page.

  • Similarly, navigateToSearch function will navigate the user to search page.

The hub page can also be reached using navigate method available in page screen and one can move out of hub page using goBack() method.

A simple example is as follows −

<Page class="page"> 
   <ActionBar title="Item" class="action-bar"></ActionBar> 
   <StackLayout class="home-panel"> 
      <Button class="btn btn-primary" text="navigate('hub-page')" tap="navigateToHub" /> 
      <Button class="btn btn-primary" text="goBack()" tap="goBack" /> 
   </StackLayout> 
</Page>

Bottom and Tab Navigation

The most common style of navigation in mobile apps is tab-based navigation. The Tab Navigation is arranged at the bottom of the screen or on the top below the header. It is achieved by using TabView and BottomNavigation component.

Angular based navigation

NativeScript extends its navigation concept to accommodate the Angular routing concept. NativeScript provides a new module, NativeScriptRouterModule by extending Angular RouterModule.

NativeScript angular navigation concept can be categorized into section as below −

  • page-router-outlet tag

  • nsRouterLink attractive

  • RouterExtension class

  • Custom RouterReuseStrategy

Let us learn all the above angular navigation in this section.

Page Router Outlet

As learned earlier, page-router-outlet is the replacement of Angular’s router-outlet. page-router-outlet wraps the Frame and Page strategy of Nativescript core navigation framework. Each page-router-outlet creates a new Frame component and each configured components in the outlet will be wrapped using Page component. Then, the native navigate method is used to navigate to another page / route.

Router Link (nsRouterLink)

nsRouterLink is the replacement of Angular’s RouterLink. It enables UI component to link to another page using route. nsRouterLink also provides below two options −

pageTransition − It is used to set page transition animation. true enables default transition. false disables the transition. Specific values like slide, fadein, etc., set the particular transition.

clearHistory − true clears the navigation history of nsRouterLink.

A simple example code is as follows −

<Button text="Go to Home" [nsRouterLink]="['/home']" 
   pageTransition="slide" clearHistory="true"></Button>

Router Extension

NativeScript provides RouterExtensions class and exposes the navigation function of the core NativeScript.

The methods exposed by RouterExtensions are as follows −

  • navigate

  • navigateByUrl

  • back

  • canGoBack

  • backToPreviousPage

  • canGoBackToPreviousPage

A simple example code using RouterExtensions is as follows −

import { RouterExtensions } from "nativescript-angular/router"; 
@Component({ 
   // ... 
}) 
export class HomeComponent { 
   constructor(private routerExtensions: RouterExtensions) { } 
}

Custom Route Reuse Strategy

NativeScript uses a custom route reuse strategy (RouterReuseStrategy) to accommodate the architecture of a mobile application. A mobile application differs in certain aspects in comparison to a web application.

For example, the page can be destroyed in a web application when user navigates away from the page and recreates it when the user navigates to the page. But, in mobile application, the page will be preserved and reused. These concepts are taken into consideration while designing the routing concept.

Routes

A simple routing module in NativeScript Angular application will be as below −

import { NgModule } from "@angular/core"; 
import { Routes } from "@angular/router"; 
import { NativeScriptRouterModule } from "nativescript-angular/router"; 
import { HomeComponent } from "./home.component"; 
import { SearchComponent } from "./search.component"; 
const routes: Routes = [ 
   { path: "", redirectTo: "/home", pathMatch: "full" }, 
   { path: "home", component: HomeComponent }, 
   { path: "search", component: SearchComponent }, 
];
@NgModule({ 
   imports: [NativeScriptRouterModule.forRoot(routes)], 
   exports: [NativeScriptRouterModule] 
}) 
export class AppRoutingModule { }

Here,

Routing module is very similar to Angular version except very few exceptions. In reality, NativeScript uses its core navigation strategy by exposing it in a way similar to Angular framework.

Advertisements