Titanium

[TIMOB-28574] iOS: Window.setToolbar() wrongly uses a transparent background on iOS 15

GitHub Issuen/a
TypeBug
PriorityHigh
StatusClosed
ResolutionFixed
Resolution Date2021-11-04T21:09:51.000+0000
Affected Version/sn/a
Fix Version/sRelease 10.1.1
ComponentsiOS
LabelsToolbar, barColor, iOS
ReporterJoshua Quick
AssigneeJoshua Quick
Created2021-11-03T23:41:50.000+0000
Updated2021-11-17T10:57:44.000+0000

Description

*Summary:* The Window.setToolbar() method always shows a toolbar with a transparent background on iOS 15. It should show a gray background by default. It also wrongly ignores the "barColor" property. This issue was originally raised here... https://github.com/appcelerator/titanium_mobile/issues/13164 *Steps to reproduce:*

Build and run the below code on iOS 15.

Notice bottom toolbar background is transparent. _(Should be gray like nav bar.)_

Uncomment the "barColor" and "backgroundColor" lines below.

Re-build and run on iOS 15.

Notice bottom toolbar background is not orange. "barColor" was ignored.

const rootWindow = Ti.UI.createWindow({
//	barColor: "orange",
//	backgroundColor: "yellow",
	title: "Test App",
});
const button1 = Ti.UI.createButton({
	title: "Button 1",
	color: "red",
});
button1.addEventListener("click", () => { alert("Clicked: Button 1"); });
const button2 = Ti.UI.createButton({
	title: "Button 2",
});
button2.addEventListener("click", () => { alert("Clicked: Button 2"); });
rootWindow.setToolbar([button1, button2], {
	animated: true,
//	barColor: "orange",  // <- Ignored on iOS 15.
	tintColor: "purple",
});
rootWindow.add(Ti.UI.createLabel({ text: "iOS setToolBar() Test" }));
const navigationWindow = Ti.UI.createNavigationWindow({
	window: rootWindow,
});
navigationWindow.open();
*Result:* The below screenshots are from iOS 15. Bottom toolbars always wrongly have transparent backgrounds. !ToolbarDefault-iOS15.png|thumbnail! !ToolbarColor-iOS15.png|thumbnail! *Expected Result:* The below screenshots are from iOS 14. This is what it should look like. !ToolbarDefault-iOS14.png|thumbnail! !ToolbarColor-iOS14.png|thumbnail! *Note:* This looks like a similar iOS 15 issue as ticket [TIMOB-28505] where the bottom TabGroup bar was wrongly transparent as well. Apple added a new native scrollEdgeAppearance property that we'll need to leverage.

Attachments

FileDateSize
ToolbarColor-iOS14.png2021-11-03T23:35:26.000+0000661583
ToolbarColor-iOS15.png2021-11-03T23:35:26.000+0000804766
ToolbarDefault-iOS14.png2021-11-03T23:38:18.000+0000884213
ToolbarDefault-iOS15.png2021-11-03T23:38:18.000+0000815824

Comments

  1. Joshua Quick 2021-11-04 PR (master): https://github.com/appcelerator/titanium_mobile/pull/13165
  2. Ewan Harris 2021-11-17 Backport PR: https://github.com/appcelerator/titanium_mobile/pull/13185

JSON Source