Nativescript: [BottomNav] Changing icon (image) color

[armpogart]

Environment
√ Getting NativeScript components versions information... √ Component nativescript has 6.1.2 version and is up to date. √ Component tns-core-modules has 6.1.1 version and is up to date. ‼ Update available for component tns-android. Your current version is 6.1.1 and the latest available version is 6.1.2. ‼ Update available for component tns-ios. Your current version is 6.1.0 and the latest available version is 6.1.1.

Describe the bug
Not sure whether it is a bug, or the feature is not available.
I can not change color of icons (images) set from res:// anyway. Is there actually a way to change the color of icons for active and inactive states (even programmatically)?

To Reproduce
````scss
TabStripItem {
background-color: $accent;
color: darken(#fff, 26%);

&:active {
color: #fff;
}
}
``` My.scssfile is above. Tried to changecolorand/orbackground-coloronTabStripItem Image` but it doesn't help.

P.S. All icons (image resources) are initially black pngs. I have previously used a plugin for bottom navigation that allowed to set the colors for active/inactive states.

[tsonevn]

Hi @armpogart,
Try to set iosIconRenderingMode to alwaysOriginal for the TabStrip component and check if the needed color will be applied.

[armpogart]

@tsonevn As far as I know iosIconRenderingMode is applied only to ios, and I'm not testing on ios yet. The issue in on Android currently. As far as I remember android:tint attribute was used to change icon colors on Android side. So is there any way to replicate the same behavior with css in Nativescript.

[tsonevn]

Hi @armpogart,
Yes, the iosIconRenderingMode is platform-specific and will be applied only for iOS. On that matter can you send us a project, where it is shown how the image resources have been set for the component?

[armpogart]

Hi @tsonevn,

I have prepared github repo with the problem reproduction.
In home.component.scss you can see I have tried several ways to change the color of icons (image resources) with no any success:

TabStripItem {
    color: yellow;
    background-color: teal;
    tint-color: red;

    &:active {
        background-color: aqua;
    }

    Image {
        color: red;
        background-color: red;
        tint-color: red;
    }
}

[armpogart]

@tsonevn Did you see my repo with reproduction? Is it a bug or expected behavior? Any other way maybe to programmatically set tint color on both platforms?

[tsonevn]

Hi @armpogart,
Excuse me for the delay in reply.
I've checked the provided project. However, setting up the color will not set a mask on the Images, that you are loading and this seems to be expected behaviour. On that matter, I will mark this as a feature request and we will investigate further the case. Meanwhile, you can use an icon font instead of loading an image from the resources. In this case, you should be able to change the color of the icons. Check out the article here.

[manijak]

I found a way to change the colors for both selected & unselected tab-icons (Images).

Get a reference of the BottomNavigation and access its native ios properties.

let page = <Page>args.object;
let mainTabView = <BottomNavigation>page.getViewById("mainTabView");

if (platform.isIOS) {
    mainTabView.ios.tabBar.translucent = false; // Flat or translucent bar (can diffuse colors)
    mainTabView.ios.tabBar.tintColor = UIColor.whiteColor; // Selected image color
    mainTabView.ios.tabBar.unselectedItemTintColor = new Color('#a09e9e').ios; // Unselected image color
    mainTabView.ios.tabBar.barTintColor = new Color('#0c3674').ios; // (Optional) Background-color of the entire bar, can be set via scss
}

In order to change the tab-item Label font & colors:

TabStripItem {
    background-color: #0c3674; /* Item background color (same as barTintColor) */
    &:active {
        background-color: #285681;  /* Selected Item background color */
    }
    Label {
        font-size: 12; /* Label font-size */
        color: #a09e9e;  /* Unselected Label color */
    }
    &:active Label {
        color: white; /* Selected Label color */
    }

}

[codeBasePlusPlus]

This works, thank u muchly.
I must say with all my love for ns, css class overriding is downright painful.