Hide tab buttons on Nativescript-Angular TabView

Question

I'm trying to find a way to remove the tab buttons on a element with an Angular 6 app but with no avail so far. Basically, I only want to keep the Tab contents and their swipe functionality.

Apparently there are specific android and iOS methods you can use but I'm unsure how to do that.

<TabView [(ngModel)]="tabSelectedIndex" (selectedIndexChanged)="onSelectedIndexChanged($event)" (loaded)="tabViewLoaded($event)">
    <ng-container *ngFor="let article of articles" #tabView>
        <StackLayout *tabItem="{title: article.id}">
            <StackLayout>
                <NewsDetails></NewsDetails>
            </StackLayout>
        </StackLayout>
    </ng-container>
</TabView>

On my .ts file I can find a reference to the element like this:

@ViewChild("tabView") tabView: ElementRef;

ngAfterViewInit() {
    console.dir(this.tabView.nativeElement);
}

But I have no idea what to do from now on. Any ideas? All previous questions regarding this have not worked.

Here is a sample playground link: https://play.nativescript.org/?template=play-ng&id=iK9ZTM

score 7 · Accepted Answer · answered Dec 01 '18 at 12:53

7

Use the code below with the loaded event of TabView.

onTabViewLoaded(event: EventData) {
   const tabView = <TabView>event.object;
   if (isIOS) {
     tabView.viewController.tabBar.hidden = true;
   }
   if (isAndroid) {
     const tabLayout = tabView.nativeViewProtected.tabLayout;
     tabLayout.getLayoutParams().height = 0;
     tabLayout.requestLayout();
   }
}

I recently did that for a sample work I posted in Uplabs

answered Dec 01 '18 at 12:53

Manoj

21,753
3
20
41

Thank you! It works perfectly. Also, that is a great looking app! – jonnybravo Dec 01 '18 at 13:06
hi Manoj. where is the `EventData` come from? `onTabViewLoaded(event: EventData)` – Fai Zal Dong Apr 22 '19 at 03:26
From loaded event (`$event`). – Manoj Apr 22 '19 at 05:34

Hide tab buttons on Nativescript-Angular TabView

1 Answers1

Linked