[Tabs] [Angular] [IOS] Selected tab isn't highlighted

[valera1401]

Which platform(s) does your issue occur on?
iOS, emulator, 14.4
Please, provide the following version numbers that your issue occurs with:
CLI: 8.0.1
Cross-platform modules: 8.0.0
Runtime(s): 8.0.0
Plugin(s): 5.2.19
Created the simple app with ns create my-tab-ng --template @nativescript/template-tab-navigation-ng
Replaced app.component.html with the following markup:
<MDTabs>
<MDTabStrip>
<MDTabStripItem>
<Label text="Page 0"></Label>
</MDTabStripItem>
<MDTabStripItem>
<Label text="Page 1"></Label>
</MDTabStripItem>
<MDTabStripItem>
<Label text="Page 2"></Label>
</MDTabStripItem>
<MDTabContentItem>
<Label text="Page 0" class="h2 text-center"></Label>
</MDTabContentItem>
<MDTabContentItem>
<Label text="Page 1" class="h2 text-center"></Label>
</MDTabContentItem>
<MDTabContentItem>
<Label text="Page 2" class="h2 text-center"></Label>
</MDTabContentItem>

Selected tab isn't highlighted If on page load selectedIndex=0.

[farfromrefug]

@valera1401 should be fixed in latest

[jcassidyav]

The issue I believe is that the UITabBarItem has two image properties, image for the unselected image and selectedImage for the image to show when the item is selected.

changing Tabs.setIconColor for ios to something like

    private setIconColor(tabStripItem: TabStripItem, forceReload = false): void {
        // if there is no change in the css color and there is no item color set
        // we don't need to reload the icon
        if (!forceReload && !this._selectedItemColor && !this._unSelectedItemColor) {
            return;
        }

        const selectedImage = this.getIcon(tabStripItem, this._selectedItemColor);
        const unselectedImage = this.getIcon(tabStripItem, this._unSelectedItemColor);

        tabStripItem.nativeView.image = unselectedImage;
        tabStripItem.nativeView.selectedImage = selectedImage;
        
    }

shows the correct behavior.
Of course it would be better to create the bar with the correct values, and only change when the colors change.

[valera1401]

rse it would be better to create the bar with the correct values, and only change

Think it has been fixed in the last ver.

[jcassidyav]

Mmm I thought I had the latest code and was still seeing it. I ll have to check it in the morn.

[jcassidyav]

Just tried it there with the latest, I'm seeing the same on android as ios i.e. the color of the icon does not change with selection.

I'm going to have a go a raising a pull request but am having difficulties building the repo on windows.

[farfromrefug]

@jcassidyav let me know if i can help

[jcassidyav]

@farfromrefug I think I have it now, I had to do the following:

• Change the tsc-win entries to replace all the / with \\
• Added in a build.angular.win again changing the slashes
  That nearly got me there but I could not get it to build without adding @nativescript-community/ui-material-core to the root package dependencies, I won't check this in but it was the only way I could get it to build, might have something to do with symlinks on windows maybe?

Then I

• updated the angular demo to ns8
• fixed the angular demo so the tabs show up.

so I'll take a look at making the change now.

[jcassidyav]

This is fixed for me no in v5.2.27