NativeScript Templates


#1

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!


#2

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


#3

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


#4

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


#5

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”);

@Component({
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() {
    firebase.init({
        // Optionally pass in properties for database, authentication and cloud messaging,
        // see their respective docs.
    }).then(
        instance => {
            console.log("firebase.init done");
        },
        error => {
            console.log(`firebase.init error: ${error}`);
        }
    );

}

ngOnInit(): void {
    this._activatedUrl = "/home";
    this._sideDrawerTransition = new SlideInOnTopTransition();

    this.router.events
    .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();
    sideDrawer.closeDrawer();
}

}

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!


#6

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


#7

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


#8

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