Enable swipe in TabView

Question

I am using NativeScript Angular and have a TabView that is set to the bottom position. I would like to allow the user to swipe between tabs on both iOS and Android but in the TabView docs it says that swiping has been disabled when the position is set to bottom.

How do I enable swiping on the TabView?

Answer 1

After reading about the gesture API I ended up doing it by adding a swipe event listener to the TabView:

HTML:

<TabView #tabview (swipe)="onSwipe($event)" androidTabsPosition="bottom">

    <page-router-outlet
        *tabItem="{title: 'Start', iconSource: getIconSource('play')}"
        name="startTab">
    </page-router-outlet>

    <page-router-outlet
        *tabItem="{title: 'Settings', iconSource: getIconSource('settings')}"
        name="settingsTab">
    </page-router-outlet>

</TabView>

TypeScript:

@ViewChild("tabview") tabview!: ElementRef<TabView>;
...
  onSwipe(event: SwipeGestureEventData) {
    if (this.tabview.nativeElement.selectedIndex === 0 && event.direction === SwipeDirection.left){
      this.tabview.nativeElement.selectedIndex = 1;
    } else if(this.tabview.nativeElement.selectedIndex === 1 && event.direction === SwipeDirection.right){
      this.tabview.nativeElement.selectedIndex = 0;
    }
  }
...