Nativescript Angular TabView Scrollable

Question

May I know how can I make the TabView Scrollable such that tab-names are not wrapped

<TabView selectedIndex="1" (selectedIndexChange)="onIndexChanged($event)" sdkExampleTitle sdkToggleNavButton> <StackLayout *tabItem="{title: 'Tab 1'}"> <tabone></tabone> </StackLayout> <StackLayout *tabItem="{title: 'Tab 2'}"> <tabtwo></tabtwo> </StackLayout> <StackLayout *tabItem="{title: 'Tab 3'}"> <tabthree></tabfree> </StackLayout> <StackLayout *tabItem="{title: 'Tab 4'}"> <tabfour></tabfour> </StackLayout> <StackLayout *tabItem="{title: 'Tab 5'}"> <tabfive></tabfive> </StackLayout> </TabView>

and it looks like this.

Answer 1

I'm not aware of any NativeScript api that allows you to set the tabview as scrollable. so in the past, I've created a custom tab component using a ScrollView Horizontally. here is a great example using the scroll view horizontally: http://www.nativescriptsnacks.com/snippets/2016/05/30/horizontal-scroller.html. then show and hide different sections as depending on which button is tapped.

Answer 2

NativeScript-angular ~5.2.0 provides it. Thank you NS!

Here you can prove the official-simple implementation:

https://docs.nativescript.org/angular/cookbook/tab-view-ng

The _automaticallyAdjustsScrollViewInsets method is the responsible to do that.

https://docs.nativescript.org/api-reference/classes/_ui_tab_view_.tabview

Screenshot:

I hope this helps!