4

I want to have horizontal paging with navigation bars on each page. Going with TabView, there is an issue in combination with page style when nesting NavigationStack. Let me show you an example.

The following code works but uses tabs.

var body: some View {
  TabView(selection: $selectedTab) {
    NavigationStack {
      List {
        Text("Page 1")
      }
      .tag(LandingPage.activity)
      .navigationTitle("Title")
    }
    .tabItem {
      Text("Tab 1")
    }
    NavigationStack {
      List {
        Text("Page 2")
      }
      .tag(LandingPage.activity)
      .navigationTitle("Title 2")
    }
    .tabItem {
      Text("Tab 2")
    }
  }.tabViewStyle(.automatic)
}

enter image description here

Now switching tabViewStyle to "page", it renders weird.

var body: some View {
  TabView(selection: $selectedTab) {
    NavigationStack {
      List {
        Text("Page 1")
      }
      .tag(LandingPage.activity)
      .navigationTitle("Title")
    }
    NavigationStack {
      List {
        Text("Page 2")
      }
      .tag(LandingPage.activity)
      .navigationTitle("Title 2")
    }
  }.tabViewStyle(.page)
}

enter image description here

Does anyone have any experience with such setup?

1
  • Hi, were you able to find a solution to this? Thank you Apr 2 at 1:18

0

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.