0

I need to have a search box on the view but I don't want that ridiculous space at the top (see picture):

enter image description here

Normally I would use the modifiers

.navigationBarTitle("", displayMode: .inline)
.navigationBarHidden(true)

Both do nothing.

Here is an example:

struct ContentView: View {
  @State var searchText = ""

  var body: some View {
    NavigationView {
      List {
        NavigationLink(destination: Color(.red) ) {
          Text("aaa")
        }
        NavigationLink(destination: Color(.red) ) {
          Text("bbb")
        }
        NavigationLink(destination: Color(.red) ) {
          Text("ccc")
        }
      }
    }
    .searchable(text: $searchText, prompt: "search...")
    .navigationBarTitle("", displayMode: .inline)
    .navigationBarHidden(true)
}

Any other options?

NOTE: I am talking about the yellow region. I want to get rid of it.

7
  • This needs a minimal reproducible example. You likely have multiple navigation bars or something like that.
    – jnpdx
    Commented Sep 2, 2022 at 17:32
  • added an example
    – Duck
    Commented Sep 2, 2022 at 17:39
  • I'm not seeing the issue happening in your example.
    – jnpdx
    Commented Sep 2, 2022 at 17:43
  • jnpdx - he is talking about the WTH?? part at the top thats a huge gap at the top. Commented Sep 2, 2022 at 17:45
  • @easleyfixed Yes -- I understand that. The issue is not represented in the code when I run it.
    – jnpdx
    Commented Sep 2, 2022 at 18:00

1 Answer 1

2

You have to move the .navigationBarHidden(true) to the list:

struct ContentView: View {
    @State var searchText = ""
    
    var body: some View {
        NavigationView {
            List {
                NavigationLink(destination: Color(.red) ) {
                    Text("aaa")
                }
                NavigationLink(destination: Color(.red) ) {
                    Text("bbb")
                }
                NavigationLink(destination: Color(.red) ) {
                    Text("ccc")
                }
            }
            .navigationBarHidden(true)
        }
        .searchable(text: $searchText, prompt: "search...")
    }
}

From the documentation:

This modifier only takes effect when the modified view is inside of and visible within a NavigationView.

NOTE: navigationBarHidden(_:) will be deprecated in iOS 16. It will be replaced by toolbar(_:for:).

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.