I have a view with a simple NavigationStack with the following code:
import SwiftUI
struct Parcels: View {
@Binding var searchText : String
var body: some View {
NavigationStack{
List{
some code here...
}
.listStyle(.plain)
.navigationTitle("Parcels")
.navigationBarTitleDisplayMode(.automatic)
}
.searchable(text: $searchText, prompt: "Search")
}
}
Everything works fine and the preview also looks fine. This view is embedded in a TabView with page style with the following code:
import SwiftUI
struct MainView: View {
@State private var selectedTab = 0
var body: some View {
TabView (selection: $selectedTab) {
//MARK: First View with code posted above
Parcels(searchText: $searchText)
.tabItem {
Label("Parcels", systemImage: "shippingbox.fill")
}.tag(0).sensoryFeedback(.success, trigger: selectedTab == 0)
//MARK: Second View
Settings()
.tabItem {
Label("Settings", systemImage: "gearshape.fill")
}.tag(1).sensoryFeedback(.success, trigger: selectedTab == 1)
}
.tabViewStyle(.page)
.indexViewStyle(.page(backgroundDisplayMode: .always))
}
}
The problem is how the NavigationStack ".toolbar" modifier of the view called "Parcels" looks in the preview of the view called "MainView":
Why is that so? Why isn't the NavigationStack displaying correctly? Also, the search bar isn't showing in the MainView.swift file (its correctly displayed in the Parcels.swift file). This happens only with the .tabViewStyle set on ".page".
Any suggestions? Thanks.
UPDATE: The NavigationStack is displayed correctly if I embed the TabView of the "MainView.swift" file in another NavigationStack. Point is that the title is always displayed as "inline" and the search bar keeps not showing.
I found a solution that works for my case. First, create your TabView, and then embed each subview into a navigation stack (see example code):
@State private var selectedTab = 0
var body: some View {
TabView(selection: $selectedTab){
NavigationStack{
FirstView()
}.tag(0)
NavigationStack{
SecondView()
}.tag(1)
...
}
Works like a charm!