List channels

The GroupChannelListView is a struct that is used to build a group channel list view. When there is no connection between the client app and Sendbird server, this struct is automatically called to reconnect the two. Once the client app is connected to Sendbird server, the struct is called and a list of channels in the client app is displayed. GroupChannelListView also handles core features including pagination and real-time updates. In many cases, the channel list is a good place to start your chat service.

To view the image in full screen, click on the

Refer to the table below to see what features are available in GroupChannelListView.

You can start building a channel list view by initializing the GroupChannelListView struct. If you want to use the default channel list query, you can simply call GroupChannelListView(). If you want to use a custom channel list query, you can set the channelListQuery object in GroupChannelListViewProvider and pass it into GroupChannelListView when initializing.

Note: You can set the channelListQuery object when initializing GroupChannelListView. Otherwise, the default value is used.

import SwiftUI
import SendbirdSwiftUI
import SendbirdChatSDK

struct ContentView: View {
    @StateObject var provider = GroupChannelListViewProvider()
    
    var body: some View {
        GroupChannelListView(provider: provider)
    }
}

GroupChannelListViewProvider provides various data and methods related to the GroupChannelListView that you can use to customize the view.

GroupChannelListViewProvider provides various data and methods related to the GroupChannelListView that you can use to customize the view. The below are @Published properties that you can access from the GroupChannelListViewProvider.

The below is an example of using GroupChannelListViewProvider data and methods.

import SwiftUI
import SendbirdSwiftUI

struct ContentView: View {
    @StateObject var provider: GroupChannelListViewProvider
    
    init() {
        // Set your custom list query parameters
        let params = GroupChannelListQueryParams()
        params.order = .channelNameAlphabetical
        
        let channelListQuery = GroupChannel.createMyGroupChannelListQuery(params: params)
        _provider = StateObject(wrappedValue: GroupChannelListViewProvider(channelListQuery: channelListQuery))
    }
    
    var body: some View {
        GroupChannelListView(
            provider: provider,
            headerItem: {
                .init()
                .titleView { config in
                    Text("\(provider.channels.count) channels")
                }
            }
        )
    }
}

You can handle events of GroupChannelListView by using the event interfaces provided by Sendbird Chat SwiftUI. The below is a list of event interfaces that you can use to handle events in GroupChannelListView. There are more available interfaces [here](TODO: replace with ref doc URL).

The following is an example of how to handle events in the GroupChannelListView.

import SwiftUI
import SendbirdSwiftUI

struct ContentView: View {
    @StateObject var provider: GroupChannelListViewProvider
    
    init() {
        let params = GroupChannelListQueryParams()
        params.order = .channelNameAlphabetical
        
        let channelListQuery = GroupChannel.createMyGroupChannelListQuery(params: params)
        _provider = StateObject(wrappedValue: GroupChannelListViewProvider(channelListQuery: channelListQuery))
    }
    
    var body: some View {
        GroupChannelListView(provider: provider)
            .onSendbirdSelectRow { indexPath in
                // Do something when a row is selected
            }
            .onSendbirdSelectLeaveChannel { channel in
                // Leave the channel
            }
            .onSendbirdChangePushTriggerOption { channel in
                // Change the push trigger option
            }
    }
}

Sendbird Chat SwiftUI provides a View customization and DestinationViewBuilder.

• View customization: Our SwiftUI SDK allows you to selectively customize view elements. To learn more about the customization and our SwiftUI is designed, see the customization guide.
• DestinationViewBuilder: Use DestinationViewBuilder to customize the destination views that are navigatable from the group channel view.

You can use data and methods from the View Provider when customize the View.

Note : Visit our Github Sample to see the custom sample implementation for each item.

You can easily customize a specific part of a View, which particularly comes in handy when changing only a certain area in the View. To do so, use the View Builders that Sendbird has predefined and its a ViewConfig. The ViewConfig contains the data needed to render the view and its parameters can be found in the table below.

The following code demonstrates how to replace the view items using headerItem. All other {Component}Items can be used in the same way.

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.

GroupChannelListView(
    headerItem: {
        .init()
        .titleView { viewConfig in
            Text("My Group Channels")
                .fontWeight(.bold)
        }
    }
)

At this moment, this screen does not support entire customization.

Sendbird Chat SwiftUI is designed to internally navigate from each view to its connected view. However, if you need to customize the destination view, you can do so by using the interface provided by the DestinationViewBuilder.

The following code demonstrates how to replace the channel settings view connected from the channel view.

GroupChannelListView()
.groupChannelView { channelURL, startingPoint, messageListParams in
    // Customize the messageListParams.
    messageListParams?.previousResultSize = 30
    messageListParams?.replyType = .onlyReplyToChannel
    messageListParams?.includeParentMessageInfo = true
    
    return GroupChannelView(
        provider: GroupChannelViewProvider(
            channelURL: channelURL,
            startingPoint: startingPoint,
            messageListParams: messageListParams
        )
    )
    // you can also add view adaptors to GroupChannelView.
}

Note : If you've customized a child view of another view, you need to set the destination view for all the views from the top to the destination view.