How to remove the First row separator in SwiftUI List

The First separator or the topmost separator in SwiftUI List is actually a section separator.

Since iOS 15, you can easily remove a section separator by using the listSectionSeparator(_:edges:) modifier.

You can easily support sarunw.com by checking out this sponsor.

Translate your app In 1 click: Simplifies app localization and helps you reach more users.

Try it for Free

How to remove the First row separator in SwiftUI List

The listSectionSeparator(_:edges:) control the visibility of section separators.

To hide the section separator, we pass Visibility.hidden for the first argument.

listSectionSeparator(_:edges:) also accept an optional second argument that controls the edges you want to hide.

Section can have two separators, top and bottom, wrapping the rows in that section. The first separator is the top edge of a section separator. So, we pass VerticalEdge.top as the second argument.

To hide it, we apply .listSectionSeparator(.hidden, edges: .top) to Section.

NavigationView {
    List {
        Section("Section Header") {
            ForEach(0..<7) { i in
                Text("Row \(i.description)")
            }
        }
        .listSectionSeparator(.hidden, edges: .top)
    }
    .listStyle(.plain)
    .navigationTitle("List")
}