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

List channels

Copy link

A channel list shows a complete list of group channels that the current user is a member of. Once a connection with the Sendbird server is established, you can display and manage the channel list without complex implementation. All chat services built with Sendbird UIKit begin from the channel list. Note that it can only list channels that the current user is a member of and can't list other public channels the user hasn't joined.


You can start building a channel list screen by first creating a fragment. To do so, call the createGroupChannelListFragment method and display the current user's channel list. Once a channel 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.

import { createGroupChannelListFragment } from '@sendbird/uikit-react-native';

const GroupChannelListFragment = createGroupChannelListFragment();
const GroupChannelListScreen = () => {
    const navigateToGroupChannelCreateScreen = () => {};
    const navigateToGroupChannelScreen = () => {};

    return (
        <GroupChannelListFragment
            onPressCreateChannel={navigateToGroupChannelCreateScreen}
            onPressChannel={navigateToGroupChannelScreen}
        />
    );
};

List of properties

Copy link

The following table lists the properties of GroupChannelListFragment.

Properties
RequiredTypeDescription

onPressChannel

function

Specifies the prop to execute a custom navigation operation when one of the channels in a channel list is selected. By default, the screen changes to the group channel fragment.

onPressCreateChannel

function

Specifies the prop to execute a custom navigation operation with a create new channel button in the upper right corner of the screen. By default, the create group channel screen will appear.

OptionalTypeDescription

channelListQueryParams

object

Specifies the prop to set the query parameters for the channel list.

renderGroupChannelPreview

function

Renders a customized channel preview component to replace the default channelPreview component.

skipTypeSelection

boolean

Determines whether to create a group channel without selecting a channel type.

flatListProps

object

Specifies a FlatList prop that renders a list view in the list component of GroupChannelListModule.

menuItemCreator

function

Specifies a function that creates a custom action menu when a user long taps on a specific channel in the channel list. You can customize the list of action items in the menu.

collectionCreator

function

(Deprecated) Creates and returns a custom channel list collection to retrieve a list of group channels.


Context

Copy link

To store and handle data that are used to build a working channel list, Sendbird UIKit provides GroupChannelListContexts, which is comprised of two context objects: GroupChannelListContexts.Fragment and GroupChannelListContexts.TypeSelector.

type GroupChannelListContextsType = {
    Fragment: React.Context<{ headerTitle: string }>;

    TypeSelector: React.Context<{
        visible: boolean;
        show: () => void;
        hide: () => void;
        headerTitle: string;
    }>;
};

Fragment

Copy link

To retrieve data from the Chat SDK on the current user's channel list screen, you need to call the useContext hook and pass GroupChannelListContexts.Fragment as a parameter. The data is then used to render the channel list module and its components.

import { useContext } from 'react';

const Component = () => {
    const { headerTitle } = useContext(GroupChannelListContexts.Fragment);
};

TypeSelector

Copy link

You can call the useContext hook and pass GroupChannelListContexts.TypeSelector as a parameter to retrieve data from the Chat SDK on the channel type.

import { useContext } from 'react';
import { GroupChannelListContexts } from '@sendbird/uikit-react-native';

const Component = () => {
    const { headerTitle, visible, show, hide } = useContext(GroupChannelListContexts.TypeSelector);
};

Module components

Copy link

A channel list screen is composed of four module components: header, list, type selector, loading status, and empty status. These components make up the GroupChannelListModule and are used to create and display the channel list UI.

Header

Copy link

The header component displays the title of the channel list screen and a button on the top right corner which, by default, allows you to choose the type of channel you wish to create. Once the channel type is selected, the onPressCreateChannel navigation prop is called and you'll be able to create a new channel in the create group channel screen.

The list component displays a list of all channels that the current user is part of. When the current user selects one of the channels in the list, they'll be able to enter the channel and start chatting in a group channel.

List of properties

Copy link

The following table lists the properties of GroupChannelListModule.List.

Property nameTypeDescription

groupChannels

array of objects

Specifies a list of all group channels that the current user is a member of.

onLoadNext

function

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

renderGroupChannelPreview

function

Renders a customized channel preview component to replace the default channelPreview component.

menuItemCreator

function

Specifies a function that creates a custom action menu when a user long taps on a channel preview in the channel list. You can customize the list of action items in the menu.

flatListProps

object

Specifies a FlatList prop that renders a list view in the list component of GroupChannelListModule.

TypeSelector

Copy link

The TypeSelector component exists in the GroupChannelListModule and lets the user choose between group channel and Supergroup channel to create a new channel with.

List of properties

Copy link

The following table lists the properties of TypeSelector.

Property nameTypeDescription

skipTypeSelection

boolean

Determines whether to create a group channel without selecting a channel type.

onSelectType

function

Specifies the prop to execute custom operations when the channel type is selected. Based on the selected type, the onPressCreateChannel function is called.

StatusLoading

Copy link

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

StatusEmpty

Copy link

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


Customization

Copy link

In the list channel function, you can customize the default GroupChannelListFragment 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 GroupChannelListFragment as an example.

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

import { Text } from 'react-native';
import { GroupChannelListModule } from '@sendbird/uikit-react-native';

const CustomHeader: GroupChannelListModule['Header'] = () => {
  return <Text>{'Custom Header'}</Text>;
};
const CustomList: GroupChannelListModule['List'] = () => {
  return <Text>{'Custom List'}</Text>;
};
const CustomEmpty: GroupChannelListModule['StatusEmpty'] = () => {
  return <Text>{'Custom Empty'}</Text>;
};
const CustomLoading: GroupChannelListModule['StatusLoading'] = () => {
  return <Text>{'Custom Loading'}</Text>;
};

const GroupChannelListFragment = createGroupChannelListFragment({
  Header: CustomHeader,
  List:CustomList, 
  StatusEmpty: CustomEmpty,
  StatusLoading: CustomLoading,
});

const CustomGroupChannelListScreen = () => {
    const navigateToGroupChannelCreateScreen = () => {};
    const navigateToGroupChannelScreen = () => {};

    return (
        <GroupChannelListFragment
            onPressCreateChannel={navigateToGroupChannelCreateScreen}
            onPressChannel={navigateToGroupChannelScreen}
            // Render custom channel preview
            renderGroupChannelPreview={(props) => {
              return <CustomChannelPreview {...props} />;
            }}
            // Apply query parameters for channel list
            channelListQueryParams={{
              includeEmpty: true,
              includeFrozen: false,
            }}
        />
    );
};