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://" class="fas t-36"></Image>
</mdt:TabStripItem>
<mdt:TabStripItem class="tabstripitem-active">
<Label text="Volunteers"></Label>
<Image src="font://" class="fas t-36"></Image>
</mdt:TabStripItem>
<mdt:TabStripItem class="tabstripitem-active" >
<Label text="Director"></Label>
<Image src="font://" 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.
After further investigation I found I could make this work be popping both the TabContentItems array and the TabStripItems array, specifically,
I'll answer this question and hope it helps others looking to do the same thing.