NativeScript Templates


I am using the “Drawer Navigation” template for my app, and for one of the pages in my app I would like to use the “Master-Detail (with-Firebase)” template. Is there a simple way to do this other than manually copying the files into my existing app? Thanks!


I don’t think we have any built-in template that is combined.


Thanks for the response. Is there a way that this can be done even if it’s more difficult? Thanks!


It’s not difficult if you understand the architecture. Place TabView inside Drawer content.


Thanks I’ve been working on merging/transferring the files to my current app. I am getting an error, however, and I am not sure how to fix it. The message is:

“app/app.component.ts(7,30): error TS2307: Cannot find module ‘./shared/firebase.common’.”

Here is the code for my app.component.ts:

import { Component, OnInit, ViewChild } from “@angular/core”;
import { NavigationEnd, Router } from “@angular/router”;
import * as app from “application”;
import { RouterExtensions } from “nativescript-angular/router”;
import { DrawerTransitionBase, RadSideDrawer, SlideInOnTopTransition } from “nativescript-ui-sidedrawer”;
import { filter } from “rxjs/operators”;
import { initFirebase } from “./shared/firebase.common”;

const firebase = require(“nativescript-plugin-firebase”);

selector: “ns-app”,
templateUrl: “app.component.html”
export class AppComponent implements OnInit {
private _activatedUrl: string;
private _sideDrawerTransition: DrawerTransitionBase;

constructor(private router: Router, private routerExtensions: RouterExtensions) {
    // Use the component constructor to inject services.

ngOnInit() {
        // Optionally pass in properties for database, authentication and cloud messaging,
        // see their respective docs.
        instance => {
            console.log("firebase.init done");
        error => {
            console.log(`firebase.init error: ${error}`);


ngOnInit(): void {
    this._activatedUrl = "/home";
    this._sideDrawerTransition = new SlideInOnTopTransition();
    .pipe(filter((event: any) => event instanceof NavigationEnd))
    .subscribe((event: NavigationEnd) => this._activatedUrl = event.urlAfterRedirects);

get sideDrawerTransition(): DrawerTransitionBase {
    return this._sideDrawerTransition;

isComponentSelected(url: string): boolean {
    return this._activatedUrl === url;

onNavItemTap(navItemRoute: string): void {
    this.routerExtensions.navigate([navItemRoute], {
        transition: {
            name: "fade"

    const sideDrawer = <RadSideDrawer>app.getRootView();


I see that on line 7 it is importing from a file in the shared folder called firebase.common, but that file was not given in either of the templates and do not know where to find it. Thanks!


If you are not using Firebase why you would even need that?


I am going to use Firebase. Do I have to set up the account before being able to test it successfully in the emulator?


Please refer the firebase plugin docs for all those information, its well explained.