TabView horizontal highlighted line color on iOS


#1

I’m looking for a css property that changes the color of highlighted horizontal line color which appears under a selected tab in TabView. According to this: https://github.com/NativeScript/NativeScript/issues/2738 - you change the color in android using the android-selected-tab-highlight-color, and it works perfectly, but how it is done in iOS?


#2

unfortunately as of now this is only supported for android. see the full set of available properties here https://docs.nativescript.org/api-reference/classes/ui_tab_view.tabview

based on the link you shared, doing it for iOS may requires internal hacks that could possibly ban the app


#3

Maybe this solution will help.

In template:

<GridLayout rows="*,2" columns="*,*,*">
    <TabView rowSpan="2" colSpan="3" tabBackgroundColor="#6E7AFA" androidTabsPosition="bottom" iosIconRenderingMode="alwaysOriginal" (selectedIndexChanged)="tabViewIndexChange($event)">
        <page-router-outlet *tabItem="homeTab" name="homeTab"></page-router-outlet>
        <page-router-outlet *tabItem="createTab" name="bookingCreateTab"></page-router-outlet>
        <page-router-outlet *tabItem="settingsTab" name="settingsTab"></page-router-outlet>
    </TabView>

    <ios>
        <Label *ngIf="selectedIndex == 0" row="1" col="0" backgroundColor="#FFF"></Label>
        <Label *ngIf="selectedIndex == 1" row="1" col="1" backgroundColor="#FFF"></Label>
        <Label *ngIf="selectedIndex == 2" row="1" col="2" backgroundColor="#FFF"></Label>
    </ios>
</GridLayout>

In component:

homeTab: any;
createTab: any;
settingsTab: any;
selectedIndex = 0;

constructor() {
    this.setDefultTabIcons();
}

tabViewIndexChange(args) {
    this.selectedIndex = args.newIndex;
}

setDefultTabTitles() {
    this.homeTab  = { title: "Test 1" };
    this.createTab  = { title: "Test 2" };
    this.settingsTab  = { title: "Test 3" };
}