SwiftUI: List inside TabView inside NavigationView breaks animation

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

Replies

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