[TIMOB-26837] iOS: "extendSafeArea" false should not allow status bar to overlap content on iOS 10 and older
GitHub Issue | n/a |
---|---|
Type | Improvement |
Priority | Medium |
Status | Closed |
Resolution | Fixed |
Resolution Date | 2020-01-07T14:38:03.000+0000 |
Affected Version/s | Release 6.3.0 |
Fix Version/s | Release 9.0.0 |
Components | iOS |
Labels | breaking-change, engArch, ios, statusbar |
Reporter | Joshua Quick |
Assignee | Vijay Singh |
Created | 2019-02-19T22:57:25.000+0000 |
Updated | 2020-01-07T14:38:03.000+0000 |
Description
*Summary:*
When setting
Ti.UI.Window
property "extendSafeArea" to false
, Titanium will layout the windows content so that it lies within the bounds of the device's insets (such as iPhoneX's notch, home indicator, and rounded corners). This prevents the window's content from being overlapped.
On iOS 11 and higher, the top translucent status bar is considered a top inset and Titanium will prevent it from overlapping the window's content. On iOS 10 and older OS versions, the top status bar overlaps the window's content
This is an inconsistency. The idea behind setting "extendSafeArea" to false
is to avoid having the Titanium app developer from laying-out the UI themselves via "safeAreaPadding" to avoid overlap... as well as avoid as making assumptions about the top status bar height and hard-coding the value to "20dp".
*Steps to reproduce:*
Build and run the below code on iOS 10.
Notice that the app's label is overlapped by the top status bar.
Run the same app on iOS 11.
Notice that the app's label is below the status bar. It is not overlapped.
var window = Ti.UI.createWindow({
layout: "vertical",
extendSafeArea: false,
});
window.add(Ti.UI.createLabel({ text: "Hello World" }));
window.open();
*Result on iOS 10:*
!extendSafeArea-iOS10.png|thumbnail!
*Result on iOS 11:*
!extendSafeArea-iOS11.png|thumbnail!
Attachments
File | Date | Size |
---|---|---|
extendSafeArea-iOS10.png | 2019-02-19T22:56:34.000+0000 | 98778 |
extendSafeArea-iOS11.png | 2019-02-19T22:56:34.000+0000 | 99879 |
[~jquick] Property 'extendSafeArea' is for iOS 11+ only. And if this property is false, it excludes status bar from safe area. This is same as native iOS behaviour.
[~vijaysingh], I'm saying this is a usability issue. Look at it from an app developer's perspective where they're trying to make a "portable" app that works on both Android and iOS for all OS versions. When setting "extendSafeArea" to
false
, Titanium will guarantee that the insets do not overlap the content on Android and iOS 11+... except for older versions of iOS where app developers are forced to write special code and add "20dp" to the top of their layout. Meaning that the developer has to check the platform and OS version to handle this special case. This is a pain to deal with. The screenshots I've posted above are a good example of this discrepancy. I already know how it works natively on Apple's end, but that doesn't mean that's how it should work in Titanium. The whole point of setting "extendSafeArea" tofalse
is so that app developers won't have to worry about the insets overlapping the content. Otherwise they might as well as set it totrue
and handle it themselves... which they're forced to do anyways on iOS 10.PR - https://github.com/appcelerator/titanium_mobile/pull/11396 @QE - Apart from test case mentioned in ticket, please verify test cases from TIMOB-26461 also.
Closing ticket, fix verified in SDK version
9.0.0.v20200103081513
. Test and other information can be found at: https://github.com/appcelerator/titanium_mobile/pull/11396