Table of Contents

How to quickly add chat to your Swift app with the Sendbird UIKit

How to quickly add chat to your Swift app with the Sendbird UIKit

Jason Koo
Author
Tutorial Type: Basic Tutorial Reading Time: 10 min Building Time: 15 min
SwiftChatiOSUIKit

Introduction

  • This tutorial illustrates how to implement Sendbird’s UIKit in an iOS project using SwiftUI
  • Requirements include:
    • Xcode version 12.4 or newer
    • iOS deployment version of 14 or newer
    • Cocoapods 1.10.1 or newer
    • An active Sendbird account

An existing Sendbird project or a brand new Swift UI Project along these instructions

Step 1. Adding Sendbird UIKit to a Swift UI project

First add the Sendbird UIKit dependency to your Cocoapod .podspec file (for instructions using Carthage, see here):

pod 'SendbirdUIKit'

Make sure the minimum platform version is 10.3 or higher:

platform :ios, '10.3'

Then run `pod install`

Step 2. Create a UIKit container

Sendbird’s UIKit was originally created with Apple’s UIKit so you’ll need to create a UIViewControllerRepresentable struct that returns a UIViewController class.

1. Start by creating a new swift file and name it `ChannelListView.swift`

  1. Replace the default `import Foundation` import statement by importing `SwiftUI` and `SendBirdUIKit`
  2. Create a UIViewController class named `ChannelListViewController`. 

    3a. Add an objective-c function to create an instance of UINavigationController with Sendbird’s SBUCHannelListViewController as the root view controller. 

    3b. Call this function within a `viewDidAppear` override block

  1. Create a UIViewControllerRepresentable struct named `ChannelListViewContainer`. This will return an instance of a ChannelListViewController. 

    4a. Set the UIViewControllerType typealias to the ChannelListViewController class above

    4b. Have the required makeUIViewController function return an instance of the ChannelListViewController class

    4c. Add the required updateUIViewController function – but can leave empty

Step 3. Initializing Sendbird in Swift UI

In the default `ContentView.swift` file we’ll be doing the following in the init() block:
1. Initializing the Sendbird SDK using `SBUMain.initialize()`, passing in an application id*.

  1. Specify the current user with a unique user id. Retrieving or setting these ids should normally be done alongside your existing user management process. If you want to create some test users ahead of time, see this video.
  2. Connect to Sendbird with the `SBUMain.connect` function which will use the settings above**.

 

Followed by 4. updating the body property to make use of the `ChannelListViewController` we created earlier.

*Your application id can be found or created through the Sendbird dashboard:

**Note that if the app id is invalid or we otherwise encounter a connection error, an instance of an SBDUser will not be returned in the completion handler.

Step 4. Build and run

If you use a valid application id then build and run onto a simulator or device, you will see the following screen:

UIKit is now up and running in your SwiftUI application.

Step 5. Test drive

Use the button to create a new Group Channel with another test user. You will need at least 2 users in your app before any will appear in a SBUCreateChannelViewController (or SBUInivteUserViewController or SBUMemberListViewController?) view instance that is automatically created by UIKit:

Select a few users to create a channel with then click the “Create” button to automatically open up an instance of a SBUChannelViewController view. Once you’ve sent a few messages between your users you will see something like:

All the code presented here can be found in this demo repo.

Conclusion

In this tutorial we covered:

  • How to add the Sendbird dependency to your Swift iOS project
  • Creating a UIViewControllerRepresentable container to render Sendbird’s UIKit
  • Initializing and running Sendbird’s UIKit in a working Swift project