NavigationView adding top padding

Question

I have a very simple view, a background color and some text. But when I wrap it in a NavigationView I'm getting unwanted spacing at the top of the view. How can I eliminate this? (I want the Navigation as I will be adding NavigationLinks)

e.g.

var body: some View {
    NavigationView {
        ZStack(alignment: .leading) {
            Rectangle()
                .fill(
                    LinearGradient(
                        gradient: Gradient(colors: [.indigo, .purple]),
                        startPoint: .bottom,
                        endPoint: .top
                    )
                )
                .ignoresSafeArea()
            
            VStack {
                Text("Test")
                Spacer()
            }
        }
    }
}

Does this answer your question? [How to remove the default Navigation Bar space in SwiftUI NavigationView](https://stackoverflow.com/questions/57517803/how-to-remove-the-default-navigation-bar-space-in-swiftui-navigationview) — Kush Bhavsar, Jul 22 '22 at 17:18

score 5 · Answer 1 · answered Jul 22 '22 at 03:27

5

You can fix this by using .navigationBarHidden(true).

However, .navigationBarHidden(true) will be deprecated in the new version of iOS, so you can use .toolbar(.hidden) instead.

answered Jul 22 '22 at 03:27

Steven-Carrot

2,368
2
12
37

score 2 · Accepted Answer · answered Jul 21 '22 at 21:07

2

The space is reserved for the title, so if you set the navigation bar title display mode to .inline, then it should reduce that space.

NavigationView {
    ZStack {
        /* ... */
    }
    .navigationBarTitleDisplayMode(.inline)
}

answered Jul 21 '22 at 21:07

Gavin Morrow

711
1
6
19

1

I fixed it with: .navigationBarHidden(true) – FlatDog Jul 21 '22 at 21:16

NavigationView adding top padding

2 Answers2