Views

Sendbird Chat SwiftUI is a SwiftUI-based Sendbird Chat framework that provides fully functioning chat features embedded in easily customizable user interfaces. With Sendbird Chat SwiftUI, developers can build a full chat service in just a few lines of codes. The framework also provides exceptionally intuitive interfaces that allow customization of views and actions.

Build a key feature by initializing the corresponding SendbirdSwiftUI View. Use a ViewAdapter to selectively customize different components inside a View. Use DestinationViewBuilder to customize navigation behaviors between views.

Sendbird Chat SwiftUI uses Sendbird UIKit as its core, and the SwiftUI View wraps UIKit's ViewController to finally deliver the SwiftUI View. Almost all of the functionality available in Sendbird Chat SwiftUI is provided in a SwiftUI optimized interface.

Sendbird Chat SwiftUI provides a set of Views for each feature, and each view is an entry point that can be used to access the feature. The Views are initialized with the minimum required arguments to configure the view. The Views use the Sendbird Chat UIKit as their core and wrap the ViewController to provide the SwiftUI View. The Views are designed to process the data from the Chat SDK and configure and operate the screens.

The following diagram explains the View basic architecture of Sendbird Chat SwiftUI.

To view the image in full screen, click on the

Note : Events generated by the Chat SDK and updates to related Views are handled internally. Handling internal events in SwiftUI Views is not yet supported.

The following demonstrates how to use the Sendbird Chat SwiftUI channel list View.

import SwiftUI
import SendbirdSwiftUI 

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

Sendbird Chat SwiftUI provides a View Provider for each View to let you access data, methods, or events related to the corresponding Sendbird Chat SwiftUI View. A View Provider is an ObservableObject that contains @Published properties and methods related to View. In order to use it, you create a View Provider instance and inject it into the Sendbird Chat SwiftUI View upon its initialization. The below is an example of using OpenChannelListViewProvider. Find out more ways to initialize the provider on our Sendbird SwiftUI Discussion Page.

import SwiftUI
import SendbirdSwiftUI 

struct ContentView: View {
    @ObservedPbject var provider: OpenChannelListViewProvider

    var body: some View {
        OpenChannelListView(provider: provider)
    }
}

Sendbird Chat SwiftUI View provides interfaces that lets you react to internal data or view related events of Sendbird Chat SwiftUI View. The names of all event interfaces begin with .onSendbird... so that it is easy to find them in the code completion. The following is an example of using the .onSendbirdSelectRow event interface of the OpenChannelListView.

import SwiftUI
import SendbirdSwiftUI 

OpenChannelListView()
    .onSendbirdSelectRow { indexPath in
        // Do something when a row is selected
    }

Sendbird Chat SwiftUI Views are based on areas such as Header, List, and so on. These areas can be customized through parameters in each View's initializer, allowing you to replace partial elements within the area.

For partial customization, use parameters like headerItem. Parameters that follows the form of {Component}Item are used to customize the view items in the component area through the parameters of a ViewConfig.

On the other hand, you can replace the entire view components through builders such as header. They are used to replace the entire component area with your custom SwiftUI view.

Note: When you customize a parent view, customizations in the child views will not be applied. For example, if you customize the titleView in the headerItem, the customizations of the coverImage or titleLabel in the lower view items will not be applied. The same goes for listItem.

The following diagram explains the ViewAdapter basic architecture of Sendbird Chat SwiftUI.

To view the image in full screen, click on the

The following demonstrates how to replace the ViewItems in the header area of the Sendbird Chat SwiftUI channel list View.

OpenChannelListView(
    headerItem: {
        .init()
        .leftView { viewConfig in
            Text("Left")
        }
        .rightView { viewConfig in
            Text("Right")
        }
    }
)

Sendbird Chat SwiftUI connects views to each other based on the behavior of the views. The Sendbird Chat SwiftUI View internally handles the navigation between views. Since all features are implemented by default, there is no problem using all flows without any additional processing. When you need to customize the destination view, you can do so by using the interface provided by the DestinationViewBuilder.

The following diagram explains the DestinationViewBuilder basic architecture of Sendbird Chat SwiftUI.

To view the image in full screen, click on the

The following demonstrates how to replace the groupChannelView connected to the groupChannelListView in Sendbird Chat SwiftUI.

GroupChannelListView()
    .groupChannelView { channelURL, startingPoint, messageListParams in
        GroupChannelView(
            provider: GroupChannelViewProvider(
                channelURL: channelURL,
                startingPoint: startingPoint,
                messageListParams: messageListParams
            )
        )
    }

Note : If the View under the top view is customized, all destination views connected from the top view must be configured.