Working with the Safe Area in SwiftUI

A SwiftUI view by default doesn't extend beyond the edges of the safe area. While that is convenient, there are times where this default behavior isn't what you want. In this episode, you learn how to override this default behavior.

What Is the Safe Area?

The safe area is that area of the application's window that is visible to the user. It takes into account elements that may obscure your application's user interface, such as the notch of the device or the home indicator at the bottom of devices without a physical home button.

It is convenient that a view by default honors the edges of the safe area. It ensures parts of the user interface aren't accidentally hidden. Let's explore how SwiftUI deals with the safe area and how you can extend a SwiftUI view beyond the edges of the safe area.

The Default Behavior

Fire up Xcode and create a project using the App template from the iOS > Application section. Name your project SafeArea and set Interface to SwiftUI. Choose a location to store the files for the project and hit Create.

Open ContentView.swift and remove the contents of the computed body property. Add a Color view and pass green as the color.

struct ContentView: View {
    var body: some View {
        Color(.green)
    }
}

The preview clearly shows where the safe area begins and ends. Because iPhone 13 has a notch at the top, the safe area ensures the Color view is pushed down so the notch doesn't obscure the top portion of the view. The same is true for the bottom. The home indicator at the bottom pushes the Color view up.

Let's switch to iPhone 8 to see the difference. Because iPhone 8 doesn't have a notch and has a physical home button, the safe area is different. The safe area takes the status bar at the top into account. There is no home indicator at the bottom so the Color view isn't pushed up at the bottom.

Overriding the Default Behavior

Let's switch back to iPhone 13. The default behavior is fine in most situations, but there are times where you want to override it. We can override the default behavior by applying the ignoresSafeArea modifier to the Color view.

struct ContentView: View {
    var body: some View {
        Color(.green)
            .ignoresSafeArea()
    }
}

The Color view ignores the safe area, spanning the entire window.

The ignoresSafeArea(_:edges:) method accepts two arguments, regions of type SafeAreaRegions and edges of type Edge.Set. The regions parameter defines which regions or portions of the safe area to ignore. An example is the keyboard. This is convenient if you're working with forms.

The edges parameter defines, as the name suggests, the edges of the safe area to ignore. Let's ignore the top edge of the safe area by passing [.top] as the second argument of the ignoresSafeArea(_:edges:) method.

struct ContentView: View {
    var body: some View {
        ZStack {
            Color(.green)
                .ignoresSafeArea(edges: [.top])
        }
    }
}

This is what that looks like.

What's Next?

The default behavior is fine for most use cases, but it is at times necessary to override it as you learned in this episode. The safe area is quite useful so it is advisable to respect it as much as possible. It makes that you don't need to worry about parts of your application's user interface being obscured.