Hide Tab Buttons in NativeScript TabView

Question

I'm using Nativescript with Typescript/Angular and, for both iOS and Android, I'd like to hide the navigation tab buttons completely without losing the swipe functionality between the tabs.

Said another way: I want the tab content, but not the buttons.

I'm open to other suggestions to gain the same functionality without the tab navigation menu.

The closest answer I could find was this: NativeScript How to hide tab buttons from TabView

However, this answer didn't work. It caused the entire page to go white and none of the tab items appeared. It seemed as though the swipe functionality ceases to function as well.

Any ideas?

This is inside the html (not xml) file:

<TabView id="mainTab" selectedIndex="1">
    <StackLayout *tabItem="{ title: 'Tab 1' }">
        <app-page-one></app-page-one>
    </StackLayout>
    <StackLayout *tabItem="{ title: 'Tab 2' }">
        <app-page-two></app-page-two>
    </StackLayout>
    <StackLayout *tabItem="{ title: 'Tab 3' }">
        <app-page-three></app-page-three>
    </StackLayout>
</TabView>

Answer 1

Old question but maybe someone else also hits this so giving more updated answer.

Nativescript v6 introduced Tabs (and BottomNavigation) with purpose to replace TabView: https://nativescript.org/blog/tabs-and-bottomnavigation-nativescripts-two-new-components/

So solution with Tabs is simply to remove the TabStrip portion, e.g.

<Tabs>
  <TabContentItem>
      <GridLayout>
          <Label text="Content for Tab 1" />
      </GridLayout>
  </TabContentItem>
  <TabContentItem>
      <GridLayout>
          <Label text="Content for Tab 2" />
      </GridLayout>
  </TabContentItem>
</Tabs>

Answer 2

The best way todo this is to do it programatically. Take alook at this issue here at https://github.com/NativeScript/nativescript-angular/issues/621.

Simply create tabs programmatically and then you can control them. You can't remove tabs from hierarchy once they are added to the tree from the UI.

Answer 3

I had the same problem and found a solution that works on android at least, maybe somebody can provide an iOS solution. You need to annotate the TabView so you can access the underlying Android component like i did with #mainTabView

<TabView #mainTabView androidTabsPosition="bottom">
  <GridLayout *tabItem="{iconSource: 'res://ur_news', title: 'Home'}">
    <Label text="Tab 1"></Label>
  </GridLayout>
  [...]
</TabView>

Then, in the component you can reference this element, access the internal tabView and use android native calls to hide it.

import { Component, ElementRef } from '@angular/core';

[...]

// angular will inject a reference to the native implementation here, we can use it
@ViewChild('mainTabView') containerRef: ElementRef;

[...]

protected handleAndroidFullscreenMode(isFullscreen: boolean): void {
  // wait a little bit until calling this - if it is empty it might not yet be there
  // fetch the underlying nativeElement 
  const tabView = this.containerRef.nativeElement as TabView;
  if(!tabView) {
    console.log("native element not yet initialized");
    return;
  }

  // the tabLayout contains the buttons we want to hide
  const tabLayout = tabView.nativeView.tabLayout;
  if(!tabLayout) {
    console.log("No tab layout");
    return;
  }

  // use native android methods to hide them
  if(isFullscreen) {
    tabLayout.setVisibility(android.view.View.GONE);
  } else {
    tabLayout.setVisibility(android.view.View.VISIBLE);
  }
}