Replace icon in TabViewItem

kentaccn · 2018-07-30 17:15:02 UTC

Hi folks,

i have check a lot of posts related to Tab icon changes in NS
I know we can implement tab active color change by

<TabView :selectedIndex="selectedIndex" iosIconRenderingMode="alwaysTemplate" selectedTabTextColor="#FF8000">

There is also suggestion by NickIliev, however it doesn’t work
https://github.com/NativeScript/NativeScript/issues/3911#issuecomment-291459437

<TabViewItem title="Connections" iconSource=" selectedIndex == 1 ? '~/assets/images/footer-icons/profile.png' : '~/assets/images/footer-icons/profile-active.png'" :onPress="toggleTab2">

However, such solution is just an overlay color change but cannot change the source of icon, i found such problem already for a year, it is something need to code by us or NativeScript not support yet.

manojdcoder · 2018-07-30 17:19:37 UTC

As you already mentioned it’s not supported, but I once did a sample for iOS to change icon color dynamically hope this satisfeis your requirement.

github.com

manojdcoder/nativescript-vector-icons/blob/master/demo/app/main-page.ts#L26


updateColorAt(tabView, 0);
tabView.on("selectedIndexChange", onTabViewSelectedIndexChange);
}


export function onTabViewSelectedIndexChange(args: PropertyChangeData) {
const tabView = (<TabView>args.object);
updateColorAt(tabView, args.value);
}


function updateColorAt(tabView: TabView, index: number) {
tabView.ios.tabBar.tintColor = new Color((<any>tabView.items[index]).tintColor).ios;
}

kentaccn · 2018-07-30 17:45:58 UTC

Hi @manojdcoder,

Your proposed should be dynamic color change based on different index.
I think most people concern is icon replace and also icon size resize. : )

manojdcoder · 2018-07-30 18:31:56 UTC

From you code snippet above I guessed you want to use 2 sets of image one for active state and another for inactive state. iOS will use it’s own tint color even if you set icon with different colors, so updating tint color is the option.

If your active image is completely different from inactive image, which is not the general case then this may not work for you.