SwiftUI: ListViews inside TabBar inside NavigationView generates empty View

Question

I have two ListView inside a TabView which is in turn inside a NavigationView .

When I run this code and i scroll the ListView content i see there's an empty view being generated that seems to be on top of ListView rows.

When the list view is scrolled all the way to the top it totally covers the first item.

import SwiftUI

struct ContentView: View {

    @State private var gibsonGuitars = [ Guitar(id: 1, name: "Les Paul")]
    @State private var fenderGuitars = [ Guitar(id: 1, name: "Stratorcaster")]
    @State private var selectedView = 0

    private let brandGibson = "Gibson Guitars"
    private let brandFender = "Fender Guitars"

    private var title: String {
        $selectedView.wrappedValue == 0 ? brandGibson : brandFender
    }

    var body: some View {
        NavigationView {
            TabView(selection: $selectedView) {
                GuitarListView(guitars: $gibsonGuitars)
                    .tabItem {
                        Image(systemName: "guitars")
                        Text(brandGibson)
                    }
                    .tag(0)
                GuitarListView(guitars: $fenderGuitars)
                    .tabItem {
                        Image(systemName: "guitars")
                        Text(brandFender)
                    }
                    .tag(1)
                }
                .navigationBarTitle(Text(title))
            GuitarDetail()
        }
        .navigationViewStyle(DoubleColumnNavigationViewStyle())

    }
}

struct Guitar: Identifiable {
    var id: Int
    var name: String
}

struct GuitarListView: View {
    @Binding var guitars: [Guitar]
    var body: some View {
        List(guitars) { guitar in
            Text(guitar.name)
        }.listStyle(GroupedListStyle())
    }
}

struct GuitarDetail: View {
    @State var guitar: Guitar?
    var body: some View {
        guard let guitar = guitar else {
            return Text("No Guitar Selected.")
        }
        return Text("\(guitar.name)").font(.largeTitle)
    }
}

What is it? How do i avoid it?

Answer 1

In the end, this was caused by my lack of understanding about the safe areas in SwiftUI. I was able to fix it by adding .edgesIgnoringSafeArea(.top)

    import SwiftUI

struct ContentView: View {

    @State private var gibsonGuitars = [ Guitar(id: 1, name: "Les Paul")]
    @State private var fenderGuitars = [ Guitar(id: 2, name: "Stratorcaster")]
    @State private var selectedView = 0

    private let brandGibson = "Gibson"
    private let brandFender = "Fender"

    private var title: String {
        $selectedView.wrappedValue == 0 ? brandGibson : brandFender
    }

    var body: some View {
        NavigationView {
            TabView(selection: $selectedView) {
                    GuitarListView(guitars: $gibsonGuitars)
                        .tabItem {
                            Image(systemName: "guitars")
                            Text(brandGibson)
                        }
                        .tag(0)
                    GuitarListView(guitars: $fenderGuitars)
                    .tabItem {
                        Image(systemName: "guitars")
                        Text(brandFender)
                    }
                    .tag(1)
            }
            .edgesIgnoringSafeArea(.top)
            .navigationBarTitle(title)
            GuitarDetail()
        }
        .navigationViewStyle(DoubleColumnNavigationViewStyle())
    }
}

struct Guitar: Identifiable {
    var id: Int
    var name: String
}

struct GuitarListView: View {
    @Binding var guitars: [Guitar]
    var body: some View {
        List(guitars) { guitar in
            Text(guitar.name)
        }.listStyle(GroupedListStyle())
    }
}

struct GuitarDetail: View {
    @State var guitar: Guitar?
    var body: some View {
        guard let guitar = guitar else {
            return Text("No Guitar Selected.")
        }
        return Text("\(guitar.name)").font(.largeTitle)
    }
}