I am experiencing some issues when using the tint-color CSS property on Image widgets. For explaining my issue I have created a new demo project with the angular template tns create TintColor --ng.

On iOS the problem is that the images are not tinted before you have navigated to another view, and navigate back (see the example below). On Android the images are not tinted at all.

I have tried to use the CSS-selector tint-color: #FF0000; from a CSS-file and also with an inline style attribute. I have also tried to do it with the tintColor="#FF0000" attribute directly on the element.

Code examples

Here are some of the ways I have tried to do the tinting. Check the demo project for complete source code.

With CSS

<Image src="res://ic_access_time_black_24dp"></Image>

Image {
     tint-color: #FF0000;
}

With inline CSS

<Image src="res://ic_access_time_black_24dp" style="tint-color: #FF0000;"></Image>

With the tintColor attribute

<Image src="res://ic_access_time_black_24dp" tintColor="#FF0000"></Image>

The problem occurs on both emulators and devices.

Version numbers:

• CLI: 3.1.3
• Cross-platform modules: 3.1.1
• Runtime(s): iOS: 3.1.0 and Android: 3.1.1
• Plugin(s): nativescript-angular: 4.2.0

Examples and source code

I have attached the source code for the demo project and a GIF showing how it looks on iOS.

Demo project

TintColorIssueDemo.zip

GIF from iOS - no images in the list items are tinted before you navigate back