Filtering by Tag: Nativescript

Double ActionBar In Nativescript

The other day I was just mucking about in Nativescript and encountered what I felt was an odd bug at first, my application had two action bars, naturally I hit the google to try to see what was going on, and well I had to go to like three websites for the answer, and thus this blog post was born.

Screen Shot 2018-05-05 at 8.18.53 am.png

 

So your app looks like mine, well its probably prettier but you get the point, you have two ActionBars and find yourself saying WTF!? 

 

Like me your app.component.ts file probably looks a little something like this

`import { Component } from "@angular/core";

@Component({

selector: "my-app",
template: `
<page-router-outlet></page-router-outlet>
`

})

export class AppComponent { // Your TypeScript logic goes here } `

 

 

As soon as your app loads it redirects to some other page, using a page-router-outlet and now you clever cookie you have read the docs about the page-router-outlet and really took what it said to heart, particularly the bit where it said 

“The main difference here is that when navigating - the new component will be loaded as a root view in a new Page. This means that any content outside the page-router-outlet will not be included in the new page. This is the reason why the page-router-outlet is usually the single root element in the application component.” ~ https://docs.nativescript.org/core-concepts/angular-navigation#page-router-outlet

Android really loves its ActionBar and you can read all about it here: https://developer.android.com/training/appbar/ 

So what is happening is that when the app loads and navigates to your defined page, the app.component.ts is acting kinda like a wrapper and your component gets loaded as an activity inside it and since, 

“In Android, the application bar is visible by default and shows the name of the application as title. The navigation button is visible only when it is explicitly defined in the application.” ~ https://docs.nativescript.org/ui/action-bar#showing-or-hiding-the-actionbar

When we navigate we load a new page, and thus we get the effect of a page within a page, and two ActionBars, the simple solution is discussed here: https://github.com/NativeScript/nativescript-angular/issues/353 

But we are all lazy so here is a code snippet 

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

import { Page } from "ui/page";

@Component({

selector: "my-app",
template: `
<page-router-outlet></page-router-outlet>
`

})

export class AppComponent implements OnInit{

// Your TypeScript logic goes here

constructor(private page: Page) { }

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

}`

 Now your application can define the look and feel of the single ActionBar within each component