SwiftUI: List inside TabView inside NavigationView breaks animation

Question

Created Feb ’22

Replies 2

Boosts 1

Views 2.9k

Participants 3

I want to have a TabView inside a NavigationView. The reason is that I am showing a List inside the TabView. When a user taps on an item in the list, the list uses a NavigationLink to show a detailed screen.

The problem is that the navigationBarTitle is now broken. It does not animate when the user scrolls through the items (sometimes). I don't want to wrap my NavigationView inside the TabView, since that will always show the TabView. I don't want it.

This is the reproduction code. If you run this in the simulator, the animation will break when switch a few times between the tabs and you scroll through the list. You will see that the navigation bar will remain where it is, without the animation.

import SwiftUI

struct ContentView: View {
    
    var body: some View {
        NavigationView {
            TabView {
                TestView()
                    .tabItem {
                        Image(systemName: "person.3")
                    }
                TestView()
                    .tabItem {
                        Image(systemName: "person.2")
                    }
            }
            .navigationTitle("Test")
            .navigationViewStyle(.stack)
        }
    }
}

struct TestView: View {
    var body: some View {
        List {
            Text("test")
        }
        .listStyle(.plain)
    }
}

Boost

Answer 1

Claude31 OP

Feb ’22

You need to move navigationViewStyle:

struct ContentView: View {
    
    var body: some View {
        NavigationView {
            TabView {
                TestView()
                    .tabItem {
                        Image(systemName: "person.3")
                    }
                TestView()
                    .tabItem {
                        Image(systemName: "person.2")
                    }
            }
            .navigationTitle("Test")
        }
        .navigationViewStyle(.stack)
    }
}

1

Answer 2

igavrysh OP

Feb ’24

I am having the same problem with code below:

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()
  }
}

I have .navigationViewStyle(.stack) next to NavigationView but still scrolling up and down the list does not trigger animation similar to animation when there is no TabView. E.g. If I comment TabView in the code above, animations in NavigationBar are working correctly.

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()
  }
}

0