New TabView iconSource selectedColor not working on ios and nativescript-angular@0.3.1

[leocaseiro]

Hi, I'm implementing the new TabView with iconSource and the selectedColor works for the title, but not for the font, I mean icon.

I had never able to use the icon as "mask" and now that it's working I can't change the selectedColor.

Anybody else with the same issue?

I posted my html markup here.

Here is the result:

[NickIliev]

Hey @leocaseiro

Can you provide the actual code here - the one in the link above does not seem to correspond with the scenario you are describing, so it is hard to reproduce your actual situation.
From your screenshot the selectedColor seems to work as expected... ?

[leocaseiro]

Hi @NickIliev, I'm referring the icon color, not the text. The icons are getting blue, but I expect they select as red.

Here's the code updated:

<TabView #element [(ngModel)]="selectedIndex" selectedColor="#d8292f">
    <template tabItem title="Listings" iconSource="{{selectedIndex === 0 ? 'res://tab1_filled' : 'res://tab1'}}">
        <StackLayout>
            <label text="Listings"></label>
        </StackLayout>
    </template>
    <template tabItem title="Contacts" iconSource="{{selectedIndex === 1 ? 'res://tab2_filled' : 'res://tab2'}}">
        <StackLayout>
            <label text="Contacts"></label>
        </StackLayout>
    </template>
    <template tabItem title="Open Homes"  iconSource="{{selectedIndex === 2 ? 'res://tab3_filled' : 'res://tab3'}}">
        <StackLayout>
            <label text="Open Homes"></label>
        </StackLayout>
    </template>
</TabView>

[NickIliev]

Hey @leocaseiro

Correct me if I am wrong, but aren't you setting a image resource from App_Resources for your iconSource.

iconSource="{{selectedIndex === 1 ? 'res://tab2_filled' : 'res://tab2'}}"
// tab2_filled isn't that a blue colored image in your resources!?

I don't think you can expect the selectedColor to be applied to an image.
If you want to have a customizable icon, you can use Icon Fonts in your title property

[leocaseiro]

Hi @NickIliev, thanks for you reply.

Yeah, I am absolutely using an image for my tabs, as same as I posted on #332.

Well, if I can't expect the selectedColor to be applied to an image, how should I change the image color, then? As I mentioned on #332, I'm following the nativescript-marketplace-demo app which does that with icon images. However, the new version of {N} is making my icon image as a mask, so it's getting the native ios colours instead of use as an image.

I'm pretty sure the nativescript-marketplace-demo change the tab icon colors, as well as the Instagram app and many other apps.

I've tried icon fonts, but If I do that, I won't be able to set a label(title). Unless if I could set the iconfont as iconSource which doesn't work as well.

[NickIliev]

@leocaseiro

In issue #332 the discussion is about the binding of iconSource and title. The discussed issue was resolved and now the binding is working as expected and as in your example.
For example, here is what is happening in https://github.com/NativeScript/nativescript-marketplace-demo/blob/9e261667273506ef677a29490b04f439027ccb9e/app/examples/layouts/layouts-example.xml

We have tab-view-item which is chaning its iconSource whether it is selected or not.

<TabViewItem ios:title="Stack" iconSource="{{ selectedIndex == 0 ? 'res://stack1' : 'res://stack' }}">

Now if we open app/App_Resources/Android in the drawable folders you can see the two pictures used - stack.png and stack1.png (the differences between the two is hard to notice on white background but one is light gray and the other is white). The same applies to app/App_Resources/iOS where we have one bluish picture (stack.png) and one white (stack1.png).
The selectedColor is only applied to the title property (if present) and to the tab indicator (Android specific).

[leocaseiro]

Hey @NickIliev, thanks for posting that!

Exactly what I've tried. However, in the new version of the {N} (if you try, you can emulate the same issue), you'll see that the iOS ignores the color of the icons, creating a mask for it.

You can read more about it here https://developer.apple.com/ios/human-interface-guidelines/graphics/custom-icons/#//apple_ref/doc/uid/TP40006556-CH21-SW1

[leocaseiro]

Hi @NickIliev, I created a repo with my test app, so you can clone and test on your ios emulator or device.

https://github.com/leocaseiro/nativescript-tabview-angular-demo

You can see, that the selectedColor works great for title, but not for the image.

I've seen many apps changing it's icons, the Music app for iPhone for example is pink.

Music App:

Perhaps Nativescript Angular or Nativescript itself needs a feature to change the tab icon color?

[leocaseiro]

Update: I believe this issue is related to this one from Nativescript#1278 or Nativescript#1269

Exactly what I was expecting. If I change on
node_modules/tns-core-modules/ui/tab-view/tab-view.ios.js:281

From

var originalRenderedImage = is.ios.imageWithRenderingMode(UIImageRenderingMode.UIImageRenderingModeAutomatic);

To

var originalRenderedImage = is.ios.imageWithRenderingMode(UIImageRenderingMode.UIImageRenderingModeAlwaysOriginal);

My icon colors work.

[NickIliev]

@leocaseiro indeed the change introduced in NativeScript/NativeScript#1278 where UIImageRenderingModeAlwaysOriginal was replaced with UIImageRenderingModeAutomatic is the reason for this behaviour under iOS. We will discuss the options for introducing a property to further control the iconSource under iOS (or use selectedColor as initially intended) and I will update the information here.

[NickIliev]

@leocaseiro
As a temp workaround for this scenario you can modify your tns-core-modules.
NOTE: This will work only with your local project and if you delete/reset node_modules, you will have to refactor the code again.
To apply the workaround follow this steps:

• navigate to node_modules/tns-core-modules/ui/tab-view
• open tab-view.ios.js
• at line 284 (as tns-core-modules v2.2) find the following line

var originalRenderedImage = is.ios.imageWithRenderingMode(UIImageRenderingMode.UIImageRenderingModeAutomatic);

and change it to:

var originalRenderedImage = is.ios.imageWithRenderingMode(UIImageRenderingMode.UIImageRenderingModeAlwaysOriginal);

Now this won't change the fact that selectedColor will only apply on title, but now you can use your own images defined in resources and they won't be masked with the iOS blue color.

[leocaseiro]

Hi @NickIliev, thanks for that!

I've done that and worked fine 👍