[TIMOB-27847] iOS: Implement Tab tintColor and activeTintColor

GitHub Issue	n/a
Type	Improvement
Priority	Medium
Status	Reopened
Resolution	Unresolved
Affected Version/s	n/a
Fix Version/s	Release 9.0.3
Components	iOS
Labels	deprecation, parity
Reporter	Gary Mathews
Assignee	Gary Mathews
Created	2020-04-13T21:56:43.000+0000
Updated	2020-10-09T21:31:42.000+0000

Description

Implement ability to specify a tintColor or activeTintColor for tab icons. Currently, iOS has a number of properties that can be used to specify icon color. *TabGroup* - activeTabIconTint - tabsTintColor - tintColor - unselectedItemTintColor *Tab* - tintColor This change will +deprecate+ activeTabIconTint, tabsTintColor and unselectedItemTintColor in favor of tintColor and activeTintColor for parity with Android. *TEST CASE*

const tabGroup = Ti.UI.createTabGroup({
	// style: Ti.UI.Android.TABS_STYLE_BOTTOM_NAVIGATION
});

const tabWin_home = Ti.UI.createWindow({
   	title: 'Home',
   	backgroundColor: 'white'
});
const tab_home = Ti.UI.createTab({
   	icon: 'home.png',
   	title: 'Home',
   	titleColor: 'red',
   	activeTitleColor: 'blue',
   	tintColor: 'red',
   	activeTintColor: 'blue',
   	window: tabWin_home
});

const tabWin_chat = Ti.UI.createWindow({
	title: 'Chat',
	backgroundColor: 'white'
});
const tab_chat = Ti.UI.createTab({
	icon: 'chat.png',
	title: 'Chat',
	titleColor: 'red',
	activeTitleColor: 'blue',
	tintColor: 'red',
	activeTintColor: 'blue',
	window: tabWin_chat
});

tabGroup.addTab(tab_home);
tabGroup.addTab(tab_chat);
tabGroup.open();

Attachments

File	Date	Size
TIMOB-27847.png	2020-09-01T09:56:54.000+0000	1022092

Comments

Gary Mathews 2020-04-13

master: https://github.com/appcelerator/titanium_mobile/pull/11590
Samir Mohammed 2020-06-08

FR Passed for master 9_0_X. Waiting on Jenkins build.
Christopher Williams 2020-06-08

merged to 9_0_X for 9.0.3 target
Christopher Williams 2020-06-08

manually merged/rebased to master for 9.1.0 target

Samir Mohammed 2020-06-09

[~gmathews] Usinig the following SDK versions 9.0.3.v20200609060523 and SDK 9.1.0.v20200609061322. And using the following test case I am unable to see tint colours (Android seems fine).

   const tabGroup = Ti.UI.createTabGroup({
   	// style: Ti.UI.Android.TABS_STYLE_BOTTOM_NAVIGATION
   });
   
   const tabWin_home = Ti.UI.createWindow({
      	title: 'Home',
      	backgroundColor: 'white'
   });
   const tab_home = Ti.UI.createTab({
      	icon: 'home.png',
      	title: 'Home',
      	titleColor: 'red',
      	activeTitleColor: 'blue',
      	tintColor: 'red',
      	activeTintColor: 'blue',
      	window: tabWin_home
   });
   
   const tabWin_chat = Ti.UI.createWindow({
   	title: 'Chat',
   	backgroundColor: 'white'
   });
   const tab_chat = Ti.UI.createTab({
   	icon: 'chat.png',
   	title: 'Chat',
   	titleColor: 'red',
   	activeTitleColor: 'blue',
   	tintColor: 'red',
   	activeTintColor: 'blue',
   	window: tabWin_chat
   });
   
   tabGroup.addTab(tab_home);
   tabGroup.addTab(tab_chat);
   tabGroup.open();

*Test Environment*

   MacOS Catalina: 10.15.5 Beta
   Xcode: 11.4
   Java Version: 1.8.0_131
   Android NDK: 21.1.6273396-beta2
   Node.js: 10.16.3
   ""NPM":"5.0.0","CLI":"8.0.0""
   iphone 8 13.5 Sim

Samir Mohammed 2020-06-09

Oh [~gmathews] After altering the test case colours I can confirm I actually do in fact see Tab tintColor and activeTintColors being applied using SDK versions 9.0.3.v20200609060523 and SDK 9.1.0.v20200609061322. Test and other information can be found at: master: https://github.com/appcelerator/titanium_mobile/pull/11590
Saumya Rai 2020-09-01

[~gmathews] tintColor and activeTintColors are not being applied so reopening this ticket. SDK version: 9.1.0.v20200728082720 and 9.0.3.GA Screenshot for reference is TIMOB-27847.png
Michael Gangolf 2020-09-05
Caio Perdona 2020-10-09

Guys, this is broken in 9.2.0.GA as well. For Android, unselected tabs in dark mode appear black, and android's theme color stopped working as well. Also they're still not applying activeTintColors in runtime.

JSON Source