Swift UI example

Is there any swiftUi based UiKit example which i can refer to ? I could find only storyboard implementations.

Hi, @shraavan_hebbar

There is no official sample in SwiftUI currently.

Thanks,

Hi @shraavan_hebbar,

I’ve got some initial SwiftUI + Sendbird UIKit code up and running. Let me know if there’s particular components you need help with until I can get a write up posted.

In the meantime, here’s an example of how to spin up a specific group chat channel if the channel url is passed in:

import SwiftUI
import SendBirdUIKit

struct ChannelView: View {
    
    let channelUrl : String
    
    var body: some View {
        SendbirdChannelContainer(channelUrl: channelUrl)
    }
}

struct SendbirdChannelContainer : UIViewControllerRepresentable {
    func makeUIViewController(context: Context) -> SBUChannelViewController {
        return SBUChannelViewController(channelUrl: channelUrl)
    }
    
    func updateUIViewController(_ uiViewController: SBUChannelViewController, context: Context) {
        ...
    }
    
    
    typealias UIViewControllerType = SBUChannelViewController
    let channelUrl : String
    
}

@Jason_Koo

Thanks for this example of how to use group chat in SwiftUI. Although this code is working to run a group channel, I’m having an issue with the messageinputview. When I click on the input part to type a message, the message input view is moving all the way to top making it impossible to read the messages. Can you please help with this?

Hi @sube,

Thanks for bringing this to our attention. Are you getting this behavior from the original sample code? Visually the screengrab you sent looks different the sample code from GitHub - SendbirdCommunity/sendbird-uikit-swift-sample: Sample project demonstrating how to enable Sendbird's UIKit in an iOS project using SwiftUI..

If your implementation is custom. Can you post the relevant code you’re using here or somewhere I can review?

Thanks for your response @Jason_Koo

When I implement it, in a way that channel is opened through the SBUChannellistcontroller, there is not problem. Sendbird SwiftUI example is implemented in this way.

However, the behavior I mentioned occurs when I put SBUChannelViewController in SwiftUI UIViewControllerRepresentable. In other words, opening a channel directly for the user with code, instead of User opening a channel from the ChannelListController.

The reason my screenshot looks different is that I changed some of the theme. The channel is also contained in a sheet. I also tried containing it in a full screen, and the weird behavior also occurs. The following is the code snippet. I’m trying to call ChannelView() by giving the SBDGroupChannel, when needed. Instead of using SBUChannelListViewController.

class ChannelViewController: SBUChannelViewController {
        
    override func viewWillAppear(_ animated: Bool) {
        super.viewWillAppear(animated)
    }
    
    override func viewDidLoad() {
        super.viewDidLoad()
    }
    
}

struct ChannelView: UIViewControllerRepresentable {
    
    @Environment(\.colorScheme) var colorScheme
    var channel: SBDGroupChannel
    
    typealias UIViewControllerType = UINavigationController
    
    func makeUIViewController(context: Context) -> UINavigationController {
        
        setCustomColorSet()
        setCustomGlobalStringSet()
        
        if colorScheme == .dark {
            SBUTheme.set(theme: .dark)
        } else {
            SBUTheme.set(theme: .light)
        }
        
        let channel = ChannelViewController(channel: channel)
        let naviVC = UINavigationController(rootViewController: channel)
        
        return naviVC
    }
    
    func updateUIViewController(_ uiViewController: UINavigationController, context: Context) {
        
    }
    
    func setCustomColorSet() {
        
        
        SBUColorSet.primary500 = UIColor(Color(hex: "FFC911"))
        SBUColorSet.primary400 = UIColor(Color(hex: "FFC911"))
        SBUColorSet.primary300 = UIColor(Color(hex: "FFC911"))
        SBUColorSet.primary200 = UIColor(Color(hex: "FFC911"))
        SBUColorSet.primary100 = UIColor(Color(hex: "FFC911"))
        
        SBUColorSet.background600 = .systemBackground
        SBUColorSet.background500 = .systemBackground
        
        
    }
    
    func setCustomGlobalStringSet() {
        SBUStringSet.ChannelList_Header_Title = "Groups"
    }

}

I suspect the problem is happening when KeyboardWillShow notification is sent out. The messageinputview needs to change it’s constraints when user starts typing, but the UIView behavior is working incorrectly inside the Swiftui View.

Ok. I’m assuming you are getting the target channel to jump to prior to initializing this channel view.

If so, then the simplest way to display an instance of the channel view is to initialize an instance of an SBUChannelViewController in place of the SBUChannelListViewController in the sample’s ChannelListView class.

Like so:

class ChannelListViewController : UIViewController {
    
    override func viewDidAppear(_ animated: Bool) {
        super.viewDidAppear(animated)
        displaySendbirdChanelList()
    }
    
    @objc
    func displaySendbirdChanelList(){
        
        // The SBUChannelListViewController will take care of creating
        // an instance of SBUChannleViewController when a group chat channel
        // is selected, and creating an instance of SBUCreateChannelViewController
        // when wanting to create a new group chat channel.
        
        // --> Begin update.
        // Replace this line with a direct SBUChannelViewController init with a channel object or the channel's url
        
//        let clvc = SBUChannelListViewController()
        let clvc = SBUChannelViewController(channelUrl: "sendbird_group_channel_77996875_5b03596eded35921960e26f07e43f1ec58ebe7e2", messageListParams: SBDMessageListParams())
        
        // <-- End update
        
        let navc = UINavigationController(rootViewController: clvc)
        navc.title = "Sendbird SwiftUI Demo"
        navc.modalPresentationStyle = .fullScreen
        present(navc, animated: true)
    }
}

When done this way you should see no weirdness with the keyboard.

@Jason_Koo Thanks again for your response!

I have tried this implementation. It doesn’t work because it creates 2 layers of view controllers. An empty view controller will appear and then “navc” will be represented. When a user goes back, it will show an empty viewcontroller

Hi @sube, in case you’re not getting my DMs, please message me regarding your availability for us to hop on a call to figure this out.

@Jason_Koo just responded to one of your messages :slight_smile:

Hi @Jason_Koo / @sube :wave:.

Did you get an answer to this problem? I am seeing exactly the same thing.

When I wrap a SBUGroupChannelViewController in UIViewControllerRepresentable it presents as expected.

However when tapping on the textfield the view moves offscreen.

Any help appreciated!