Message Avatar View

Injecting Custom Avatar View

The default avatar shown for the message sender in the SDK is a rounded image with the user's photo. You can change the look and feel of this component, as well as introduce additional elements.

To do this, you need to implement makeUserAvatarView in the ViewFactory and return your custom view. Here's an example on how to create a custom avatar with a rounded rectangle clip shape.

import StreamChat
import NukeUI
import Nuke

struct CustomUserAvatar: View {
    var user: ChatUser
    var size: CGSize

    public var body: some View {
        ZStack {
            if let url = user.imageURL {
                LazyImage(source: url)
                    .clipShape(RoundedRectangle(cornerRadius: 8))
                    .frame(width: size.width, height: size.height)
            } else {
                Image(systemName: "person.circle")
                    .resizable()
                    .frame(width: size.width, height: size.height)
            }
        }
    }
}

After the view is created, you need to provide it in your custom factory, and afterwards inject the factory in the view hierarchy.

class CustomFactory: ViewFactory {

    @Injected(\.chatClient) public var chatClient

    public var styles = RegularStyles()

    private init() {}

    public static let shared = CustomFactory()

    func makeUserAvatarView(options: UserAvatarViewOptions) -> some View {
        CustomUserAvatar(
            user: options.user,
            size: options.size
        )
    }
}

The UserAvatarViewOptions provides the following properties:

• user – the ChatUser whose avatar will be displayed. You can access user.imageURL, user.name, user.id, and other properties.
• size – the CGSize for the avatar.
• showsIndicator – whether the online indicator should be shown.

With this, you can have a custom avatar view across the SDK's UI components that have the avatar slot. You can also use the name and the user id from the ChatUser, in case you want to present additional information in the avatar view.