Skip to main content


This component is used to display a channel in the ChannelList component.


Use a Custom Component

You can swap the built-in component with your own by setting Components.default.channelContentView to your own view type.

Components.default.channelContentView = MyChannelListItemView.self

You can find more information on how the components configuration works here.

Example: Custom Unread Indicator

As an example of how to use these methods in practice, let's try to change the channel unread count indicator to look like the one in iMessage:

Default styleCustom "iMessage" Style
Default unread countiMessage unread count

Firstly, we need to create a custom subclass of ChatChannelListItemView, which is the component responsible for showing the channel summary in the channel list. Because the iMessage-style unread indicator is just a blue dot, rather then trying to modify the existing unread indicator, it's easier to create a brand new view for it:

class iMessageChannelListItemView: ChatChannelListItemView {

// this is the blue dot to show next to channels with unread messages
private lazy var customUnreadView: UIView = {
let unreadView = UIView()
unreadView.backgroundColor = tintColor
unreadView.layer.masksToBounds = true
unreadView.layer.cornerRadius = 5
unreadView.clipsToBounds = true
return unreadView

override func setUpLayout() {

// Set constraints for the unread indicator
customUnreadView.widthAnchor.constraint(equalTo: customUnreadView.heightAnchor),
customUnreadView.widthAnchor.constraint(equalToConstant: 10),

// Insert it as the left-most subview
mainContainer.insertArrangedSubview(customUnreadView, at: 0)

// Remove the original unread count indicator, since we don't need it anymore

override func updateContent() {

customUnreadView.alpha = unreadCountView.content == .noUnread ? 0 : 1

Finally, we have to tell the SDK to use our custom subclass instead of the default type:

Components.default.channelContentView = iMessageChannelListItemView.self



The data this view component shows.

public var content: Content? 


The date formatter of the timestampLabel

public lazy var dateFormatter: DateFormatter 


Main container which holds avatarView and two horizontal containers title and unreadCount and subtitle and timestampLabel

open private(set) lazy var mainContainer: ContainerStackView = ContainerStackView().withoutAutoresizingMaskConstraints


By default contains title and unreadCount. This container is embed inside mainContainer and is the one above bottomContainer

open private(set) lazy var topContainer: ContainerStackView = ContainerStackView().withoutAutoresizingMaskConstraints


By default contains subtitle and timestampLabel. This container is embed inside mainContainer and is the one below topContainer

open private(set) lazy var bottomContainer: ContainerStackView = ContainerStackView().withoutAutoresizingMaskConstraints


The UILabel instance showing the channel name.

open private(set) lazy var titleLabel: UILabel = UILabel()


The UILabel instance showing the last message or typing users if any.

open private(set) lazy var subtitleLabel: UILabel = UILabel()


The UILabel instance showing the time of the last sent message.

open private(set) lazy var timestampLabel: UILabel = UILabel()


The view used to show channels avatar.

open private(set) lazy var avatarView: ChatChannelAvatarView = components


The view showing number of unread messages in channel if any.

open private(set) lazy var unreadCountView: ChatChannelUnreadCountView = components


Text of titleLabel which contains the channel name.

open var titleText: String? 


Text of subtitleLabel which contains current typing user or the last message in the channel.

open var subtitleText: String? 


Text of timestampLabel which contains the time of the last sent message.

open var timestampText: String? 



override open func setUpAppearance() 


override open func setUpLayout() 


override open func updateContent()

Did you find this page helpful?