Chat UIKit React Native v3

Chat UIKit React Native

Chat UIKit

React Native

Version 3

Chat in a open channel

An open channel is a public chat that allows a massive number of users to interact with one another in a more dynamic environment. Open channels can accommodate up to 1,000 simultaneous users and don’t require an invitation for users to enter.

Usage

You can start building an open channel screen by first creating a fragment. To do so, call the createOpenChannelFragment method. Once an open 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.

TypeScript

import { useSendbirdChat, createOpenChannelFragment } from '@sendbird/uikit-react-native';
import { useOpenChannel } from "@sendbird/uikit-chat-hooks";

const OpenChannelFragment = createOpenChannelFragment();

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

    const navigateToBack = () => {};
    const navigateToOpenChannelList = () => {};
    const navigateToOpenChannelParticipants = () => {};
    const navigateToOpenChannelSettings = () => {};

    return (
        <OpenChannelFragment
            channel={channel}
            onPressHeaderLeft={navigateToBack}
            onPressHeaderRightWithSettings={navigateToOpenChannelSettings}
            onPressHeaderRightWithParticipants={navigateToOpenChannelParticipants}
            onChannelDeleted={navigateToOpenChannelList}
        />
    );
};

List of properties

The following table lists the properties of OpenChannelFragment.

Properties

Required	Type	Description
channel	object	Specifies the open channel that the current user is a participant of.
onChannelDeleted	function	Specifies the prop to execute custom operations when the user is banned from a channel or when a channel is 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.
onPressHeaderRightWithSettings	function	Specifies the prop to execute a custom navigation operation when an operator selects the button on the top right corner of the header component. By default, the open channel settings screen appears.
onPressHeaderRightWithParticipants	function	Specifies the prop to execute a custom navigation operation when a participant selects the button on the top right corner of the header component. By default, the open channel participants screen appears.

Optional	Type	Description
onBeforeSendFileMessage	function	Specifies the prop to execute custom operations before sending a file message. The customized file message is returned through `FileMessageCreateParams`.
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.
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 `OpenChannelModule`.
queryCreator	function	Specifies the prop to create a custom `PreviousMessageListQuery`.
sortComparator	function	Specifies the function to sort a list of messages in the open channel screen. You can customize the sorting order by passing a parameter in the method.

Context

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

TypeScript

type OpenChannelContextsType = {
    Fragment: React.Context<{
        headerTitle: string;
        channel: Sendbird.OpenChannel;
        messageToEdit?: Sendbird.UserMessage | Sendbird.FileMessage;
        setMessageToEdit: (msg?: Sendbird.UserMessage | Sendbird.FileMessage) => void;
        keyboardAvoidOffset?: number;
    }>;
};

Fragment

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

TypeScript

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

Module components

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

Header

The header component displays the title of the open 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 current user is an operator and selects the right button, onPressHeaderRightWithSettings is called and the open channel settings screen appears. If the current user is not an operator and selects the right button, onPressHeaderRightWithParticipants is called and the open channel participants screen appears.

List of properties

The following table lists the props of OpenChannelModule.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 open channel settings screen appears.
rightIconName	string	Specifies the prop that name of the icon to be displayed on the header on the right side, which varies depending on whether the current user is an operator or not.

MessageList

The message list component shows a list of all messages exchanged in the open 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 OpenChannelModule.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 `OpenChannelModule`.
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 `OpenChannelModule`.
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.

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 OpenChannelModule.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 OpenChannelModule and lets the user know if the list is loading.

StatusEmpty

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

Customization

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

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

TypeScript

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

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

import { OpenChannelContexts, OpenChannelModule, OpenChannelMessageRenderer } from '@sendbird/uikit-react-native';
import { useOpenChannel } from "@sendbird/uikit-chat-hooks";

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

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

  return null;
};

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

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

  const navigateToBack = () => {};
  const navigateToOpenChannelList = () => {};
  const navigateToOpenChannelParticipants = () => {};
  const navigateToOpenChannelSettings = () => {};

  return (
    <OpenChannelFragment
      keyboardAvoidOffset={height}
      channel={channel}
      onPressHeaderLeft={navigateToBack}
      onPressHeaderRightWithSettings={navigateToOpenChannelSettings}
      onPressHeaderRightWithParticipants={navigateToOpenChannelParticipants}
      onChannelDeleted={navigateToOpenChannelList}
      // Render custom message
      renderMessage={(props) => {
        if(props.message.customType === 'donation') {
          return <DonationMessage {...props} />
        }
        return <OpenChannelMessageRenderer {...props} />
      }}
    />
  );
};

On this page

Usage Context

Fragment

Module components

Header MessageList Input StatusLoading StatusEmpty

Customization

Sample app