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

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

  
    
  
  [...]

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