SafeAreaView

class: SJUIView (UIKit) / Native SwiftUI SafeArea handling inherits: View

Platform Support

• ✅ UIKit: Full support (Inherits from SJUIView with safe area handling)
• ✅ SwiftUI: Full support (Native safe area with customizable edges)

Overview

SafeAreaView is a specialized container that automatically respects the device's safe area insets. Unlike regular View, SafeAreaView ensures content is not obscured by system UI elements like the status bar, navigation bar, tab bar, or notch areas on newer devices.

Key Differences from View

• SafeAreaView: Respects safe area bounds by default
• View: Ignores safe area and can extend content under system UI

Attributes for SafeAreaView

SafeAreaView inherits all attributes from View with the following additions:

attribute name	UIKit	SwiftUI	type in json	details	remarks
safeAreaInsetPositions	✅	✅	array	Controls which edges apply safe area insets: "top", "bottom", "leading", "trailing", "all". Default: ["all"]
All View attributes	✅	✅	-	SafeAreaView inherits all attributes from View	See View

Usage Examples

Basic SafeAreaView

{
  "type": "SafeAreaView",
  "id": "main_container",
  "width": "matchParent",
  "height": "matchParent",
  "background": "#FFFFFF",
  "child": [
    {
      "type": "Label",
      "text": "This content respects safe area"
    }
  ]
}

Custom Safe Area Edges (SwiftUI)

{
  "type": "SafeAreaView",
  "id": "custom_safe_area",
  "safeAreaInsetPositions": ["top", "bottom"],
  "child": [
    {
      "type": "View",
      "background": "#007AFF",
      "child": [
        {
          "type": "Label",
          "text": "Only top and bottom safe areas applied"
        }
      ]
    }
  ]
}

ScrollView Inside SafeAreaView

{
  "type": "SafeAreaView",
  "child": [
    {
      "type": "Scroll",
      "contentInsetAdjustmentBehavior": "never",
      "child": [
        {
          "type": "View",
          "orientation": "vertical",
          "child": [
            {
              "type": "Label",
              "text": "Scrollable content within safe area"
            }
          ]
        }
      ]
    }
  ]
}

Platform-Specific Behavior

UIKit

• SafeAreaView uses safeAreaLayoutGuide to constrain content
• Automatically adjusts for device orientation changes
• Compatible with all iOS devices including those with notches

SwiftUI

• Maps to SwiftUI's native safe area handling using .edgesIgnoringSafeArea() modifier
• Dynamic mode and Static mode both respect safe area consistently
• Supports customizable edge configuration with safeAreaInsetPositions

When to Use SafeAreaView

Use SafeAreaView when:

• Building the root container of a screen
• Content should not be obscured by system UI
• Creating forms, lists, or readable content
• Standard app layouts that follow iOS design guidelines

Use regular View when:

• Creating full-screen backgrounds or images
• Building custom navigation or tab bars
• Implementing edge-to-edge designs
• Content intentionally extends under system UI

Migration Guide

From View to SafeAreaView

Simply change the type from "View" to "SafeAreaView":

Before:

{
  "type": "View",
  "id": "root",
  "width": "matchParent",
  "height": "matchParent"
}

After:

{
  "type": "SafeAreaView",
  "id": "root",
  "width": "matchParent",
  "height": "matchParent"
}

Best Practices

1. Use as Root Container: Make SafeAreaView the root container of your screens
2. Combine with ScrollView: When using ScrollView, wrap it in SafeAreaView for proper inset handling
3. Custom Edges: In SwiftUI, customize which edges respect safe area based on your design needs
4. Consistent Behavior: SafeAreaView ensures consistent layout across all iOS devices

Related Components

• View - Base container without safe area handling
• Scroll - Scrollable container that can be used within SafeAreaView