Typing indicator

Typing indicator is a feature that allows users to know visually if another user in the channel is typing a message. The indicator remains visible until the user sends the message or deletes the text completely. It will also disappear when the user stops typing for more than 10 seconds.

We support two types of typing indicators: Text and Bubble.

Note: In order to use the typing indicator feature, you must first create a group channel and start using the chat service. To learn how to allow users to chat in a channel, refer to the chat in a group channel page.

The text typing indicator can be used in the following places.

• In the channel list as shown in the left image. This is the channel preview in the List component of the GroupChannelListModule.
• In the channel as shown in the right image. This is the Header component of the GroupChannelModule.

To view the image in full screen, click on the

The bubble typing indicator can be used in the following place.

• In the channel. This is the MessageList component of the GroupChannelModule.

Note that the bubble typing indicator is not supported in the GroupChannelListModule.

To view the image in full screen, click on the

You can enable text and bubble typing indicators in your channel by following the code below. By default, the .Text type of typing indicator is turned on. However, you can also enable the .Bubble type here, or use both types at the same time.

import { SendbirdUIKitContainer, TypingIndicatorType } from '@sendbird/uikit-react-native';

const App = () => {
  return (
    <SendbirdUIKitContainer
      uikitOptions={{
        groupChannel: {
          enableTypingIndicator: true,
          typingIndicatorTypes: new Set([TypingIndicatorType.Bubble, TypingIndicatorType.Text]),
        }
      }}
    />
  )
}

You can enable the text typing indicator in the channel list by following the code below. You need to set the feature's setter method to true in the GroupChannelListModule. The bubble typing indicator is not supported in this module.

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

const App = () => {
  return (
    <SendbirdUIKitContainer
      uikitOptions={{
        groupChannelList: {
          enableTypingIndicator: true,
        }
      }}
    />
  )
}

The UI for text typing indicator can be customized through the string resource, which is a set of strings used to compose the screen. The StringSet interface contains UIKit string values.

Text strings for typing status can vary depending on the number of members typing in a channel:

• If one member is typing: ${string} is typing...
  
• If two members are simultaneously typing: ${string} and ${string} are typing...
  
• If more than two members are simultaneously typing: Several people are typing...
  

The following table shows a customizable property of StringSet.

interface StringSet {
    LABELS: {
        TYPING_INDICATOR_TYPINGS: (users: Sendbird.User[]) => string | undefined;
    };
}