[TIMOB-28574] iOS: Window.setToolbar() wrongly uses a transparent background on iOS 15
GitHub Issue | n/a |
---|---|
Type | Bug |
Priority | High |
Status | Closed |
Resolution | Fixed |
Resolution Date | 2021-11-04T21:09:51.000+0000 |
Affected Version/s | n/a |
Fix Version/s | Release 10.1.1 |
Components | iOS |
Labels | Toolbar, barColor, iOS |
Reporter | Joshua Quick |
Assignee | Joshua Quick |
Created | 2021-11-03T23:41:50.000+0000 |
Updated | 2021-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
File | Date | Size |
---|---|---|
ToolbarColor-iOS14.png | 2021-11-03T23:35:26.000+0000 | 661583 |
ToolbarColor-iOS15.png | 2021-11-03T23:35:26.000+0000 | 804766 |
ToolbarDefault-iOS14.png | 2021-11-03T23:38:18.000+0000 | 884213 |
ToolbarDefault-iOS15.png | 2021-11-03T23:38:18.000+0000 | 815824 |
PR (master): https://github.com/appcelerator/titanium_mobile/pull/13165
Backport PR: https://github.com/appcelerator/titanium_mobile/pull/13185