[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