How to optionally remove TabStripItem from Bottom Navigation in NativeScript 8 JavaScript project

136 Views Asked by At

I have a NativeScipt 8 JavaScript project with bottom navigation and 3 tabs. I'd like the third tab to only be visible if a condition is true. On iOS, I can pop the bottom navigation's items array and this yields the results I want. On Android, however, the tab is still displayed but does nothing when tapped. Here's the code in question:

main-page.xml:

  <mdt:BottomNavigation selectedIndex="0" id="btmnav">

    <mdt:TabStrip>
      <mdt:TabStripItem class="tabstripitem-active">
        <Label text="Riders"></Label>
        <Image src="font://&#xf84a;" class="fas t-36"></Image>
      </mdt:TabStripItem>
      <mdt:TabStripItem class="tabstripitem-active">
        <Label text="Volunteers"></Label>
        <Image src="font://&#xf4c4;" class="fas t-36"></Image>
      </mdt:TabStripItem>
      <mdt:TabStripItem class="tabstripitem-active" >
        <Label text="Director"></Label>
        <Image src="font://&#xf504;" class="fas t-36"></Image>
      </mdt:TabStripItem>
    </mdt:TabStrip>
    ... 

main-page-js, in onNavigatingTo:

let btmnav = page.getViewById("btmnav");
if (btmnav.items.length == 3 && !viewModel.isDirector) { 
  console.log("main-page.onNavigatingTo: removing bottom navigation item"); 
  btmnav.items.pop(); 
}

Is there any way to do this on Android? Note that this is a JavaScript (not Angular) project, so using ngIf is not an option. I noticed that TabStripItem has a visibility property, but I've not been able to get any results from that.

1

There are 1 best solutions below

0
On

After further investigation I found I could make this work be popping both the TabContentItems array and the TabStripItems array, specifically,

let btmnav = page.getViewById("btmnav");
if (isAndroid && btmnav.tabStrip.items.length == 3 && !viewModel.isDirector) {
    btmnav.items.pop(); // remove TabContentItems
    btmnav.tabStrip.items.pop(); // Remove TabStripItems 
}

I'll answer this question and hope it helps others looking to do the same thing.