Chat UIKit React Native v3

Chat UIKit React Native

Chat UIKit

React Native

Version 3

Chat in a group channel

A group channel is a chat that allows close interactions between a limited number of users. In order to join this type of channel, an invitation from a channel member is required. Users can either create 1-to-1 group channels or 1-to-N group channels.

Usage

You can start building a group channel screen by first creating a fragment. To do so, call the createGroupChannelFragment method. Once a 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 { useSendbirdChat, createGroupChannelFragment } from '@sendbird/uikit-react-native';
import { useGroupChannel } from "@sendbird/uikit-chat-hooks";

const GroupChannelFragment = createGroupChannelFragment();

const GroupChannelScreen = ({ route: { params } }: any) => {
    const { sdk } = useSendbirdChat();
    const { channel } = useGroupChannel(sdk, params.channelUrl);
    if (!channel) return null;

    const navigateToGroupChannelListScreen = () => {};
    const navigateToGroupChannelSettingsScreen = () => {};
    const navigateToBack = () => {};

    return (
        <GroupChannelFragment
            channel={channel}
            onPressHeaderLeft={navigateToBack}
            onPressHeaderRight={navigateToGroupChannelSettingsScreen}
            onChannelDeleted={navigateToGroupChannelListScreen}
        />
    );
};

List of properties

The following table lists the properties of GroupChannelFragment.

Properties

Required	Type	Description
channel	object	Specifies the group channel that the current user is a member of.
onChannelDeleted	function	Specifies the prop to execute custom operations when the user is banned from a channel or when a channel gets deleted. Once this function is called, the user is redirected to the channel list screen.
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 settings screen appears.

Optional	Type	Description
messageListQueryParams	object	Specifies the prop to set the query parameters for the message list.
onBeforeSendFileMessage	function	Specifies the prop to execute custom operations before sending a file message. The customized file message is returned through `FileMessageCreateParams` before sending it.
onBeforeSendUserMessage	function	Specifies the prop to execute custom operations before sending a user message. The customized user message is returned through `UserMessageCreateParams` before sending it.
onBeforeUpdateFileMessage	function	Specifies the prop to execute custom operations before updating a file message. The customized file message is returned through `FileMessageUpdateParams` before updating it.
onBeforeUpdateUserMessage	function	Specifies the prop to execute custom operations before updating a user message. The customized user message is returned through `UserMessageUpdateParams` before updating it.
onPressMediaMessage	function	Specifies the prop to execute custom operations when the user taps on a file message that contains a media file.
renderMessage	ReactElement	Renders a customized view of the message in a channel.
renderNewMessagesButton	ReactElement	Renders a customized view of a button that lets users know there are new messages in the channel and directs them to the latest message.
renderScrollToBottomButton	ReactElement	Renders a customized view of a button that allows users to scroll to the most recent message sent in the channel.
enableTypingIndicator	boolean	Determines whether to turn on the typing indicator feature in the channel. (Default: `true`)
enableMessageGrouping	boolean	Determines whether to turn on message grouping in a channel. (Default: `true`)
keyboardAvoidOffset	number	Specifies the prop to render KeyboardAvoidingView. It's used when the message input module component needs to be placed directly above the keyboard. The value of this prop sets the adjusted y position of the keyboard.
flatListProps	object	Specifies a FlatList prop that renders a list view in the message list component of `GroupChannelModule`.
sortComparator	function	Specifies the function to sort a list of messages in the group channel screen. You can customize the sorting order by passing a parameter in the method.
searchItem	object	Specifies the search item to be included in the list of messages.
~~collectionCreator~~	function	*(Deprecated)* Specifies the prop to create a custom `MessageCollection`.

Context

To store and handle data that are used to build the group channel screen, Sendbird UIKit provides GroupChannelContexts, which is comprised of two context objects: GroupChannelContexts.Fragment and GroupChannelContexts.TypingIndicator.

type GroupChannelContextsType = {
    Fragment: React.Context<{
        headerTitle: string;
        keyboardAvoidOffset?: number;
        channel: Sendbird.GroupChannel;
        messageToEdit?: Sendbird.UserMessage | Sendbird.FileMessage;
        setMessageToEdit: (msg?: Sendbird.UserMessage | Sendbird.FileMessage) => void;
        messageToReply?: SendbirdUserMessage | SendbirdFileMessage;
        setMessageToReply: (msg?: SendbirdUserMessage | SendbirdFileMessage) => void;
    }>;

    TypingIndicator: React.Context<{
        typingUsers: Sendbird.User[];
    }>;
};

Fragment

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

const Component = () => {
    const {
        headerTitle,
        keyboardAvoidOffset,
        channel,
        messageToEdit,
        setMessageToEdit,
        messageToReply,
        setMessageToReply,
    } = useContext(GroupChannelContexts.Fragment);
};

Typing indicator

You can call the useContext hook and pass GroupChannelListContexts.TypingIndicator as a parameter to retrieve data from the Chat SDK on whether the typing indicator feature is turned on for the channel.

const Component = () => {
    const { typingUsers } = useContext(GroupChannelContexts.TypingIndicator);
};

Module components

A group channel screen is composed of five module components: header, message list, message input, loading status, and empty status. These components make up the GroupChannelModule and are used to create and display the group channel UI.

Header

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.

List of properties

The following table lists the props of GroupChannelModule.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 group channel settings screen appears.

MessageList

