[TIMOB-28551] iOS: TabGroup icons are tinted wrong on iOS 12 and older
GitHub Issue | n/a |
---|---|
Type | Bug |
Priority | Medium |
Status | Closed |
Resolution | Fixed |
Resolution Date | 2021-11-17T10:51:21.000+0000 |
Affected Version/s | n/a |
Fix Version/s | Release 10.1.1 |
Components | iOS |
Labels | TabGroup, iOS, icon, tintColor |
Reporter | Joshua Quick |
Assignee | Joshua Quick |
Created | 2021-10-08T02:32:00.000+0000 |
Updated | 2021-11-17T11:02:23.000+0000 |
Description
*Summary:*
On iOS 12 and older OS versions,
TabGroup
properties "activeTintColor" and "tintColor" fail to tint the tab icons correctly. "tintColor" never tints the inactive tab icons (they default to gray) and instead wrongly tints the active tab icon. The "activeTintColor" never tints the active tab icon.
*Steps to reproduce:*
Create a Classic Titanium project from template. (Will provide needed tab icons.)
Use the below code as the "app.js".
Build and run on iOS 12.
function createTab(title, icon) {
const window = Ti.UI.createWindow({ title: title });
window.add(Ti.UI.createLabel({ text: title + " View" }));
const tab = Ti.UI.createTab({
title: title,
icon: icon,
window: window,
});
return tab;
}
const tabGroup = Ti.UI.createTabGroup({
tabs: [
createTab("Tab 1", "/assets/images/tab1.png"),
createTab("Tab 2", "/assets/images/tab2.png"),
createTab("Tab 3", "/assets/images/tab1.png")
],
activeTintColor: "red",
activeTitleColor: "red",
tintColor: "purple",
titleColor: "purple",
tabsBackgroundColor: "#F7F7F7",
});
tabGroup.open();
*Result:*
Notice the inactive tab icons are gray when they should be purple.
Notice the active tab icon is wrongly purple when it should be red.
!TabGroup-Bad.png|thumbnail!
*Expected Result:*
!TabGroup-Good.png|thumbnail!
Attachments
File | Date | Size |
---|---|---|
TabGroup-Bad.png | 2021-10-08T02:31:40.000+0000 | 713636 |
TabGroup-Good.png | 2021-10-08T02:31:40.000+0000 | 905236 |
PR (master): https://github.com/appcelerator/titanium_mobile/pull/13110
The above PR caused a regression on iOS 15 where the [tabsBackgroundColor](https://titaniumsdk.com/api/titanium/ui/tabgroup.html#tabsbackgroundcolor) property will be ignored if you also the tab title color properties. This issue happens because setting the [UITabBarItem.standardAppearance](https://developer.apple.com/documentation/uikit/uitabbaritem/3198079-standardappearance) property will override the main [UITabBar.standardAppearance](https://developer.apple.com/documentation/uikit/uitabbar/3198046-standardappearance) property which we're currently setting the tabs background color to.
This fixes the above mentioned regression... PR (master): https://github.com/appcelerator/titanium_mobile/pull/13176
Backport PR: https://github.com/appcelerator/titanium_mobile/pull/13184
Backport PR for the regression fix: https://github.com/appcelerator/titanium_mobile/pull/13186