Hello there! I've been struggline with this thing for a two days now, and seems like it's a bug in SwiftUI. Navigation title is jumping on top of the ScrollView's content when switching tabs in TabView.
Steps to reproduce:
- Scroll one tab to the bottom so that the large title is hidden and the floating toolbar appears.
- Go to another tab in the tab bar.
- Go back to the initial tab (it is still scrolled), and press the current tab button again to scroll to the top. The navigation title will glitch and be on top of the content. The animation fixes if you scroll again manually.
Video: https://share.cleanshot.com/PFCSKMlH
Code (simplified):
import SwiftData
import SwiftUI
@main
struct MyApp: App {
var body: some Scene {
WindowGroup {
TabsContentView()
}
}
}
// ...
struct TabsContentView: View {
enum Tab {
case library, profile
}
@State private var selectedTab: Tab = .library
var body: some View {
TabView(selection: $selectedTab) {
NavigationStack {
YourLibraryList()
.navigationTitle("Your Library")
}
.tabItem {
Label("Library", systemImage: "tray.fill")
}
.tag(Tab.library)
NavigationStack {
VStack {
Spacer()
Text("Profile")
.font(.largeTitle)
.foregroundColor(Color.theme.text)
Text("Manage your account and preferences here")
.font(.body)
.foregroundColor(Color.theme.mutedForeground)
.multilineTextAlignment(.center)
.padding(.horizontal)
Spacer()
}
.navigationTitle("Explore")
}
.tabItem {
Label("Profile", systemImage: "person.fill")
}
.tag(Tab.profile)
}
.toolbarBackground(.ultraThinMaterial, for: .tabBar)
.toolbarBackground(.visible, for: .tabBar)
}
}
// ...
struct YourLibraryList: View {
var body: some View {
ScrollView {
VStack(spacing: 12) {
ForEach(1 ... 20, id: \.self) { number in
RoundedRectangle(cornerRadius: 12)
.fill(Color.blue.opacity(0.1))
.stroke(Color.blue, lineWidth: 1)
.frame(height: 60)
.overlay(
Text("\(number)")
.font(.title2)
.fontWeight(.semibold)
.foregroundColor(.blue)
)
}
}
.padding(.horizontal)
}
}
}