Titanium JIRA Archive
Titanium SDK/CLI (TIMOB)

[TIMOB-26837] iOS: "extendSafeArea" false should not allow status bar to overlap content on iOS 10 and older

GitHub Issuen/a
TypeImprovement
PriorityMedium
StatusClosed
ResolutionFixed
Resolution Date2020-01-07T14:38:03.000+0000
Affected Version/sRelease 6.3.0
Fix Version/sRelease 9.0.0
ComponentsiOS
Labelsbreaking-change, engArch, ios, statusbar
ReporterJoshua Quick
AssigneeVijay Singh
Created2019-02-19T22:57:25.000+0000
Updated2020-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

FileDateSize
extendSafeArea-iOS10.png2019-02-19T22:56:34.000+000098778
extendSafeArea-iOS11.png2019-02-19T22:56:34.000+000099879

Comments

  1. Vijay Singh 2019-02-20

    [~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.
  2. Joshua Quick 2019-02-20

    [~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" to false is so that app developers won't have to worry about the insets overlapping the content. Otherwise they might as well as set it to true and handle it themselves... which they're forced to do anyways on iOS 10.
  3. Vijay Singh 2019-12-14

    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.
  4. Samir Mohammed 2020-01-07

    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

JSON Source