SwiftUI NavigationView remove white space

Question

I have a HomeView

NavigationView {
    ZStack {
        VStack {
             NavigationLink(destination: ProfileView()) {
                 if session.userInSession?.activated != 1 {
                     completionText(message: "Complete Your Profile")
                 } else {
                     completionText(message: "Edit Your Profile")
                 }
             }
        }
    }
}

My ProfileView is not wrapped in a navigation view nor has a bar title:

VStack {
    ScrollView(showsIndicators: false) {
        ...
    }
}

But my ProfileView is also accessible from my SettingView

NavigationView {
    VStack(alignment: .leading) {
        List {
            NavigationLink(destination: ProfileView()) {
            }
        }
    }
}

When I access my ProfileView from the setting screen, it displays fine. But when I access it from my HomeView it creates white space at the top:

When I go through Settings its fine:

How can I remove this white space above?

score 10 · Accepted Answer · edited Aug 23 '22 at 09:55

10

It looks like your HomeView/s NavigationView has .navigationBarTitleDisplayMode(.large) or automatic, which is by default .large, but your SettingView has .navigationBarTitleDisplayMode(.inline) (taking into account divider below < Setting), so you see different height of title bars.

Of course it is assumption due not absent of detailed code, but possible solution to make it same would be add explicit mode for ProfileView, eg:

VStack {
   ScrollView(showsIndicators: false) {
   }
}.navigationBarTitleDisplayMode(.inline)     // << here !!

edited Aug 23 '22 at 09:55

Martijn Pieters

1,048,767
296
4,058
3,343

answered Jul 09 '20 at 16:32

Asperi

228,894
20
464
690

but how to handle for below iOS 14 ? – Daniel Wijono May 23 '22 at 15:47
@DanielWijono `.navigationBarTitle("Title", displayMode: .inline)` – Asperi May 23 '22 at 15:49

score 0 · Answer 2 · answered Jul 09 '20 at 16:16

This space is probably an empty title of your NavigationView.

You can try hiding your navigation bar title:

NavigationView {
    ZStack {
        ...
    }
    .navigationBarTitle("")
    .navigationBarHidden(true)
}

As a test try setting .navigationBarTitle("Some title") and see if you still see this empty space or if it's replaced by Some title text.

SwiftUI NavigationView remove white space

2 Answers2