MobileUI LogoMobileUI

SafeArea on iOS

Learn how MobileUI observes the SafeArea

With iOS 11, Apple has introduced the SafeArea to let developers prevent their layout to render behind the notch. MobileUI supports the SafeArea since version 0.2.0 with some automatism to make it easy for you to support the feature.

Applying the SafeAreaMode

Each MobileUILayout has a SafeAreaMode that determines the automatic handling of the safe area by the layout. You can change this mode from your native code within the iOS app module by calling the setSafeAreaMode method on your MobileUILayout like exemplified below:

SafeAreaModes Overview

The default mode is SafeAreaMode.addPadding. The following table describes all modes and their effects on the layout:

SafeAreaMode.addPaddingSafe area margins are added as padding to the content view. SafeAreaMode.addPadding YES
SafeAreaMode.addMarginSafe area margins are added as margins to the content view. SafeAreaMode.addMargin
SafeAreaMode.none The layout will not take care of the safe area margins. SafeAreaMode.none