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

Answer 1

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 2

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