How to make SwiftUI view fullscreen?

Question

As the title already says I'm trying to make a view fullscreen (make it extend over the SafeArea ), but SwiftUI seems to always align views to the safeArea .

After researching this for a while I found .edgesIgnoringSafeArea(.all) which seems like a pretty straightforward way to do it. The problem is that it doesn't work. The view still isn't full screen. Here is some example code:

struct ContentView : View {
    var body: some View {
        Text("Test")
            .frame(minWidth: 0, maxWidth: .infinity, minHeight: 0, maxHeight: .infinity)
            .edgesIgnoringSafeArea(.all)
            .background(Color.red)
    }
}

Answer 1

Just swap the ..background(Color.red) and .edgesIgnoringSafeArea(.all). And it will work perfectly.

struct ContentView : View {

    var body: some View {
        Text("Test")
            .frame(minWidth: 0, maxWidth: .infinity, minHeight: 0, maxHeight: .infinity)
            .background(Color.red)
            .edgesIgnoringSafeArea(.all)

    }
}

Answer 2

The Augmented Reality App with SwiftUI also has a problem in entering full screen. (Xcode 12.3, SwiftUI 5.3)

struct ContentView : View {
    var body: some View {
        return ARViewContainer().edgesIgnoringSafeArea(.all)
    }
}

The code above is from the AR template. However, it doesn't work.

The solution is tricky: you have to set "LaunchScreen.storyboard" as "Launch Screen File" in "[yourTarget] -> General -> App Icons and Launch Images". If there is no "LaunchScreen.storyboard" in the project, it can still work by entering "LaunchScreen" in that field.

I found a similar discussion on Apple forum that explains the potential reason of failure:

If that isn't set properly, then it sounds like your app is launching into a compatibility mode which is letterboxing your app.

Answer 3

According to Apple documentation from iOS 14 you can use fullScreenCover(item:onDismiss:content:)

And here is sample code:

struct ContentView: View {
    @State private var isFullScreen = false
    var body: some View {
        ZStack{
        Color.yellow.edgesIgnoringSafeArea(.all)
        Text("Hello, FullScreen!")
            .padding()
            .background(Color.blue)
            .foregroundColor(.green)
            .cornerRadius(8)
            .fullScreenCover(isPresented: $isFullScreen) {
                FullScreen(isFullScreen: $isFullScreen)
            }
            .onTapGesture {
                isFullScreen.toggle()
            }
    }
    }
}

struct FullScreen: View {
    @Binding var isFullScreen: Bool
    
    var body: some View {
        ZStack {
            Color.red.edgesIgnoringSafeArea(.all)
            Text("This is full screen!!")
                .onTapGesture {
                    self.isFullScreen.toggle()
                }
            
        }
    }
}

Answer 4

ZStack {
                    Text("Test")
                    Rectangle()
                        .fill(.clear)
                        .background(Color.clear)
                        .edgesIgnoringSafeArea(.all)
                        .contentShape(Rectangle())
                        .onTapGesture {
                            //tap action
                        }
                }