swiftuitabview

SwiftUI - NavigationStack displayed incorreclty when embedded in TabView with page style


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":

enter image description here

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.


Solution

  • 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!