How to use ScrollViewReader in SwiftUI to always display the last message in a chat view?

Question

I am currently working on a SwiftUI chat interface where I display messages using a ScrollView and LazyVStack. I want the chat to always display the last message (i.e., scroll to the bottom) when a new message is received or when the view first appears. I know that ScrollViewReader is solution to this, but I'm not sure how to implement it correctly.

Here's my current code for the chat view:

struct ChatMessage: Identifiable {
    let id: Int
    let text: String
    let isFromCurrentUser: Bool
}

struct ChatView: View {
    var messages: [ChatMessage]

    var body: some View {
        ScrollView {
            ScrollViewReader { scrollView in
                LazyVStack(spacing: 20) {
                    ForEach(messages, id: \.id) { message in
                        HStack {
                            if message.isFromCurrentUser {
                                Spacer()
                                Text(message.text)
                                    .padding()
                                    .background(Color.gray.opacity(0.2))
                                    .foregroundColor(.black)
                            } else {
                                Text(message.text)
                                    .padding()
                                    .foregroundColor(.black)
                                Spacer()
                            }
                        }
                    }
                }
            }
        }
    }
}

Answer 1

You'll have to conform your model to hashable protocol first and then use that in your ChatView with the .id modifier along with an .onChange modifier so that whenever a new message is added to the array of messages it will automatically scroll to the last message in the array.

Also it's better to use a List in a situation like this as chat lists can grow to be very long and you only want to render what the user has scrolled to in the chat list.

struct ChatMessage: Hashable {
    let id: Int
    let text: String
    let isFromCurrentUser: Bool
}

struct ChatView: View {
    
    @State var messages: [ChatMessage] = []
    
    var body: some View {
        ScrollViewReader { proxy in
            List {
                ForEach(messages, id: \.id) { message in
                    HStack {
                        if message.isFromCurrentUser {
                            Spacer()
                            Text(message.text)
                                .padding()
                                .background(Color.gray.opacity(0.2))
                                .foregroundColor(.black)
                        } else {
                            Text(message.text)
                                .padding()
                                .foregroundColor(.black)
                            Spacer()
                        }
                    }
                    .id(message)
                }
            }
            .onChange(of: messages) { _ in
                withAnimation {
                    proxy.scrollTo(messages.last)
                }
            }
        }
    }
}