Safe Area

Safe Area is used to ensure that the elements of the your Screen display correctly on devices with notches and UI elements which may overlap the app content. Those items include:

• Physical notches
• Status bar overlay
• Home activity indicator on iOS
• Navigation bar on Android

The area not overlapped by such items is referred to as "Safe Area" and is calculated based on the device the app is running on.

📘

Safe Area View should usually be enabled if you've hidden the header from the Screen's parent navigator within the Navigation config

How to Use

Safe Area is applied to Screens from a Screen's Config panel and there are props to control all or individual insets.