Nativescript android removes the action bar

Question

I am trying to develop an Android application using Nativescript and trying to remove the action bar (top bar called "testns"), but I don’t know how to do it. I am using the 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 an ActionBar by setting the actionBarHidden Page property, look at 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 action bar. By adding actionBarHidden = "true" inside the tag in the xml file:

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

Answer 3

This is the code to hide the action bar 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 use angular and you do not use page in html, or you use lazy module loading, or you have several page-router-outlet , you use 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 HTML directive where you want to hide the action bar.

SecondPage.html

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

PS Remember to declare it in NgModule, as directives are declarative . This is very useful for code sharing projects, as you will declare it in ngmodule.tns.ts and it will not be compiled for a 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>