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

Question

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.

Why do you set tabview style to page. This is may be the source of the problem. (And tabview should not be inside NavigationStack .) — Ptit Xav
– Ptit Xav, Commented Nov 2, 2023 at 18:53
I need my tabview to be in page style for UI/UX purposes. If I remove my TabView from the NavigationStack everything collapses on the left and right side of the screen as shown in the picture. — helloimbrando
– helloimbrando, Commented Nov 3, 2023 at 9:08

helloimbrando · Accepted Answer · 2024-04-03 06:22:25Z

1

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!

answered Apr 3, 2024 at 6:22

helloimbrando

6871 gold badge7 silver badges19 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

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

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related