How to customize tabview in nativescript? - nativescript

Question

How can i dock my Tabview items to the left of the screen like in the image below?
This is how my layout looks like currently.
<TabView dock="left" tabsBackgroundColor="red" selectedIndex="1" selectedColor="#FF0000" iosIconRenderingMode="alwaysOriginal" sdkExampleTitle sdkToggleNavButton>
<StackLayout tabsBackgroundColor="red" *tabItem="{ iconSource: 'res://ic_ham'}" >
</StackLayout>
<StackLayout *tabItem="{title: 'Home'}">
<ns-home></ns-home>
</StackLayout>
<StackLayout *tabItem="{title: 'Bookings'}">
<ns-booking></ns-booking>
</StackLayout>
</TabView>
Resulting layout

Answer 1

It may be a bit of overkill for your needs, but what I've found simplest for us was to change the tab buttons to be fully designable and customizable by disabling the current buttons and the add new tab buttons.
<StackLayout class="grid-tab-view" columns="*,100,100,100,*" ios:rows="auto, auto" android:rows="auto, *">
<label row="0" col="1" class="tab-button" text="Tab1" (tap)="switchTabByIndex(0)" [ngClass]="{'selected': tabSelectedIndex===0}"></label>
<label row="0" col="2" class="tab-button" text="Tab2" (tap)="switchTabByIndex(1)" [ngClass]="{'selected': tabSelectedIndex===1}"></label>
<label row="0" col="3" class="tab-button" text="Tab3" (tap)="switchTabByIndex(2)" [ngClass]="{'selected': tabSelectedIndex===2}"></label>
<TabView colSpan="5" row="1" col="0" #tabView class="tab-view" [(ngModel)]="tabSelectedIndex" (loaded)="onTabsLoaded()" (selectedIndexChanged)="onTabSwitch($event)">
<StackLayout class="tab" *tabItem="{title: 'Tab1'}">
<Label text="tab1 body"></Label>
</StackLayout>
<StackLayout class="tab" *tabItem="{title: 'Tab2'}">
<Label text="tab2 body"></Label>
</StackLayout>
<StackLayout class="tab" *tabItem="{title: 'Tab3'}">
<Label text="tab3 body"></Label>
</StackLayout>
</TabView>
</StackLayout>
And in code:
Add tap event handlers for when button selected and give it a custom selected class (for styling)
Hide the default tab buttons using the tabs loaded event:
onTabsLoaded(): void{
let tabViewElement = <TabView>this.tabView.nativeElement;
if (tabViewElement && tabViewElement.android) {
tabViewElement.android.removeViewAt(0);
} else {
tabViewElement.ios.tabBar.hidden = true;
}
};
and with a bit of css, our result:
Hope this helps, good luck!