A member list is a complete list of users that are members of a group channel. The channel member list is created through GroupChannelMembersFragment
.
You can start building a member list screen by first creating a fragment. To do so, call the GroupChannelMembersFragment
method. Once a member list fragment is built, you need to set up the navigation props and register the screen to a navigation library. Refer to the code below.
The following table lists the properties of GroupChannelMembersFragment
.
Properties
Required | Type | Description |
---|---|---|
channel | object | Specifies the group channel that the current user is a member of. |
onPressHeaderLeft | function | Specifies the prop to execute custom navigation operations when the button on the top left corner of the header component is selected. By default, the screen goes back to the previous screen. |
onPressHeaderRight | function | Specifies the prop to receive callback when the button on the top right corner of the header component is selected. By default, the screen changes to the invite user screen where you can add new users to the channel. |
Optional | Type | Description |
---|---|---|
renderUser | ReactElement | Renders a customized view of the user profile. |
sortComparator | function | Specifies the function to sort a list of users in the member list screen. You can customize the sorting order by passing a parameter in the method. |
GroupChannelMembersFragment
uses UserListModule
to display a list of members of a channel. To store and handle data that are used to build the member list screen, Sendbird UIKit provides UserListContexts
, which is comprised of two context objects: UserListContexts.Fragment
and UserListContexts.List
.
To retrieve user list data from the Chat SDK, you need to call the useContext
hook and pass UserListContexts.Fragment
as a parameter. The data is then used to render the user list module.
You can call the useContext
hook and pass UserListContexts.List
as a parameter to retrieve user list data from the Chat SDK. The data is then used to render the list component of UserListModule
.
A member list screen is composed of three module components: header, member list, and empty status. These components make up the UserListModule
and are used to create and display the UI of the screen.
The header component displays the title of GroupChannelMembersFragment
, a button on the top left corner, and a button the top right corner. By default, the left button allows you to go back to the previous screen and when selected, the onPressHeaderLeft
navigation prop is called. When the add button on the right is selected, the onPressHeaderRight
navigation prop is called and the invite user screen appears where you can add new users to the channel.
The following table lists the properties of UserListModule.Header
.
Property name | Type | Description |
---|---|---|
onPressHeaderLeft | function | Specifies the prop to execute custom navigation operations when the button on the top left corner of the header component is selected. By default, the screen goes back to the previous screen. |
onPressHeaderRight | function | Specifies the prop to receive callback when the button on the top right corner of the header component is selected. By default, the screen changes to the invite user screen where you can add new users to the channel. |
right | ReactElement | Renders a customized view of the right button component in the header. |
The list component shows a list of profile images and names of all members of the channel.
The following table lists the properties of UserListModule.List
.
Property name | Type | Description |
---|---|---|
users | array of objects | Specifies a list of all users that appear on the member list. |
ListEmptyComponent | ReactElement | Renders a customized view of the empty member list. |
renderUser | ReactElement | Renders a customized view of the user profile. |
The StatusEmpty
component exists in the UserListModule
and lets the user know if the list is empty.
In the member list key function, you can customize the default GroupChannelMembersFragment
to change various elements of the screen such as the module and its components. See the code below on how to render the member list using a custom module component.
Note: To learn more about how to customize a fragment, go to the Fragment page.