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

Chat in a group channel

Copy link

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.


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

Copy link

The following table lists the properties of GroupChannelFragment.

Properties
RequiredTypeDescription

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.

OptionalTypeDescription

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

Copy link

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

Copy link

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

Copy link

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

Copy link

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

Copy link

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

Copy link

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

MessageList

Copy link

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

Copy link

The following table lists the properties of GroupChannelModule.MessageList.

Property nameTypeDescription

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.

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

Copy link

The following table lists the properties of GroupChannelModule.Input.

Property nameTypeDescription

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

Copy link

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

StatusEmpty

Copy link

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


Customization

Copy link

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 { Text } from 'react-native';
import { GroupChannelModule, GroupChannelMessageRenderer } from '@sendbird/uikit-react-native';

const CustomHeader: GroupChannelModule['Header'] = () => {
  return <Text>{'Custom Header'}</Text>;
};
const CustomMessageList: GroupChannelModule['MessageList'] = () => {
  return <Text>{'Custom MessageList'}</Text>;
};
const CustomInput: GroupChannelModule['Input'] = () => {
  return <Text>{'Custom Input'}</Text>;
};
const CustomEmpty: GroupChannelModule['StatusEmpty'] = () => {
  return <Text>{'Custom Empty'}</Text>;
};
const CustomLoading: GroupChannelModule['StatusLoading'] = () => {
  return <Text>{'Custom Loading'}</Text>;
};
const GroupChannelFragment = createGroupChannelFragment({
  Header: CustomHeader,
  MessageList: CustomMessageList,
  Input: CustomInput,
  StatusEmpty: CustomEmpty,
  StatusLoading: CustomLoading,
});
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}
            // 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']
            }}
        />
    );
};