I have a TabView in my app. One of the tabs contains a screen with a List
view. No matter what content or .listStyle
I try to apply, the List messes up the tab bar: The divider line disappears immediately and then, when the user goes to a different tab, depending on that content, it either restores/fixes the tab bar, so it looks normal again, or it remains messed up in a sense that only the currently active tab icon + label are visibly in the foreground. The blurred background of the tab bar and the other icons are either invisible or too far in the background, i.e. the content of the tab screen goes in front of the tab icons. The tab bar is expected to always be above the screen contents, even if the screen uses .ignoresSafeArea()
.
I also tried manually setting .zIndex(1)
on various views.
Everything worked perfectly fine with iOS 14.x, but since upgrading to iOS 15 this weird bug appeared.
Example project:
import SwiftUI
import MapKit
struct ContentView: View {
var body: some View {
TabView {
screen1.tabItem {
Image(systemName: "1.square.fill")
Text("Tab 1")
}
.tag(1)
.navigationViewStyle(StackNavigationViewStyle())
screen2.tabItem {
Image(systemName: "2.square.fill")
Text("Tab 2")
}.tag(2)
screen3.tabItem {
Image(systemName: "3.square.fill")
Text("Tab 3")
}.tag(3)
}
}
var screen1: some View {
ScrollView {
VStack {
ForEach(1..<80) { index in
Text("Line \(index)")
}
}
.frame(maxWidth: .infinity)
}
}
@State private var region = MKCoordinateRegion(center: CLLocationCoordinate2D(latitude: 0, longitude: 0), span: MKCoordinateSpan(latitudeDelta: 1, longitudeDelta: 1))
var screen2: some View {
Map(coordinateRegion: $region)
.ignoresSafeArea()
}
var screen3: some View {
List {
Text("List Item")
}
}
}