Create a group channel

Create new channels in Sendbird UIKit using the GroupChannelCreateFragment. In the create group channel screen, the current user can select users from the user list to create a new group channel.

Usage

You can start building a create group channel screen by first building a fragment. To do so, call the createGroupChannelCreateFragment method. Once a create group channel 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 type { GroupChannelType, UserListContextsType } from '@sendbird/uikit-react-native';
import type { SendbirdUser } from '@sendbird/uikit-utils';

const GroupChannelCreateFragment = createGroupChannelCreateFragment<SendbirdUser>();
const GroupChannelCreateScreen = ({ route: { params } }: any) => {
    const navigateToBack = () => {};
    const replaceToGroupChannelScreen = () => {};
    const channelTypeFromGroupChannelListScreen = params.channelType as GroupChannelType;

    return (
        <GroupChannelCreateFragment
            onPressHeaderLeft={navigateToBack}
            onCreateChannel={replaceToGroupChannelScreen}
            channelType={channelTypeFromGroupChannelListScreen}
        />
    );
};

List of properties

The following table lists the properties of GroupChannelCreateFragment.

Properties

Required	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.
onCreateChannel	function	Specifies the prop to receive callback when a new channel is created. By default, the screen changes to the group channel screen.

Optional	Type	Description
channelType	string	Specifies the channel type of the new channel to create. Acceptable values are `GROUP`, `SUPER_GROUP`, and `BROADCAST`.
queryCreator	function	Creates and returns a custom user list query to retrieve a list of users when creating a channel.
renderUser	ReactElement	Renders a customized view of the user module component.
onBeforeCreateChannel	function	Specifies the prop to execute custom operations before creating a channel. You can customize the `GroupChannelParams` of this function.
sortComparator	function	Specifies the function to sort a list of users in the create group channel screen. You can customize the sorting order by passing a parameter in the method.

Context

GroupChannelCreateFragment uses UserListModule to display a list of users that the current user can select and add to create a new group channel. To store and handle data that are used to build the create group channel screen, Sendbird UIKit provides UserListContexts, which is comprised of two context objects: UserListContexts.Fragment and UserListContexts.List.

type UserListContextsType<User> = {
    Fragment: React.Context<{
        headerTitle: string;
        headerRight: string;
    }>;

    List: React.Context<{
        selectedUsers: User[];
        setSelectedUsers: React.Dispatch<React.SetStateAction<User[]>>;
    }>;
};

Fragment

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);
}

List

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

A create group channel 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

The header component displays the title of GroupChannelCreateFragment, 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 right button is selected, the onCreateChannel function is called and the group channel screen appears.

List of properties

The following table lists the properties of UserListModule.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 function passes the selected users as a parameter to create a new group channel.
left	ReactElement	Specifies a rendered view of the left button component in the header.
right	ReactElement	Specifies a rendered view of the right button component in the header.
shouldActivateHeaderRight	function	Returns `true` or `false` on whether to activate the right button component in the header. When calling this function, a list of selected users must be passed as a parameter in order to return `true`, which means the user can create a new group channel with the selected users by tapping on this button. If there are no selected users, it returns `false`. (Default: `(selectedUsers) => selectedUsers.length > 0`)

List

The list component shows a list of users' profile images, names, and selectable checkboxes. By default, all users registered to the Sendbird application are retrieved in reverse chronological order of user created date.

List of properties

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 current user's 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. (Default: `true`)
ListEmptyComponent	ReactElement	Renders a customized view of the empty user list.
renderUser	function	Renders a customized view of the user profile.

StatusLoading

The StatusLoading component exists in the UserListModule and lets the user know if the list is loading.

StatusEmpty

The StatusEmpty component exists in the UserListModule and lets the user know if the list is empty.

StatusError

The StatusError component exists in the UserListModule and lets the user know if the list fetching failed.

Customization

In the create group channel key function, you can customize the default GroupChannelCreateFragment to change various elements of the screen such as the module and its components. See the code below on how to replace the default user list query with a custom user list query as an example. The returned User instance from a custom user list query is different from the default Sendbird.User instance. This means you would need to implement your own renderUser props when using queryCreator with the custom user list query.

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

import { Text } from 'react-native';
import { UserStruct } from '@sendbird/uikit-utils';
import { CustomQuery } from '@sendbird/uikit-chat-hooks';
import { createGroupChannelCreateFragment } from '@sendbird/uikit-react-native';

interface MyAppUser extends UserStruct {
    userId: string;
    name: string;
    profile: string;
}

const myAppUserQueryCreator = () => {
    const query = createMyAppUserQuery();
    return new CustomQuery<MyAppUser>({
        hasNext(): boolean {
            return query.hasNext;
        },
        isLoading(): boolean {
            return query.isLoading;
        },
        next() {
            return query.next();
        },
    });
};

const GroupChannelCreateFragment = createGroupChannelCreateFragment<MyAppUser>({
  Header: () => <Text>{'Custom header'}</Text>,
  List: () => <Text>{'Custom list'}</Text>,
  StatusEmpty: () => <Text>{'Custom empty'}</Text>,
  StatusLoading: () => <Text>{'Custom loading'}</Text>,
  StatusError: () => <Text>{'Custom error'}</Text>,
});
const GroupChannelCreateScreen = ({ route: { params } }: any) => {
    const navigateToBack = () => {};
    const replaceToGroupChannelScreen = () => {};
    const channelTypeFromGroupChannelListScreen = params.channelType as GroupChannelType;

    return (
        <GroupChannelCreateFragment
            onPressHeaderLeft={navigateToBack}
            onCreateChannel={replaceToGroupChannelScreen}
            channelType={channelTypeFromGroupChannelListScreen}
            queryCreator={myAppUserQueryCreator}
            renderUser={(user, selectedUsers, setSelectedUsers) => {
                const selected = selectedUsers.findIndex((u) => u.userId === user.userId) > -1;
                return <MyAppUserBar selected={selected} user={user} onToggle={setSelectedUsers} />;
            }}
        />
    );
};

On this page

Usage Context

Fragment List

Module components

Header List StatusLoading StatusEmpty StatusError

Customization

Sample app