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 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 the entire view or 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 list. 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 list and 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")
        }
    }
)

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

GroupChannelListView(
    list: { viewConfig in
        ScrollView {
            ForEach(viewConfig.channels) { channel in
                VStack {
                    Text("\(channel.name)")
                }
            }
        }
    }
)

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(
            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.