Navigation Drawer/ Side Drawer for NativeScript

Navigation Drawer/ Side Drawer is a very common component we need in most of our mobile applications. Side Drawer something we use to go from one page to another.

I felt that implementing the Side Drawer for NativeScript is little difficult at first compared to other frameworks like Ionic.

In Ionic framework, there is a build in <ion-menu> angular directive which is very easy to implement.

In this post, we will discuss how to implement SideDraw for our NativeScript application.

We will implement something like this.

If you want to see the source code of this version go here.

If you want to test that the app on your dev you can download it from here or QR scan the follow

One keynote is that In order to implement Side Drawer, we also have to learn little about <ActionBar> and <NavigationButton> components. We have to create our own custom ActionBar to have Side Drawer.

Let's not create an application from Scratch instead, let's use the GitUser application we created earlier. If you want to catch the series from the beginning Go to Part1 or if you just watch to know the final coding go to Part5.

Get GitUsers App.

Let's clone our GitUsers v0.1 in our local machine. To do so

git clone https://github.com/dimpu/NativeScript-GitUser.git GitUser  
cd GitUsers  
git checkout tags/v1.0  
npm i  

We tagged our initial version as v0.1 So we checking out the tag v1.0

npm i will install all necessary node module for our application.

Adding NativeScript Teleric UI

Telerik has already created a UI library for NativeScript. Which is available in both Free and Pro Version.

Free have
1. SideDraw
2. ListView
Components

Pro version comes with 30 days trail which has other components like charts, date with more features.

For us, FreeVersion is more than enough.

Ok, First add the NativScript Telerik UI to our project.

tns plugin add nativescript-telerik-ui  

Incase if you want to try the pro version

tns plugin add nativescript-telerik-ui-pro  

This will add the library and registered it for use.

Big Note: If you are building the application from the previous tutorial or If you already have android folder inside platforms folder first remove it and then run tns platform add android command to add the android platform again so that all java files for nativescript-telerik-ui will get build.

Modifying GitUsers structure.

We are about to make our application complex. So, I think it's the right time to properly structure our application.

Previously since it's a very tiny application we put everything on app component.

Let's create a new folder components. We will build everything as an angular2 component.

I have created a list component and move all the git users listing code from app.component to list.component inside the components folder.

We will not discuss that code here. If you want to see how it was done go and check out Part 5.

Codeing ActionBar

By default, nativeScript creates an ActionBar for each and every page. But If you want to customize it you should use '' components.

Let's start with app.component.html

<ActionBar title="GitUsers">

</ActionBar>  

This code is equivalent to default ActionBar. From now can start modifying is as we want.

Now we want a menu drawer icon left the side of the title.

<ActionBar title="GitUsers">  
  <NavigationButton icon="res://ic_drawer" (tap)="openDrawer()">
</NavigationButton>  
</ActionBar>  

We added a new resource icon ic_drawer.png to our project.
? Also we telling menu icon to call openDrawer() when it is tapped.

You can find inside App_Resourse folder

Telerik RadSideDrawer

To implement Side draw we will use the RadSideDrawer directive which we added before as a plugin.

<RadSideDrawer #drawer>  
    <template drawerSide>
         <!-- Page goes here -->
    </template>
    <template drawerMain>
        <!-- Main content goes here->
   </template>
</RadSideDrawer>  

Before we see compleate app.component.html code we should add a few more things to our app.component.ts. go to our app.component.ts file.

Implmenting RadSideDrawerComponent

In Order to work with the SideDrawer directives it is very important that we need to import RadSideDrawerComponent and SideDrawerType. We should add ViewChild for RadSideDrawerComponent.

import { Component, ViewChild, ChangeDetectorRef } from "@angular/core";  
import { RadSideDrawerComponent, SideDrawerType } from "nativescript-telerik-ui/sidedrawer/angular";  
import { userListComponent } from './components/list/list.component';

@Component({
    selector: "my-app",
    directives: [userListComponent],
    templateUrl: "app.component.html"
})
export class AppComponent {  
    @ViewChild(RadSideDrawerComponent) 
    public drawerComponent: RadSideDrawerComponent;
    private drawer: SideDrawerType;
    public pages:Array<Object>;

    constructor ( 
        private _changeDetectionRef: ChangeDetectorRef) {
        // List all pages here         
         this.pages = [
            {name:"Home"},
            {name:"About"},
            {name:"Contact"}
        ]; 
    }

    ngAfterViewInit() {
        this.drawer = this.drawerComponent.sideDrawer;
        this._changeDetectionRef.detectChanges();
    }

    public openDrawer() {
        this.drawer.toggleDrawerState();
    }
}

Here we have created the drawer object which is used to control the SideDrawer.

We also implemented the openDrawer function which we added to our <NavigationButton >.

Also, we imported our userListComponent which we will use inside the main content.

Now, Let's see our final code of app.component.html.

<ActionBar title="GitUsers">  
  <NavigationButton icon="res://ic_drawer" text="Go Back" (tap)="openDrawer()"></NavigationButton>
</ActionBar>  
<RadSideDrawer #drawer>  
    <template drawerSide>
        <StackLayout class="p bgc-white">
            <ListView [items]="pages" row="1">
                <template let-item="item" let-i="index">
                    <StackLayout>
                        <Label text="{{item.name}}" class="page-name" ></Label>
                    </StackLayout>
                </template>
            </ListView>
        </StackLayout>
    </template>
    <template drawerMain>
        <StackLayout class="m">
            <user-list></user-list>
        </StackLayout>
   </template>
</RadSideDrawer>  

Inside templates, we added what ever template stucture we want.

Ok, Finally let's add few sties to app.component.css file.

.p {
    padding: 10px;
}
.m {
    padding: 10px;
}

.bgc-white {
    background-color: #fff;
}
.page-name {
    padding: 13px 8px;
    font-size: 16px;
    color: #000;
}
ActionBar {  
    background-color:  #3C5AFD;
    color: white;
}

RadSideDrawer {  
    padding: 0;
    margin: 0;
}

Please note previously we had our user list component CSS here but we moved it inside the components folder.

That's it we are done. In next post, we will see some other useful NativeScript concepts.

Get posts by email

Like what you're reading? Get these posts delivered to your inbox.