How to add a view on top of message list in a GroupChannelView

[lookdeceline]

Question

How to insert a custom view on top of message list in a GroupChannelView?

Answer

You can subclass SendbirdUIKit's SBUGroupChannelModule.List to add a custom view in between the GroupChannel's Header and List in GroupChannelView.

1. Create a custom view class
2. Create a subclass of SBUGroupChannelModule.List to add your custom view into the default SBUGroupChannelModule's List component.
3. Configure SBUModuleSet to reference your custom subclass of SBUGroupChannelModule.List.
4. Call default SendbirdSwiftUI's GroupChannelView inside your SwiftUI View's body.

Step by step guide

1. Create a custom view class

import UIKit

// Your custom view to insert in between GroupChannel Header and List. 
class ChannelTopView: UIView, SBUViewLifeCycle {
    let titleLabel = UILabel()
    let contentStackView = SBUStackView(axis: .horizontal, spacing: 8)
        
    override init(frame: CGRect) {
        super.init(frame: frame)
        setupViews()
        setupLayouts()
        setupActions()
    }
    required init?(coder: NSCoder) {
        super.init(coder: coder)
        setupViews()
        setupLayouts()
        setupActions()
    }
    
    override func layoutSubviews() {
        super.layoutSubviews()
        setupStyles()
    }
    
    // MARK: -Sendbird UIKit Lifecycle
    func setupViews() {
        self.addSubview(contentStackView)
        contentStackView.setHStack([
            titleLabel
        ])
    }
    
    func setupLayouts() {
        contentStackView.sbu_constraint(
            equalTo: self,
            leading: 0,
            trailing: 0,
            top: 0,
            bottom: 0
        )
    }
    
    func updateLayouts() {}
    
    func setupStyles() {
        titleLabel.text = "Custom top view"
        titleLabel.textAlignment = .center
        titleLabel.font = UIFont.preferredFont(forTextStyle: .headline)
        titleLabel.textColor = .white
        
        contentStackView.backgroundColor = .red
    }
    
    func updateStyles() {}
    
    func setupActions() {}
}

2. Create a subclass of SBUGroupChannelModule.List to add your custom view into the default SBUGroupChannelModule's List component.

import SendbirdUIKit

// Subclass SBUGroupChannelModule.List.
class CustomGroupChannelModuleList: SBUGroupChannelModule.List {
    // Create your custom UIView like this and use it.
    public lazy var topView = ChannelTopView()

    override func setupViews() {
        super.setupViews()

        // Creates the `customFooterView`
        self.addSubview(self.topView)
    }

    override func setupLayouts() {
        super.setupLayouts()

        // Sets the `topView` layout
        self.topView
            .sbu_constraint(equalTo: self, leading: 0, trailing: 0, top: 0)
            .sbu_constraint(height: 80)
        
        // Deactivates the existing topConstraint of the tableView.
        if let tableViewTopConstraint = self.constraints.first(where: {
            $0.firstAttribute == .top && $0.firstItem === self.tableView
        }) {
            tableViewTopConstraint.isActive = false
        }
        
        // Set the tableView's bottonConstraint to tableViewBottomConstraint
        self.tableView.sbu_constraint_equalTo(
            topAnchor: self.topView.bottomAnchor,
            top: 0
        )
    }
}

3. Configure SBUModuleSet to reference your custom subclass of SBUGroupChannelModule.List.
   This code should run before GroupChannelView is presented.

SBUModuleSet.GroupChannelModule.ListComponent = CustomGroupChannelModuleList.self

4. Call the default SendbirdSwiftUI's GroupChannelListView to navigate to a GroupChannelView.

import SwiftUI
import SendbirdSwiftUI

struct ContentView: View {
    var body: some View {
            GroupChannelListView()
    }
}