There appears to be a visual bug when using .searchable in a child view that’s pushed via NavigationLink inside a NavigationStack. Specifically, the search bar appears briefly in the wrong position (or animates in an unexpected way) during the transition to the child view.
This issue does not occur when using NavigationView instead of NavigationStack.
Steps to Reproduce:
Create a TabView with a single tab containing a NavigationStack.
Push from a ContentView to a DetailsView using NavigationLink.
Add a .searchable modifier to both the ContentView and DetailsView.
Run the app and tap a row to navigate to the details view.
Expected Behavior
The search bar in the DetailsView should appear smoothly and in the correct position as the view transitions in, just like it does under NavigationView.
Actual Behavior
When the DetailsView appears, the search bar briefly animates or appears in the wrong location before settling into place. This results in a jarring or buggy visual experience.
Feedback: FB17031212
Here is a reddit thread discussing the issue as well https://www.reddit.com/r/SwiftUI/comments/137epji/navigation_stack_with_search_bar_has_a_bug_and_a/
I hope that an Apple engineer can get this fixed soon. It's frustrating to have new APIs come out with the old deprecated yet there are still obvious bugs two years later.
import SwiftUI
public enum Tab {
case main
}
struct AppTabNavigation: View {
@State private var tabSelection = Tab.main
var body: some View {
TabView(selection: $tabSelection) {
NavigationStack {
ContentView()
}
.tag(Tab.main)
.tabItem {
Label("Main", systemImage: "star")
}
}
}
}
struct ContentView: View {
@State private var searchText = ""
var body: some View {
List(0..<100) { i in
NavigationLink("Select \(i)", value: i)
}
.navigationTitle("Main")
.searchable(text: $searchText)
.navigationDestination(for: Int.self) { i in
DetailsView(i: i)
}
}
}
struct DetailsView: View {
@State private var searchText = ""
let i: Int
// MARK: - Body
var body: some View {
List {
ForEach(0..<10, id: \.self) { i in
Text("Hello \(i)")
}
}
.navigationTitle(i.formatted())
.searchable(text: $searchText)
}
}
Topic:
UI Frameworks
SubTopic:
SwiftUI