SwiftUI: Navigation bar of destination view has no background and is not animated on scroll

Question

I'm trying to make navigation view that leads to destination view with scroll view, where navigation title of destination view would animate towards inline display mode or at least scroll behind the nav bar itself.

Basically I'm trying to replicate behavior of standard Music app, specifically when you go from Library to Songs.

There you have source view (Library) with its own title that is animated into inline display mode on scroll. When you tap Songs you also get list with new title (Songs) that also animates into inline display mode on scroll.

So I have main NavigationView with NavigationBarTitle. I move to destinationView with its own NavigationBarTitle and some long list of content. On scroll, NavigationBarTitle of main Navigation view changes to inline display mode, but NavigationBar of destination view behaves very odd: it's basically an overlay with no background and no animation.

And if you remove NavigationBarTitle of destination view all together it only makes things worse. It seems like it adds another transparent NavigationBar with nothing in it.

Also tried to add background to the navigation bar, looked around documentation, but found no solution.

Not sure if I'm doing something very wrong or it's just beta bug of SwiftUI or Xcode.

import UIKit

struct ContentView: View {
    var body: some View {
        NavigationView{
            List(0..<20) { item in
                NavigationLink(destination: DetailedView()) {
                    Text("Next view")
                }
            }
            .navigationBarTitle("Source View")
        }
    }
}

struct DetailedView: View {
    var body: some View {
            List(0...25) { number in
                Text("This is \(number)'th row")
            }
            .navigationBarTitle(Text("Destination View")) 
// comment out line above to see empty frame of navigation bar

    }
}

Answer 1

This is not a full answer to your question, but a temporary workaround: add top or vertical padding to your list on the child view, depending on your preference. This is what I have been doing until there is a better solution.

This will at least make the content scroll under the navigation header with a proper background rendered behind the header. It doesn't have the nice animation to make the title smaller.

struct DetailedView: View {
    var body: some View {
            List(0...25) { number in
                Text("This is \(number)'th row")
            }
            .padding(.top)
            .navigationBarTitle(Text("Destination View"))
    }
}

Answer 2

This is fixed in the iOS 13.1 public release (with the App Store release of Xcode 11).

Answer 3

I'm currently on beta 5, and I think this is an ongoing bug with SwiftUI.

I noticed the same issue while doing the SwiftUI Landmarks Tutorials, and you can easily reproduce the issue: https://imgur.com/a/aYgUUH0

For now, to avoid seeing all the content scroll under a transparent navBar, I've converted all of my Navbars to display as inline, since automatic and large experience the issue.

List {
    // ...
}
.navigationBarTitle(Text("MyTitle"), displayMode: .inline)