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.
Property | Description |
---|---|
Safe Area View | When enabled, Safe Area is calculated for all sides of the device |
Top Area View | When enabled, Safe Area is calculated for the top side of the device |
Bottom Area View | When enabled, Safe Area is calculated for the bottom of the device |
Left Area View | When enabled, Safe Area is calculated for the left side of the device |
Right Area View | When enabled, Safe Area is calculated for the right side of the device |
Updated 3 days ago