SwiftUI when pushing to a view with a ScrollView the NavigationBar collapses from LargeTitle to Inline in a jerky manner

Question

I have created the following project to demonstrate this issue. When I push to another view that contains a scrollView (List in this case) and a navigationTitle is defined, the navigationBar goes from LargeTitle to inline in a jerky manner. Without the navigationTitle the animation is smooth. Not sure how to resolve this:

import SwiftUI
import CoreData

enum Detail: Hashable {
    case pushedView
}

struct ContentView: View {
    
    @State private var selection: Detail?
    
    @State private var columnVisibility = NavigationSplitViewVisibility.all
    
    var body: some View {
        NavigationSplitView(columnVisibility: $columnVisibility) {
            List(selection: $selection) {
                NavigationLink(value: Detail.pushedView) {
                    Text("Push View")
                }
            }
            .listStyle(.insetGrouped)
            .navigationTitle("Home")
        } detail: {
            switch self.selection {
            case .pushedView:
                PushedView()
            default:
                EmptyView()
            }
        }
        .navigationSplitViewStyle(.balanced)
    }
}

struct PushedView: View {
    
    var body: some View {
        List {
            ForEach((1...30), id: \.self) {n in
                Text("\(n)")
            }
        }
        .navigationTitle("Pushed View")
    }
    
}

score 0 · Answer 1 · answered May 09 '23 at 08:13

This issue seems to occurs when transitioning between views that have different navigation bar style.

I have found one workaround for this.

Here is the updated code for PushedView:

struct PushedView: View {
    @State private var scrollToIndex: Int = 1

    var body: some View {
        ScrollViewReader { scrollProxy in
            List {
                ForEach((1...30), id: \.self) {n in
                    Text("\(n)")
                }
            }
            .navigationTitle("Pushed View")
            .onAppear {
                withAnimation {
                    scrollProxy.scrollTo(scrollToIndex, anchor: .top)
                }
            }
        }
    }
}

Here I am wrapping List in a ScrollViewReader to get access to the scrollProxy that we can use to manually scroll to first index.

I tried this approach on a List with a permanently visible searchBar and it doesn't work. Still jerky change in NavBar height — alionthego, May 10 '23 at 00:37

SwiftUI when pushing to a view with a ScrollView the NavigationBar collapses from LargeTitle to Inline in a jerky manner

1 Answers1