List inside TabView inside NavigationView breaks animation for Navigation Title

57 Views Asked by At

I want to have NavigationView starting with Welcome scene + TabView on the followup scene with List of items. I want NavigationView bar to coordinate with List scrolling in a "usual" way:

  • if scrolling down the list, Navigation Title should become smaller and centered + grey background should be used
  • if scrolling up to the top of the list, Navigation Title should become bigger and left-aligned + transparent background

So far I reviewed all recommendations given in similar posts: [1]StackOverflow, [2]Apple DevPortal. All recommendations fail to address this issue.

Visual representation of current issue:

enter image description here

Code below has the issue with Navigation Title when TestView is opened and List is scrolled:

import SwiftUI

struct MainView: View {
  var body: some View {
    NavigationView {
      NavigationLink(destination: TestView()) {
        MainButton(title: "Press Me")
      }
      .navigationTitle("Welcome")
    }
    .navigationViewStyle(.stack)
  }
}

struct MainButton: View {
  var title: String
  var body: some View {
    Text(title).font(.title)
  }
}

struct TestView: View {
  @State var selectedTab = 0
  var body: some View {
    TabView(selection: $selectedTab) {
      List { ForEach(0..<100) { i in Text("Test Tab 0 row \(i)") } }
        .listStyle(.plain)
        .tag(0)
        .navigationBarTitle("Page 1 Tab 1")
        .tabItem {
          Image(systemName: "face.smiling")
          Text("tab1")
        }
        .tag(0)
      List { ForEach(0..<20) { i in Text("Test Tab 1 row \(i)") } }
        .listStyle(.plain)
        .tag(1)
        .navigationBarTitle("Page 1 Tab 2")
        .tabItem {
          Image(systemName: "face.smiling.inverse")
          Text("tab2")
        }
        .tag(1)
    }
    .navigationTitle("Tab Views")
    .background()
  }
}

struct TestView_Previews: PreviewProvider {
  static var previews: some View {
    MainView()
  }
}

If I remove TabView on second Scene, Navigation Title works as expected.

enter image description here

1

There are 1 best solutions below

0
Ievgen On BEST ANSWER

Seems Apple does not support embedding TabView into NavigationView / NavigationStack. But it works other way around, e.g. if NavigationView is embedded in one of Tab Items.

Alternative solution & if you want to support original transition:

  • FROM Scene 0: NavigationStack
    • TO Scene 1: Navigation Stack + TabView

You can always write your own CustomTabView and use in with Apple's NavigationStack. To make things a little easier your can reuse any TabView available on GitHub, e.g. modified AxisTabView from Fabula:

Sample App