Safe Area

Apple suggests that we do not to place any controls outside safe area hence in iOS 11 you have to obey safe area rules when you position views in iOS application. Ui editor supports this option.


Assume you have a page with a MapView instance in it with following properties:

If SafeArea Enabled property of page is set on property panel, page will have extra padding values for safe area. Remember these values won't affect properties panel.

  • If SafeArea Enabled is set, padding values calculated by safe area and values from theme are added.

  • For example, let's assume that SafeArea Enabled is set to true and paddingTop is set to 10 of page. And extra paddingTop comes from safe area as 20. Then page will be rendered as if it has paddingTop as 30. Same applies with other directions.

Absolute Components

Recall that, if children of page have positionType of ABSOLUTE, their position won't be affected by any padding values of page. So, designer must be aware of it.

Safe are disabled vs enabled (portrait)

Safe are disabled vs enabled (landscape)