Create a group channel

In Sendbird Chat SwiftUI, you can create a group channel through the CreateGroupChannelView struct with a group of selected users. The list is organized and displayed according to your pagination settings. If you don't have a specific list of users you wish to add to your app, all users who are using your chat service is displayed in the user list by default.

When a group channel is first created, it's given a name and a cover image by default. The channel name is set as all the channel member nicknames combined and its cover image is set as an image that combines all profile images of the channel members.

To view the image in full screen, click on the

If you set the starting point of your chat service to be the channel list, you can seamlessly guide your users to the create channel view. Once a new channel is successfully created, a channel view will appear immediately on the user's screen. The user who created the channel becomes the operator of the channel by default.

Note: If the channel type is set during initialization, the new channel is created as the selected type.

You can start building a create channel view by initializing the CreateGroupChannelView struct. The view displays a list of users to select channel members from. Once the members have been chosen, a new group channel will be created.

import SwiftUI
import SendbirdSwiftUI

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

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.

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.

CreateGroupChannelView(
    headerItem: {
        .init()
        .leftView { config in
            Text("LEFT")
                .foregroundStyle(.blue) 
        }
    }
)

You can also customize the entire view area as desired. You simply need to return a SwiftUI View in the closure. The ViewConfig contains the data needed to render the view. Its parameters can be found in the table below.

The following code demonstrates how to replace the entire list area using the list parameter.

Note : When you customize a parent view, customizations in the child views will not be applied. For example, if you customize the entire area through the list, the customizations set in the listItem will not be applied.

CreateGroupChannelView(
    list: { config in
        List(config.users, id: \.self) { user in
            Button {
                config.parentView.onSelectUser(user)
            } label: {
                HStack {
                    Circle()
                        .frame(width: 12, height: 12)
                        .foregroundStyle(config.selectedUsers.contains(user) ? .green : .red)
                    Text("\(user.refinedNickname())")
                        .foregroundStyle(.black)
                }
                .contentShape(Rectangle())
            }
        }
    }
)

This screen has no DestinationViewBuilder because there's no navigational elements, such as buttons or links to other screens.