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; };

Mounting

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;
    }
}

Horology

In the earlier versions the root was always a Frame, so by default there will be a Page. Now this is not working on the latest version of nativescript. With the latest version, you are allowed to define flexible root components and any number of frames (page-router-outlet) within your app. So there won't be a default Frame / Page created within app component. Page can be injected only into the components those are loaded inside the page-router-outlet. – Selfsame

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>

Mounting

is there another method? I don't use page tag – Eva

@Elgendy If you are using Angular, you use directive, I have posted an answer showing how to use it. – Isiahisiahi

is there another method? I don't use page tag or angular – Gomorrah

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;
    }
}

Sitting

works for me in Android and iOS, but crashes when try to run the angular app in the browser – Reminisce

Answer 4

<page-router-outlet actionBarVisibility="never"></page-router-outlet>

add [actionBarVisibility="never"] this in in your [app.component.html] file. Its working fine in my project.

Ifc

This answer should be much higher up. With the newer versions of Nativescript using the page-router-outlet more this is easy, quick and clean. Thank you. – Verulamium

Answer 5

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
],

Isiahisiahi

A very elegant solution taking advantage of Angular. – Scrotum

This answer is essential (and the only one that works) for code-sharing projects. Thank you! – Cloraclorinda

not sure why all solutions above works for me - but the first row of the grid is off the screen – Intensive

Answer 6

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;
}

Piperonal

Answer 7

ActionBar {
  height: 0;
}

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

Andres

It may help to add a paragraph or to explaining how the poster may use this code to solve his/her problem. And possibly why the code s/he posted doesn't. – Linger

Answer 8

import { Component, OnInit } from "@angular/core";
import { Page } from "@nativescript/core";

@Component({
  selector: "ns-items",
  templateUrl: "./items.component.html",
})
export class ItemsComponent implements OnInit {

  constructor(private page: Page) { 
  }

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

Olivares