An operator list is a complete list of operators of a group channel. The operator list is created through GroupChannelOperatorsFragment
.
You can start building an operator list screen by first creating a fragment. To do so, call the createGroupChannelOperatorsFragment
method. Once an operator 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 GroupChannelOperatorsFragment
.
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 a custom navigation operation 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 execute a custom navigation operation when the button on the top right corner of the header component is selected. By default, the screen changes to the group channel register operator screen where you can add new operator to the channel. |
Optional | Type | Description |
---|---|---|
renderUser | function | Renders a customized view of the user profile. |
To store and handle data that are used to build the operator list screen, Sendbird UIKit provides GroupChannelOperatorsContexts
, which includes the Fragment
context object.
To retrieve data from the Chat SDK on the current user's operator list screen, you need to call the useContext
hook and pass GroupChannelOperatorsContexts.Fragment
as a parameter. The data is then used to render the operator list module and its components.
An operator list screen is composed of five module components: header, list, loading status, loading error, and empty status. These components make up the GroupChannelOperatorsModule
and are used to create and display the UI of the screen.
The header component displays the title of the group channel, a button on the top left corner, and another button on 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 right button is selected, onPressHeaderRight
is called and the group channel settings screen appears.
The following table lists the properties of GroupChannelOperatorsModule.Header
.
Property name | Type | Description |
---|---|---|
onPressHeaderLeft | function | Specifies the prop to execute a custom navigation operation 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 execute a custom navigation operation when the button on the top right corner of the header component is selected. By default, the screen changes to the group channel register operator screen where you can add new operator to the channel. |
The list component shows a list of profile images and names of operators of the channel.
The following table lists the properties of GroupChannelOperatorsModule.List
.
Property name | Type | Description |
---|---|---|
operators | array of objects | Specifies a list of operators. |
onLoadNext | function | Specifies the prop to execute custom operations when loading more user list items. |
renderUser | function | Renders a customized view of the user profile. |
ListEmptyComponent | ReactElement | Renders a customized view of the empty user list. |
The StatusLoading
component lets the user know if the list is loading.
The StatusEmpty
component lets the user know if the list is empty.
The StatusError
component lets the user know if the list fetching has failed.
In the list operators in group channel key function, you can customize the default GroupChannelOperatorsFragment
to change various elements of the screen such as the module and its components. See the code below on how to replace the default header component with a custom header component in GroupChannelOperatorsFragment
as an example.
Note: To learn more about how to customize a fragment, go to the Fragment page.