SwiftUI Full Cover of Screen With TabView Not Working

Question

I am attempting to cover the entire screen (iPad and iPhone) while using a TabView, but there always remains the bottom strip that is not covered.

struct CoverTestApp: App {
    var body: some Scene {
        WindowGroup {
            ContentView()
                .edgesIgnoringSafeArea(.all)
        }
    }
}

struct ContentView: View {
    var body: some View {
        TabView {
            ForEach(0...10, id: \.self) { page in
                ZStack {
                    Color(.blue).opacity(0.2)

                    Text("Page \(page)")
                }
            }
        }
        .tabViewStyle(.page)
    }
}

I have also used .fullScreenCover(isPresented:, content:), but the same issue remains... everything is covered apart from the bottom.

How can I get this to work and the app to cover the entire screen without white bar and the handle on the bottom?

Try adding .ignoresSafeArea() (not .edgesIgnoringSafeArea, because it's deprecated) to the TabView itself and to the page content. In your example, the content is the ZStack inside the ForEach. This should fix the bottom margin, but it also causes the page indicators to be lower. The post SwiftUI - TabView Safe Area addresses the issue of the indicators. — Benzy Neez
– Benzy Neez, Commented Jul 21 at 16:09
Works like a charm, but with a small change. I added the .ignoresSafeArea() to the TabView as recommended and additionally need to add .ignoresSafeArea() to the ContentView. If I omit either, it doesn't work - Could this be a bug? — Pete
– Pete, Commented Jul 22 at 9:44
it works for me without .ignoresSafeArea() on the ContentView. Tested on an iPhone 16 simulator running iOS 18.5. — Benzy Neez
– Benzy Neez, Commented Jul 22 at 9:54
You are right, I tested it again. Odd, seems like a bug and I cannot reconstruct it. Thanks for your perfect solution. — Pete
– Pete, Commented Jul 23 at 9:51

Anmol_Maheshwari · Accepted Answer · 2025-07-22 05:04:21Z

0

The padding at the bottom appears to be caused by the Home Indicator. However, I found a workaround by applying the padding to the background Color instead. Please see the updated code below. Screenshots are attached for your reference.

struct ContentView1: View {
    var body: some View {
        TabView {
            ForEach(0...10, id: \.self) { page in
                ZStack {
                    Color(.blue).opacity(0.2)
                        .padding(.bottom, -20)

                    Text("Page \(page)")
                }
                .edgesIgnoringSafeArea(.all)
            }
        }
        .tabViewStyle(.page)
    }
}

enter image description here
enter image description here

answered Jul 22 at 5:04

Anmol_Maheshwari

11 bronze badge

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

SwiftUI Full Cover of Screen With TabView Not Working

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related