Chat UIKit React Native v3
Chat UIKit React Native
Chat UIKit
React Native
Version 3

Register members as operators

Copy link

Operators can register other channel members as operators through the GroupChannelRegisterOperatorFragment. All channel members are listed through pagination and members who are already an operator can't be registered.


You can start building a register members as operators screen by first creating a fragment. To do so, call the createGroupChannelRegisterOperatorFragment method. Once a register members as operators fragment is built, you need to set up the navigation props and register the screen to a navigation library. Refer to the code below.

import React from 'react';

import { useGroupChannel } from '@sendbird/uikit-chat-hooks';
import { createGroupChannelRegisterOperatorFragment, useSendbirdChat } from '@sendbird/uikit-react-native';

const GroupChannelRegisterOperatorFragment = createGroupChannelRegisterOperatorFragment();
const GroupChannelRegisterOperatorScreen = ({ route: { params } }: any) => {
  const { sdk } = useSendbirdChat();
  const { channel } = useGroupChannel(sdk, params.channelUrl);
  if (!channel) return null;
  
  const navigateToBack = () => {};
  const navigateToGroupChannelOperatorsScreen = () => {};
  
  return (
    <GroupChannelRegisterOperatorFragment
      channel={channel}
      onPressHeaderLeft={navigateToBack}
      onPressHeaderRight={navigateToGroupChannelOperatorsScreen}
    />
  );
};

List of properties

Copy link

The following table lists the properties of GroupChannelRegisterOperatorFragment.

Properties
RequiredTypeDescription

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 group channel operators screen appears.

OptionalTypeDescription

renderUser

function

Renders a customized view of the user profile.

sortComparator

function

Specifies the function to sort a list of users in the register members as operators screen. You can customize the sorting order by passing users as a parameter in the method.


Context

Copy link

GroupChannelRegisterOperatorFragment uses UserListModule to display a list of members of a channel. To store and handle data that are used to build the user list screen, Sendbird Chat UIKit provides UserListContexts, which is comprised of two context objects: Fragment and List.

type UserListContextsType<User> = {
    Fragment: React.Context<{
        headerTitle: string;
        headerRight: string;
    }>;
    List: React.Context<{
        selectedUsers: User[];
        setSelectedUsers: React.Dispatch<React.SetStateAction<User[]>>;
    }>;
};

Fragment

Copy link

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.

import { useContext } from 'react';
import { UserListContexts } from "@sendbird/uikit-react-native";
const Component = () => {
    const { headerTitle, headerRight } = useContext(UserListContexts.Fragment);
};

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.

import { useContext } from 'react';
import { UserListContexts } from "@sendbird/uikit-react-native";
const Component = () => {
    const { selectedUsers, setSelectedUsers } = useContext(UserListContexts.List);
};

Module components

Copy link

A register members as operators screen is composed of five module components: header, list, loading status, empty status, and error status. These components make up the UserListModule and are used to create and display the UI of the screen.

Header

Copy link

The header component displays the title of GroupChannelRegisterOperatorFragment, a button on the top left corner, and a 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 add button on the right is selected, the selected users are registered as operator to the channel. The onPressHeaderRight function is called and the operator list screen appears.

List of properties

Copy link

The following table lists the properties of UserListModule.Header.

Property nameTypeDescription

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 function passes the selected users as a parameter to register them as operators of the channel and the channel gets updated.

The list component shows a list of users' profile images, names, and selectable checkboxes. By default, all members of the channel are listed.

List of properties

Copy link

The following table lists the properties of UserListModule.List.

Property nameTypeDescription

users

array of objects

Specifies a list of all users that appear on the user list.

onLoadNext

function

Specifies the prop to execute custom operations when loading more user list items.

onRefresh

function

Specifies the prop to execute custom operations when refreshing the user list.

refreshing

boolean

Determines whether the user list is refreshing or not after onRefresh is called.

ListEmptyComponent

ReactElement

Renders a customized view of the empty user list.

renderUser

function

Renders a customized view of the user profile.

StatusLoading

Copy link

The StatusLoading component lets the user know if the list is loading.

StatusEmpty

Copy link

The StatusEmpty component lets the user know if the list is empty.

StatusError

Copy link

The StatusError component lets the user know if the list fetching has failed.


Customization

Copy link

In the register as operator key function, you can customize the default GroupChannelRegisterOperatorFragment 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 GroupChannelRegisterOperatorFragment as an example.

Note: To learn more about how to customize a fragment, go to the Fragment page.

import { Text } from 'react-native';

const GroupChannelRegisterOperatorFragment = createGroupChannelRegisterOperatorFragment({
  Header: () => <Text>{'Custom Header'}</Text>,
  List: () => <Text>{'Custom List'}</Text>,
  StatusLoading: () => <Text>{'Custom Loading'}</Text>,
  StatusEmpty: () => <Text>{'Custom Empty'}</Text>,
  StatusError: () => <Text>{'Custom Error'}</Text>,
});
const GroupChannelRegisterOperatorScreen = ({ route: { params } }: any) => {
    const { sdk } = useSendbirdChat();
    const { channel } = useGroupChannel(sdk, params.channelUrl);
    if (!channel) return null;
    
    const navigateToBack = () => {};
    const navigateToGroupChannelOperatorsScreen = () => {};
    
    return (
        <GroupChannelRegisterOperatorFragment
            channel={channel}
            onPressHeaderLeft={navigateToBack}
            onPressHeaderRight={navigateToGroupChannelOperatorsScreen}
        />
    );
};