Replace icon in TabViewItem


#1

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.


#2

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.


#3

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. : )


#4

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.