Repository navigation
[BottomNav][iOS]Incorrect color applied to icon/text #7862
Description
Environment
Provide version numbers for the following components (information can be retrieved by running tns info in your project folder or by inspecting the package.json of the project):
- CLI: 6.1
- Cross-platform modules: 6.1
- Android Runtime:6.1
- iOS Runtime:6.1
Describe the bug
Have an image that is white. when placed in the bottom nav it becomes colored blue when the tab is active and grey when the tab is inactive.
For the color of the label it is applied only when the tab is active. When the tab is inactive it becomes the same grey color as the icon.
To Reproduce
https://play.nativescript.org/?template=play-tsc&id=khpHyT
Note the color of the label happens ONLY locally when you run the app. On the playground app it works as expected.
Expected behavior
The icon should either remain the color it is, or there should be options to be colored with a specific color.
The text should get its color from the class/style applied.
Additional context
This is a regression from 6.0.
Related to #6967
Activity
PeterStaev commentedon Sep 24, 2019
Seems this relates to update to XCode11. I've just rolled back the project to the previous runtime versions and the problem is still present.
bundyo commentedon Sep 24, 2019
I can't reproduce this in Android? Maybe iOS only?
PeterStaev commentedon Sep 24, 2019
Title says iOS :)
After further testing seems the icon coloring is a regression in 6.1. But the text coloring seems iOS13/Xcode11 related.
bundyo commentedon Sep 24, 2019
It does also say Android runtime: 6.1 below. :) Skipped the title since I knew what I was opening.
tsonevn commentedon Sep 25, 2019
Hi @PeterStaev,
I've rechecked the case and it seems that in your case, you should set
iosIconRenderingModetoalwaysOriginalfor theTabStripcomponent. Then the right color will be applied for the images. For your convenience, I am attaching the project with some changes.PeterStaev commentedon Sep 25, 2019
Hey @tsonevn , thanks for the provided fix! I can confirm that setting the rendering mode fixes the issue with the icon coloring (so seems there is some default behavior change since 6.0 as it was not needed then).
But the XCode11/iOS13 problem with the text coloring is still present, even in your provided project. Simply download it locally
tns run ioson a machine with XCode11 and you will see the problem.MartoYankov commentedon Oct 9, 2019
It seems that in iOS13, there is a new API for styling the TabBar (https://developer.apple.com/documentation/uikit/uitabbaritem/3198079-standardappearance?language=objc) and weirdly the old way with
setTitleTextAttributesForStatedoesn't work as expected. We should try the new API for iOS >= 13.armpogart commentedon Oct 23, 2019
Any workaround before fixes? How can I set to build the project using old API?
PeterStaev commentedon Dec 8, 2019
When can we expect a fix for this? I was hoping that all iOS13 issues would be fixed for 6.2, but seems that is not the case 😞
manijak commentedon Feb 3, 2020
When using images as Tab icons with
allwaysTemplaterender-mode enabled, it would be preferable if the selected-icon-color was the same as selected-label-color. As it is now, my selected tab icons get a weird blue color that I have no control over, and cannot change. This breaks the design in my case.The original
TabViewgets this right and the non-selected/selected image-icons get correct color based on the style settings.NickIliev commentedon Feb 6, 2020
The issue with the color not being applied for a non-active state is reported here - we are currently working on a solution.
rigor789 commentedon Sep 7, 2023
Closing because BottomNavigation and Tabs are no longer part of core since NativeScript 8.0:
https://blog.nativescript.org/nativescript-8-announcement/#important-note-about-bottomnavigation-and-tabs