iOS: How can we expand the Navigation Bar in Chat to add extra content or add sticky bar in Chat

Sendbird Chat UIKit
, , ,
1

How can we get this design on iOS, where it seems we have a larger navigation bar or somewhat of a sticky bar inside the opened groupChannel(at the top always below navbar)

here is pic with example of what im trying to recreate for the navigation bar(notice the 32 participants also in the navbar

If I can’t expand the navbar to make it longer, is there a way to add a sticky bar right under the navbar?

I tried preferLargeTitles to increase the navbar size but this didn’t work either

Screen Shot 2022-10-11 at 4.55.27 AM
Screen Shot 2022-10-11 at 4.55.27 AM664×1086 55.2 KB

2

Hi @NerdyYawdie, someone from our engineering team will respond to your post soon.

3

Hello @NerdyYawdie,

I just checked your issue.
unfortunately, UIKIT has not yet officially provided largeTitle funtion of navigationBar.
but, you can customize it if necessary.
please refer to the snippet below.

class CustomGroupChannelViewController: SBUGroupChannelViewController {
    override func setupViews() {
        super.setupViews()
        
        self.navigationController?.navigationBar.prefersLargeTitles = true
    }

    open override func viewWillDisappear(_ animated: Bool) {
        super.viewWillDisappear(animated)
        
        self.navigationController?.navigationBar.prefersLargeTitles = false
    }
    
    override func baseChannelModule(_ headerComponent: SBUBaseChannelModule.Header, didUpdateTitleView titleView: UIView?) {
        // After the `titleView` is set in the header component of the module,
        // if you required for control in the `viewController`, you can handle `titleView` in here .
    }
}

// Register your `CustomGroupChannelViewController` to `SBUViewControllerSet`
SBUViewControllerSet.GroupChannelViewController = CustomGroupChannelViewController.self

class CustomGroupChannelModuleHeader: SBUGroupChannelModule.Header {
    override func setupViews() {
        super.setupViews()
        
        self.titleView = {YOUR_CUSTOMIZED_TITLEVIEW}
    }
}

// Register your `CustomGroupChannelModuleHeader` to `SBUModuleSet`
SBUModuleSet.groupChannelModule.headerComponent = CustomGroupChannelModuleHeader()