swiftui - Swift: Control Navigation Bar displayMode

Question

I'm trying to figure out how to programatically control the default behaviour that happens when you scroll up on a Navigation View's Child View.

On scroll the Navigation Bar's black title (.large) is hidden by the Navigation Bar's .inline title that slowly fades in. GIF attached.

However I already have a title for my page (the white text) that appears further down. Is there a way to hide the default black title, and control when that .inline title fades in. I ask because I want to replicate that Navigation Bar scroll effect, except I only want that .inline title to begin fading in once the white title goes off screen. I've attempted to illustrate this in the below image.

I think I have to dip into UIKit for this level of customisability so I've begun screwing around with UINavigationBar.appearance() to hide the .large Navigation Bar title. But I'm not sure how to control when and how the Navigation Bar appears. I assume I have to use the scroll position to trigger that animation.

I'm pretty new to Swift so help is appreciated. Thanks in advance!

question from:https://stackoverflow.com/questions/65928402/swift-control-navigation-bar-displaymode

Answer 1

The only thing to do in this case is to use the custom title view in the navigation bar, and not use the default navigation title at all.

NavigationView { 
    YourView()
        .navigationBarTitleDisplayMode(.inline)
        .toolbar {
            ToolbarItem(placement: .principal) {
                Text("Title").opacity(titleOpacity)
            }
        }
}

You will need to calculate the value of titleOpacity yourself by observing the offset value of the scroll view, and adjusting the parameters accordingly.

@State private var scrollOffset: CGFloat = 0

private var titleOpacity: Double {
    // calculate the opacity based of current scroll view offset
}