Hide top space in SwiftUI's NavigationView

Question

I'm having trouble to remove the top space inside a NavigationView.

You can see that in the first screen, I have the "Job filters" title, which is later shown in the back button when for example tapping on the Company picker, but the space that the title used to occupy is now empty. How can this be removed?

The body's var of the view is:

var body: some View {
        NavigationView {
            Form {
                ...
                ...
                Picker("FilterView.Company".localized, selection: $draft.company) {
                    SearchBar(searchText: $searchText)
                    Text("FilterView.Company.AllCompanies".localized).tag(nil as Company?)
                    if searchText.isEmpty {
                        ForEach(companiesFetchedResults) {
                            Text($0.companyName).tag($0 as Company?)
                        }
                    } else {
                        ForEach(companiesFetchedResults.filter {
                            $0.companyName.contains(searchText)
                        }) {
                            Text($0.companyName).tag($0 as Company?)
                        }
                    }
                }
            }
            .navigationBarTitle("FilterViewTitle".localized)
            .toolbar {
                ToolbarItem(placement: .navigationBarLeading) { cancel }
                ToolbarItem(placement: .navigationBarTrailing) { done }
            }
        }
    }

Edit

As suggested by @Stefan I've managed to extract the Form into a separate view, but it still doesn't work:

FilterView:

var body: some View {
        NavigationView {
            FormView(draft: $draft)
                .navigationBarTitle("FilterViewTitle".localized)
                .toolbar {
                    ToolbarItem(placement: .navigationBarLeading) { cancel }
                    ToolbarItem(placement: .navigationBarTrailing) { done }
                }
        }
    }

FormView:

var body: some View {
        VStack {
            Form {
                ...
                ...
                Picker("FilterView.Company".localized, selection: draft.company) {
                    SearchBar(searchText: $searchText)
                    Text("FilterView.Company.AllCompanies".localized).tag(nil as Company?)
                    if searchText.isEmpty {
                        ForEach(companiesFetchedResults) {
                            Text($0.companyName).tag($0 as Company?)
                        }
                    } else {
                        ForEach(companiesFetchedResults.filter {
                            $0.companyName.contains(searchText)
                        }) {
                            Text($0.companyName).tag($0 as Company?)
                        }
                    }
                }
            }
        }.navigationBarTitleDisplayMode(.inline)
    }

I tried, setting this both at the `Form` and the `Picker` level, but the result is that only the first screen shows the tittle (Job filters) in inline mode, but the second screen remains the same — noloman, May 23 '22 at 10:23
This is Large title area, if we use it we cannot remove it, but we can fill it with other title like in https://stackoverflow.com/a/63591598/12299030. Alternate is to not use large title mode. — Asperi, May 23 '22 at 10:36
but I'm not changing it on the file; the only one I'm using is `.navigationBarTitle("FilterViewTitle".localized)` as seen in the codde that I pasted above — noloman, May 23 '22 at 10:41

Stefan · Answer 1 · 2022-05-23T10:23:12.327

3

You need to explicitly set navigationBarTitleDisplayMode to inline, which should solve your problem:

.navigationBarTitleDisplayMode(.inline)

EDIT:

Why is there a huge big gap between the back button and the starting element of the view?

TL;DR: Do not embed pushed views in the NavigationView

edited May 23 '22 at 10:23

answered May 23 '22 at 10:19

Stefan

1,283
15
33

it doesn't fix it: it just shows the "Job filters" in an inline mode, but the second screen remains the same :( – noloman May 23 '22 at 10:20
Ah I see. You've embedded it in NavigationView. Just extract the pushed view out of NavigationView: https://stackoverflow.com/questions/72085494/why-is-there-a-huge-big-gap-between-the-back-button-and-the-starting-element-of/72085758#72085758 – Stefan May 23 '22 at 10:22
still, same result when extracting the `Form` to another view and using the `.navigationBarTitleDisplayMode(.inline)` – noloman May 23 '22 at 10:38
@noloman can you share your updated code for the filter view? – Stefan May 23 '22 at 10:41
I just updated the original question, thanks! – noloman May 23 '22 at 10:48
@noloman pls try this ```var body: some View { FormView(draft: $draft) .navigationBarTitle("FilterViewTitle".localized) .toolbar { ToolbarItem(placement: .navigationBarLeading) { cancel } ToolbarItem(placement: .navigationBarTrailing) { done } } } ``` – Stefan May 23 '22 at 10:49
@noloman so basically that you don't embed anything inside of a NavigationView in a pushed view – Stefan May 23 '22 at 10:49
if there's no `NavigationView` this doesn't work at all. I want to keep the title in the first screen, which needs a `NavigationView`. Also, without a `NavigationView`, clicking on any picker doesn't work – noloman May 23 '22 at 10:53
Yes, you leave the NavigationView in the root view, but do not use it in the pushed view – Stefan May 23 '22 at 10:54
ok I'm not sure anymore what you consider the root view: `FilterView` is being called from another View, in the form of a sheet: ```var filter: some View { Button { self.showFilter = true } label: { Image(systemName: "line.horizontal.3.decrease.circle") .renderingMode(.original) } .sheet(isPresented: $showFilter) { FilterView($jobFilter, categoriesViewModel, jobsViewModel) } }``` so I'm not sure if this is the root view as you call it – noloman May 23 '22 at 10:56
if you refer to `FilterView` as the root view, you can see that I'm using a `NavigationView` there but not in the `FormView` – noloman May 23 '22 at 10:58
The view that has title "Jobs filters" should be embedded in the NavigationView, that is what I consider a root view in this case. Pushed view(FilterView) should not contain NavigationView as it will inherit it from the view it is pushed from – Stefan May 23 '22 at 10:58
Let us [continue this discussion in chat](https://chat.stackoverflow.com/rooms/244953/discussion-between-noloman-and-stefan). – noloman May 23 '22 at 11:00

Hide top space in SwiftUI's NavigationView

Edit

1 Answers1