SwiftUI .searchable in iOS 15 - .navigationBarDrawer(displayMode: .always)

Question

I want to achieve a Search Bar with the new .searchable modifier, with .navigationBarDrawer(displayMode: .always). But if I start the App, the default position of the Search Bar is already "scrolled".

But this is what I want to achieve at the startup of the App:

This is my code:

struct SearchView: View {
    @State var searchText = ""
    var body: some View {
        NavigationView {
            List {
                Text("Search Bar")
            }
            .navigationBarTitle("Search")
            .searchable(text: $searchText, placement: .navigationBarDrawer(displayMode: .always))
        }
    }
}

score 1 · Answer 1 · answered Jul 17 '23 at 16:24

I came across here as I had the same problem.

For me it worked (also iOS 15.7) when changing the order (or maybe the VStack around the list ‍♂️).

My code looks like the following:

// somewhere where the SearchView is used:
NavigationView {
    SearchView()
}

struct SearchView: View {
    @State var searchText = ""
    var body: some View {
        VStack {
            List {
                Text("Search Bar")
            }
        }
        .searchable(text: $searchText, placement: .navigationBarDrawer(displayMode: .always))
        .navigationBarTitleDisplayMode(.large)
        .navigationBarTitle("Search")
    }
}

RTXGamer · Answer 2 · 2021-06-30T08:43:29.113

0

Hacky Solution but it worked:

struct ContentView: View {
@State var searchText = ""
var body: some View {
    NavigationView {
        ZStack {
            Rectangle()
                .fill(Color.white)
                .frame(minWidth: 0, maxWidth: .infinity, minHeight: 0, maxHeight: 1)
            
            List {
                Text("Search Bar")
            }
        }
        .searchable(text: $searchText, placement:.navigationBarDrawer(displayMode: .always))
        
        .navigationBarTitle("Search", displayMode: .large)
    }
}

}

edited Jun 30 '21 at 08:43

answered Jun 27 '21 at 18:07

RTXGamer

3,215
6
20
29

1

Thank you for your answer! Unfortunately, the Navigation Bar Title doesn't change to inline when scrolling anymore. – X Æ A-12 Jun 30 '21 at 08:06
@XÆA-12 you can check now I've updated the answer. Initially, I thought you want a large title all the time. – RTXGamer Jun 30 '21 at 08:44
1

Nice, works perfectly. Although it is a bit hacky :) Do you know if this is on purpose from apple or just a bug? – X Æ A-12 Jun 30 '21 at 19:14
It only happens when you add searchable(text: to it. So it purposefully there for a reason, but don't know what it is. :) – RTXGamer Jul 01 '21 at 05:11

score 0 · Answer 3 · answered Feb 18 '23 at 17:00

If you're okay with using dependencies, here's a solution using SwiftUI-Introspect

struct SearchView: View {
    @State var searchText = ""
    let names: [String] = ["Joe", "Dylan", "Jim", "Andy"]

    var body: some View {
        NavigationView {
            List {
                ForEach(names, id: \.self) { name in
                    Text(name)
                }
            }
            .navigationBarTitle("Search")
            .searchable(text: $searchText, placement: .navigationBarDrawer(displayMode: .always))
            .introspectNavigationController { navigationController in
                navigationController.navigationBar.sizeToFit()
            }
        }
    }
}

Basically, I found the original UIKit answer from here and found that asking the navigationController to call sizeToFit() fixed the issue (in my testing). From the documentation, sizeToFit tells the navigation bar to resize itself to its own needs which is to have a large title.

I believe this was a SwiftUI bug in iOS 15 which is now fixed in iOS 16+ since this behavior no longer happens when using .navigationBarDrawer(displayMode: .always) with searchable.

SwiftUI .searchable in iOS 15 - .navigationBarDrawer(displayMode: .always)

3 Answers3