CODEWITHSUNDEEP
swiftuisearchable
Mark
Mark

Reputation: 18204

How to avoid the .searchable from appearing and disappearing?

I am having a lot of buggy behavior on .searchable, on iOS 16.1 (Xcode 14.1). As you can see in the screenshot below. When entering a view with a .searchable component it will overlap with the view in transition and then disappears.

enter image description here

I am trying to make the code as basic as possible.

struct ContentView: View {
    var body: some View {
        NavigationStack {
            List {
                NavigationLink {
                    Mailbox().navigationTitle("Inkomend")
                } label: { Label("Inkomend", systemImage: "tray") }
                NavigationLink {
                    Mailbox().navigationTitle("Verstuurd")
                } label: { Label("Verstuurd", systemImage: "paperplane") }
                NavigationLink {
                    Mailbox().navigationTitle("Prullenmand")
                } label: { Label("Prullenmand", systemImage: "trash") }
            }
            .navigationTitle("Postbussen")
            .refreshable {}
        }
    }
}

struct Mailbox: View {
    @State private var searchQuery: String = ""
    
    var body: some View {
        List {
            NavigationLink {
                Text("Detail")
            } label: {
                VStack(alignment: .leading) {
                    Text("Apple").font(.headline)
                    Text("Verify your account.")
                    Text("Fijn dat je deze belangrijke stap neemt om je account te verifiëren.").lineLimit(2).foregroundColor(.secondary)
                }
            }
        }
        .searchable(text: $searchQuery)
    }
}

enter image description here

Upvotes: 3

Views: 933

Answers (3)

Helder Pinto
Helder Pinto

Reputation: 31

In my case all I had to do is add placement to the searchable and it works fine with the NavigationStack:

 .searchable(
      text: $viewModel.searchText,
      placement: .navigationBarDrawer(displayMode: .always)
        )

Upvotes: 3

Gabriel Medina
Gabriel Medina

Reputation: 91

Like Latin Bhuva said, the new NavigationStack is not intended to be used in this way, a NavigationView would be more correct in this case.

struct ContentView: View {
var body: some View {
    NavigationView {
        List {
            NavigationLink {
                Mailbox().navigationTitle("Inkomend")
            } label: { Label("Inkomend", systemImage: "tray") }
            NavigationLink {
                Mailbox().navigationTitle("Verstuurd")
            } label: { Label("Verstuurd", systemImage: "paperplane") }
            NavigationLink {
                Mailbox().navigationTitle("Prullenmand")
            } label: { Label("Prullenmand", systemImage: "trash") }
        }
        .navigationTitle("Postbussen")
        .refreshable {}
    }
  }
}

Upvotes: 1

Jatin Bhuva
Jatin Bhuva

Reputation: 1874

Use NavigationView instead of NavigationStack.

Upvotes: 1

Related Questions