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

List members in a group channel

Copy link

In Sendbird Chat SwiftUI, you can retrieve a list of members of a group channel through the GroupUserListView struct. This struct is used to display a list of channel members, operators, muted members, and banned users.

Note: If you set the starting point of your chat service to be the channel list, group channel, or channel settings, you can seamlessly guide your users to the member list view.


Types of user list

Copy link

There are four different types of list view that display users or members of GroupChannel.

ViewDescription

GroupMemberListView

A list of members in the group channel.

GroupOperatorListView

A list of operators in the channel.

GroupMutedMemberListView

A list of muted users in the channel.

GroupBannedUserListView

A list of banned users from the channel.


Initialize

Copy link

You can start building a member list view using the GroupMemberListView, GroupOperatorListView, GroupMutedMemberListView, or GroupBannedUserListView. Each struct can be used to create specific views tailored to different participant lists. Use the init(provider:) initializer to create the instance and display the view as shown below.

import SwiftUI
import SendbirdSwiftUI 

struct ContentView: View {
    @ObservedObject var provider: GroupMemberListViewProvider

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

Init parameters

Copy link
ParameterTypeRequired

channelURL

String

o

users

[SBUUser]

x

userListType

ChannelUserListType

x


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 group 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

GroupMemberListView

ParameterTypeView builders

headerItem

() -> GroupUserListType.HeaderItem

leftView
rightView
titleView

listItem

() -> GroupUserListType.ListItem

rowView
- profileImage
- userName
- operatorStateView
- moreButton

GroupOperatorListView

ParameterTypeView builders

headerItem

() -> GroupOperatorListType.HeaderItem

leftView
rightView
titleView

listItem

() -> GroupOperatorListType.ListItem

rowView
- profileImage
- userName
- moreButton

GroupMutedMemberListView

ParameterTypeView builders

headerItem

() -> GroupMutedMemberListType.HeaderItem

leftView
rightView
titleView

listItem

() -> GroupMutedMemberListType.ListItem

rowView
- profileImage
- userName
- operatorStateView
- moreButton

GroupBannedUserListView

ParameterTypeView builders

headerItem

() -> GroupBannedUserListType.HeaderItem

leftView
rightView
titleView

listItem

() -> GroupBannedUserListType.ListItem

rowView
- profileImage
- userName
- moreButton

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.

GroupUserListView(
    provider: provider,
    headerItem: {
        .init()
        .leftView { config in
            Text("Left")
                .foregroundStyle(.blue)
        }
    }
)

Full customization

Copy link

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

DestinationViewBuilder

Copy link

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.

DestinationViewBuilder method

Copy link
MethodViewBuilder type

inviteUserView

InviteUserViewBuilder

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

GroupMemberListView(provider: provider)
    .inviteUserView { channelURL in
        InviteUserView(provider: InviteUserViewProvider(channelURL: channelURL))
    }

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.