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>