Nativescript android remove action bar

Question

I am trying to develop android app using Nativescript and try to remove Action Bar (top bar with "testns" title), but don't know how. I am using code below but not working. Currently using tns v.1.3.0

var frameModule = require("ui/frame"); exports.pageLoaded = function(){ var topmost = frameModule.topmost(); topmost.android.showActionBar = false; };

Answer 1

You can explicitly control the visibility of the ActionBar by setting the actionBarHidden property of the Page, look this:

import {Page} from "ui/page";

export class AppComponent {
    constructor(page: Page) {
        page.actionBarHidden = true;
    }
}

Answer 2

Finally I find the answer how to remove the actionbar. By adding actionBarHidden = "true" inside tag Page in xml file :

<Page xmlns="http://www.nativescript.org/tns.xsd" loaded="pageLoaded" actionBarHidden="true">
</Page>

Answer 3

This is the code for hidding the ActionBar in your NativeScript Angular TypeScript component.

import { Component, OnInit } from "@angular/core";
import { Page } from "tns-core-modules/ui/page";

export class AppComponent implements OnInit {

    constructor(private page: Page) {
    }

    ngOnInit(): void {
        this.page.actionBarHidden = true;
    }
}

Answer 4

If you are using angular and you don't use page in your html or you are using lazy loading of modules or you have multiple page-router-outlet, you take advantage of directives.

Create a new directive:

hideActionBar.ts

import { Directive } from '@angular/core';
import { Page } from 'tns-core-modules/ui/page/page';

@Directive({
    selector: '[hideActionBar]'
})
export class HideActionBarDirective {
    constructor(private page: Page) {
        this.page.actionBarHidden = true;
    }
}

and use this directive for the html where you want to hide the actionbar.

SecondPage.html

<GridLayout tkExampleTitle tkToggleNavButton rows="auto,*" hideActionBar>
 ...// other html goes here
</GridLayout>

P.S. Don't forget to declare it in NgModule as directives are declarables. This is very useful for code sharing projects as you will be declaring it in ngmodule.tns.ts and it will not be compiled for web project.

declarations: [
 AppComponent,
 MyDirective
],

Answer 5

There are two ways to achieve this:

1. XML markup: just add 'actionBarHidden="true"' to your page markup. i.e<Page loaded="pageLoaded" actionBarHidden="true"> </Page>

2. <StackLayout verticalAlignment="middle"> 
       <Button text="{{ abHidden ? 'Show ActionBar' : 'Hide ActionBar' }}" tap="onTap" textWrap="true" class="fa" />
   </StackLayout>
   

and in your .ts

export function onNavigatingTo(args: EventData) {
    const page = <Page>args.object;
    const vm = new Observable();
    vm.set("abHidden", value);
    page.bindingContext = vm;
}

Answer 6

ActionBar {
  height: 0;
}

<ActionBar [title]="appTitle">
</ActionBar>