Chat UIKit SwiftUI v3
Chat UIKit SwiftUI
Chat UIKit
SwiftUI
Version 3

Create a open channel

Copy link

In Sendbird Chat SwiftUI, you can create a open channel through the CreateOpenChannelView struct with a open 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 open 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.

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.


Initialize

Copy link

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

import SwiftUI
import SendbirdSwiftUI

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

Init parameters

Copy link

No parameters are required for this view.


Customization

Copy link

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 open channel view.

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

Partial customization

Copy link

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.

Parameter

Copy link
ParameterTypeView builders

headerItem

CreateOpenChannelType.HeaderItem

leftView
titleView
headerView

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.

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

Full customization

Copy link

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.

Parameter

Copy link
ParameterTypeView builders

list

(ViewConfig) -> some View

-

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.

CreateOpenChannelView(
    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())
            }
        }
    }
)

Full customization

Copy link

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

DestinationViewBuilder

Copy link

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