Titanium

[TIMOB-28551] iOS: TabGroup icons are tinted wrong on iOS 12 and older

GitHub Issuen/a
TypeBug
PriorityMedium
StatusClosed
ResolutionFixed
Resolution Date2021-11-17T10:51:21.000+0000
Affected Version/sn/a
Fix Version/sRelease 10.1.1
ComponentsiOS
LabelsTabGroup, iOS, icon, tintColor
ReporterJoshua Quick
AssigneeJoshua Quick
Created2021-10-08T02:32:00.000+0000
Updated2021-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

FileDateSize
TabGroup-Bad.png2021-10-08T02:31:40.000+0000713636
TabGroup-Good.png2021-10-08T02:31:40.000+0000905236

Comments

  1. Joshua Quick 2021-10-08 PR (master): https://github.com/appcelerator/titanium_mobile/pull/13110
  2. Joshua Quick 2021-11-13 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.
  3. Joshua Quick 2021-11-13 This fixes the above mentioned regression... PR (master): https://github.com/appcelerator/titanium_mobile/pull/13176
  4. Ewan Harris 2021-11-17 Backport PR: https://github.com/appcelerator/titanium_mobile/pull/13184
  5. Ewan Harris 2021-11-17 Backport PR for the regression fix: https://github.com/appcelerator/titanium_mobile/pull/13186

JSON Source