SwiftUI - List: Hide divider in iOS 13+

Question

I developed a chat screen using SwiftUI. The current minimum iOS version is 13.0.

To make the chat, I use the element List with ForEach. The problem is that the list shows the dividers, and I need to hide them:

I tried to hide the style of TableView but nothing works. Here's the code:

struct MessagesView: View {

    var messages: [MessageModel] = []

    init() {
        // To remove only extra separators below the list:
        UITableView.appearance().tableFooterView = UIView()
        // To remove all separators including the actual ones:
        UITableView.appearance().separatorStyle = .none
    }
    
    var body: some View {
        List {
            ForEach(messages, id: \.messageId) { message in
                Group {
                    if(messPack.user != nil) {
                        ReceivedMessageView(
                            message: message.message,
                            name: message.user?.name,
                            color: message.user?.color)
                    } else {
                        SentMessageView(message: messPack.message)
                    }
                }.listRowInsets(EdgeInsets())
            }
        }
    }
}

I'll be grateful for any help :)

*minimum iOS version is 13.0* - but on which version do you run it? — pawello2222, Nov 07 '20 at 18:22
Is there some reason you need it to be in a list? Wouldn't a ScrollView accomplish the same thing without the dividers? List is supposed to have dividers, where ScrollView is plain. — Yrb, Nov 07 '20 at 18:22
Does this answer your question https://stackoverflow.com/a/62598818/12299030? — Asperi, Nov 07 '20 at 18:32
Thank you for all your answers. I'm new at SwiftUi. I thought that List manage the memory very well when the list is very long (lazy loading, etc.). Does ScrollView do the same thing ? — Anas A., Nov 08 '20 at 13:59

score 0 · Answer 1 · answered Nov 07 '20 at 21:12

0

You can play around with some of the ListView styles. I think SidebarListStyle doesn't have any lines. Otherwise, you'll probably have to use a ScrollView and/or VStack instead of a List.

    List {
        Text("ONE")
        Text("TWO")
        Text("THREE")
    }
    .listStyle(SidebarListStyle())

answered Nov 07 '20 at 21:12

nicksarno

3,850
1
13
33

3

Hi, thank you for your answer. Sadly, this option is only available for iOS 14+. – Anas A. Nov 08 '20 at 13:57

score 0 · Accepted Answer · answered Nov 08 '20 at 15:46

Setting minimum iOS version to iOS 13 doesn't mean your code can't run on iOS 14 (and iOS 13 solutions for removing List separators don't work on iOS 14).

You need to use if #available(iOS 14, *) to specify which code use for which iOS version:

struct MessagesView: View {
    var messages: [MessageModel] = []

    init() {
        UITableView.appearance().tableFooterView = UIView()
        UITableView.appearance().separatorStyle = .none
    }

    var body: some View {
        List {
            ForEach(messages, id: \.messageId) { message in
                Group {
                    if #available(iOS 14, *) {
                        messageView(for: message)
                            .frame(maxWidth: .infinity, maxHeight: .infinity, alignment: .leading)
                            .listRowInsets(EdgeInsets())
                            .background(Color.white)
                    } else {
                        messageView(for: message)
                    }
                }
            }
        }
    }

    @ViewBuilder
    func messageView(for message: MessageModel) -> some View {
        if messPack.user != nil {
            ReceivedMessageView(
                message: message.message,
                name: message.user?.name,
                color: message.user?.color
            )
        } else {
            SentMessageView(message: messPack.message)
        }
    }
}

Removing List separators:

SwiftUI - List: Hide divider in iOS 13+

2 Answers2