[TIMOB-28550] iOS: TabGroup property "titleColor" is mishandled on iOS 15
| GitHub Issue | n/a |
|---|---|
| Type | Bug |
| Priority | Medium |
| Status | Closed |
| Resolution | Fixed |
| Resolution Date | 2021-10-15T11:08:36.000+0000 |
| Affected Version/s | n/a |
| Fix Version/s | Release 10.1.1 |
| Components | iOS |
| Labels | TabGroup, iOS, tabs, tintColor |
| Reporter | Joshua Quick |
| Assignee | Joshua Quick |
| Created | 2021-10-08T02:12:12.000+0000 |
| Updated | 2021-11-17T10:56:54.000+0000 |
Description
*Summary:*
The
TabGroup "titleColor" property, which sets the inactive tab text color, is ignored on iOS 15 and wrongly uses the default gray text color instead.
*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 15.
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 titles are gray. This is wrong and it should be purple. Also, the active tab text is wrongly purple when it should be red.
!TabGroup-bad.png|thumbnail!
*Expected Result:*
The active tab title should be red and the inactive tab titles should be purple.
!TabGroup-Good.png|thumbnail!
*Cause:*
This is an iOS 15 breaking-changed caused by the introduction of the new native [scrollEdgeAppearance](https://developer.apple.com/documentation/uikit/uitabbaritem/3750913-scrolledgeappearance?language=objc) property. We must set the tab text appearance on this new property and the iOS 13 [standardAppearance](https://developer.apple.com/documentation/uikit/uitabbaritem/3198079-standardappearance?language=objc) property.
Attachments
| File | Date | Size |
|---|---|---|
| TabGroup-bad.png | 2021-10-08T02:10:20.000+0000 | 644527 |
| TabGroup-Good.png | 2021-10-08T02:10:20.000+0000 | 690402 |
PR (master): https://github.com/appcelerator/titanium_mobile/pull/13110
Backport PR: https://github.com/appcelerator/titanium_mobile/pull/13184