The message list component shows a list of all messages exchanged in the group channel in a chronological order. The list shows both text and file messages, and messages sent by the current user are differentiated from those sent by other channel members.

List of properties

The following table lists the properties of GroupChannelModule.MessageList.

Property name	Type	Description
enableMessageGrouping	boolean	Determines whether to turn on message grouping in a channel. (Default: `true`)
currentUserId	string	Specifies the user ID of the current user.
channel	object	Specifies the channel that the current user is a member of.
messages	array of objects	Specifies the messages shown in the message list component of `GroupChannelModule`.
newMessages	array of objects	Specifies a group of most recently sent messages except for messages sent by the channel admin, the current user, or any updated messages in a channel.
onTopReached	function	Specifies the prop to execute custom operations when the current user has reached the very top of the message list in the channel.
onBottomReached	function	Specifies the prop to execute custom operations when the current user has reached the very bottom of the message list in the channel.
onResendFailedMessage	function	Specifies the prop to execute custom operations when the current user tries to resend a message that failed to send.
onDeleteMessage	function	Specifies the prop to execute custom operations when the current user deletes a message in the channel.
onPressMediaMessage	function	Specifies the prop to execute custom operations when the user selects a file message that contains a media file.
renderMessage	function	Renders a customized view of the message in a channel.
renderNewMessagesButton	function	Renders a customized view of a button that lets users know there are new messages in the channel and directs them to the latest message.
renderScrollToBottomButton	function	Renders a customized view of a button that allows users to scroll to the most recent message sent in the channel.
flatListProps	object	Specifies a FlatList prop that renders a list view in the message list component of `GroupChannelModule`.
scrolledAwayFromBottom	boolean	Determines whether to have the scroll move away from the bottom of the message list. This can help you create or remove buttons such as `scroll to bottom`.
onScrolledAwayFromBottom	function	Specifies the prop to execute custom operations when the scroll moves away from the bottom of the message list.
hasNext	function	Specifies the prop function to determine whether the message collection can retrieve the next messages. Depending on this function, you can determine whether or not to display the most recent messages before scrolling to the bottom of the message list.
searchItem	object	Specifies the search item to be included in the list of messages.

Input

The message input component is where the user can either enter a text message or send a file message by importing a file, image or video.

List of properties

The following table lists the properties of GroupChannelModule.Input.

Property name	Type	Description
shouldRenderInput	boolean	Determines whether to render the message input component.
onPressSendUserMessage	function	Specifies the prop to execute custom operations when the current user sends a user message to the channel.
onPressSendFileMessage	function	Specifies the prop to execute custom operations when the current user sends a file message to the channel.
onPressUpdateUserMessage	function	Specifies the prop to execute custom operations when the current user updates a user message already sent to the channel.
onPressUpdateFileMessage	function	Specifies the prop to execute custom operations when the current user updates a file message already sent to the channel.

StatusLoading

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

StatusEmpty

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

Customization

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

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

import React, { useContext, useLayoutEffect } from 'react';
import { Pressable } from 'react-native';

import { useNavigation } from '@react-navigation/native';
import { useHeaderHeight } from '@react-navigation/elements';

import { GroupChannelContexts, GroupChannelModule, GroupChannelMessageRenderer } from '@sendbird/uikit-react-native';
import { Icon } from '@sendbird/uikit-react-native-foundation';
import { useGroupChannel } from "@sendbird/uikit-chat-hooks";

const UseReactNavigationHeader: GroupChannelModule['Header'] = ({ onPressHeaderRight, onPressHeaderLeft }) => {
    const navigation = useNavigation();
    const { headerTitle } = useContext(GroupChannelContexts.Fragment);

    useLayoutEffect(() => {
        navigation.setOptions({
            headerShown: true,
            title: headerTitle,
            headerLeft: () => (
                <Pressable onPress={onPressHeaderLeft}>
                    <Icon icon={'arrow-left'} />
                </Pressable>
            ),
            headerRight: () => (
                <Pressable onPress={onPressHeaderRight}>
                    <Icon icon={'info'} />
                </Pressable>
            ),
        });
    }, []);

    return null;
};

const GroupChannelFragment = createGroupChannelFragment({
    Header: UseReactNavigationHeader, // Hide header and use react-navigation header
});
const GroupChannelScreen = ({ route: { params } }: any) => {
    const height = useHeaderHeight();

    const { sdk } = useSendbirdChat();
    const { channel } = useGroupChannel(sdk, params.channelUrl);
    if (!channel) return null;

    const navigateToGroupChannelListScreen = () => {};
    const navigateToGroupChannelSettingsScreen = () => {};
    const navigateToBack = () => {};

    return (
        <GroupChannelFragment
            keyboardAvoidOffset={height}
            channel={channel}
            onPressHeaderLeft={navigateToBack}
            onPressHeaderRight={navigateToGroupChannelSettingsScreen}
            onChannelDeleted={navigateToGroupChannelListScreen}
            // Render custom message
            renderMessage={(props) => {
                if(props.message.customType === 'Advertise') {
                    return <AdvertiseMessage {...props} />
                }
                return <GroupChannelMessageRenderer {...props} />
            }}
            // Apply query parameters for message list
            messageListQueryParams={{
              prevResultLimit: 20,
              customTypesFilter: ['filter']
            }}
        />
    );
};

On this page

Usage Context

Fragment Typing indicator

Module components

Header MessageList Input StatusLoading StatusEmpty

Customization

Sample app