SwiftUI full-screen image above safe areas

Question

I am trying to make an image fill the screen (including the safe area under under the notch of the iPhone X series and near the app switcher bar).

import SwiftUI

struct ContentView : View {
    var body: some View {
        ZStack() {
            Image("background")
                .resizable()
                .aspectRatio(UIImage(named: "background")!.size, contentMode: .fill)
            Text("SwiftUI Example")
                .font(.largeTitle)
                .background(Color.black)
                .foregroundColor(.white)
        }
    }
}

The above code produces the following result, which still has the white bars on the top and bottom. Is there a way to make the image truly fill the screen?

Answer 1

SwiftUI by default takes the safe areas into consideration. In order to get the desired result, you must inform SwiftUI that it can ignore the safe areas with the following statement appended to the last object:

.edgesIgnoringSafeArea(.all)

This means that the new code will be:

ZStack() {
    Image("background")
        .resizable()
        .aspectRatio(UIImage(named: "background")!.size, contentMode: .fill)
    Text("SwiftUI Example")
        .font(.largeTitle)
        .background(Color.black)
        .foregroundColor(.white)
}.edgesIgnoringSafeArea(.all)