SwiftUI - Remove space over navigation title

Question

Is there a way to remove extra space over navigation title (scribbled it in Red in below screenshot). I am working with iOS 15.

Code:

import SwiftUI
import Foundation

struct ContentView: View {
    let names = ["Holly", "Josh", "Rhonda", "Ted"]
    @State private var searchText = ""
    
    /// A site name filter phrase entered by the user.
    @State private var query: String = ""
    
    var body: some View {
        VStack {
            NavigationView {
                VStack {
                    List {
                        ForEach(searchResults, id: \.self) { name in
                            Text(name)
                        }
                    }
                }
                .searchable(
                    text: $query,
                    placement: .navigationBarDrawer(displayMode: .always),
                    prompt: "search"
                )
                .navigationTitle("Explore")
                .background(Color.gray)
            }
            Spacer()
        }
        .frame(maxWidth: .infinity, maxHeight: .infinity)
        .background(Color.gray)
    }
    
    var searchResults: [String] {
        if searchText.isEmpty {
            return names
        } else {
            return names.filter { $0.contains(searchText) }
        }
    }
}

For a large title, that is by design. If you don't want the space, you can use `.navigationBarTitleDisplayMode(.inline)`, but the title would be smaller. Otherwise you have to roll your own, I think. — Sweeper, Jul 12 '23 at 01:34
Ah ok. I tried... setting ".navigationBarTitleDisplayMode(.inline)" did remove the space, but the title moves in center. I guess I will have roll on my own and maybe create a custom search bar/text field with custom list and custom title. As it is in between search bar and list, I have to add a horizontally scrolling list of items, which I am unsure if I can achieve with this approach. — tech_human, Jul 12 '23 at 01:40

Sweeper · Accepted Answer · 2023-07-12T02:18:52.597

1

For a large title, that is by design. If you don't want the space, you can use .navigationBarTitleDisplayMode(.inline), but the title would be smaller.

You would need to create your own views if you want a big title, and no space above it.

Though this is a bit hacky, one way I came up with is putting the title in the toolbar:

.toolbar(content: {
    ToolbarItem(placement: .navigationBarLeading) {
        Text("Explore")
            .bold()
            .font(.largeTitle)
    }
})
.padding(.top, -20) // removes the extra top padding added by not having a navigation title

Of course, doing it this way loses the "title turns small when scrolling down" feature.

Result:

edited Jul 12 '23 at 02:18

answered Jul 12 '23 at 02:03

Sweeper

213,210
22
193
313

Hmm... This works great. I should be good without turning the title to small during scroll. I was also able to add a horizontal scrolling list between search bar and vertical list of names. And I wanted a button on the extreme right of "Explore", so was able to use "navigationBarTrailing" ToolBarItem for it. Thanks @Sweeper!!! – tech_human Jul 12 '23 at 03:16

SwiftUI - Remove space over navigation title

1 Answers1