Create View Beyond Safe Area in SwiftUI

By default, each view is restricted by a safe area.

The safe area helps us to create views that won’t overlap navigation bar, toolbar or any other similar view.

Let’s say you want to create a Color view. By default, it takes all possible space but still, it’s restricted.

var body: some View {
ZStack {
    Color.green
    Text(“SmashSwift”)
    }
}

There is option to ignore this limitation with .edgesIgnoringSafeArea() modifier.

var body: some View {
    ZStack {
        Color.green
            .edgesIgnoringSafeArea(.all)
        Text(“SmashSwift”)
    }
}

.edgesIgnoringSafeArea takes one of the following parameters:

  • all
  • bottom
  • top
  • leading
  • trailing
  • horizontal
  • vertical