How to Hide Navigation bar in SwiftUI

Sometimes there is some white space visible above your content in SwiftUI applications, even when you don’t set the navigation bar title. So this tutorial will guide you in hiding that above extra space.

We will be using:

• NavigationView
• NavigationBarHidden

Syntax:

.navigationBarHidden(true)

Now let’s say we have a simple view with a List and we have to hide the extra space or you can say the navigation bar space given above the List.

struct ContentView: View {
    var body: some View {
            List {
                Text("Sara")
                Text("Ali")
                Text("Samia")
            }
            .padding()
    }
}

So for doing that first we have to embed our code in NavigationView.

• NavigationView is the view that helps us to navigate to other views
• padding will add some space around the list view

struct ContentView: View {
    var body: some View {
        NavigationView{
            List {
                Text("Sara")
                Text("Ali")
                Text("Samia")
            }
            .padding()
        }
    }
}

Now luckily, SwiftUI has given us the modifier .navigationBarHidden which will hide that extra space or navigation bar space for us. All we have to do is set it to true like this.

struct ContentView: View {
    var body: some View {
        NavigationView{
            List {
                Text("Sara")
                Text("Ali")
                Text("Samia")
            }
            .padding()
            .navigationBarHidden(true)
        }
    }
}

One thing you have to keep in mind is this modifier, .navigationBarHidden should always be inside the NavigationView.

struct ContentView: View {
    var body: some View {
        NavigationView{
            List {
                Text("Sara")
                Text("Ali")
                Text("Samia")
            }
            .padding()
         }
        .navigationBarHidden(true) 
    }
}

Now, this code won’t work because the modifier is given outside the NavigationView.

and for iOS16 and above you can also use:

   .toolbar(.hidden, for: .navigationBar)

This will work the same as the .navigationBarHidden.

Due to some reason, SwiftUI also requires us to add the NavigationBarTitle for both of these modifiers, .navigationBarHidden(true) and .toolbar(.hidden, for: .navigationBar) to work properly.

So you can just add an empty string like this .navigationTitle("") in place of the title.

.navigationTitle("")

Here is the complete code for your reference.

import SwiftUI

struct ContentView: View {
    var body: some View {
        NavigationView{
            List {
                Text("Sara")
                Text("Ali")
                Text("Samia")
            }
            .padding()
            .navigationTitle("")
          //  .toolbar(.hidden, for: .navigationBar)
            .navigationBarHidden(true)
            
        }
   
    }
}

struct ContentView_Previews: PreviewProvider {
    static var previews: some View {
        ContentView()
    }
}