Titanium

[TIMOB-28550] iOS: TabGroup property "titleColor" is mishandled on iOS 15

GitHub Issuen/a
TypeBug
PriorityMedium
StatusClosed
ResolutionFixed
Resolution Date2021-10-15T11:08:36.000+0000
Affected Version/sn/a
Fix Version/sRelease 10.1.1
ComponentsiOS
LabelsTabGroup, iOS, tabs, tintColor
ReporterJoshua Quick
AssigneeJoshua Quick
Created2021-10-08T02:12:12.000+0000
Updated2021-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

FileDateSize
TabGroup-bad.png2021-10-08T02:10:20.000+0000644527
TabGroup-Good.png2021-10-08T02:10:20.000+0000690402

Comments

  1. Joshua Quick 2021-10-08 PR (master): https://github.com/appcelerator/titanium_mobile/pull/13110
  2. Ewan Harris 2021-11-17 Backport PR: https://github.com/appcelerator/titanium_mobile/pull/13184

JSON Source