Chat UIKit React Native v2
Chat UIKit React Native
Chat UIKit
React Native
Version 2

Typing indicator

Copy link

Typing indicator is a feature that allows users to know visually if another user in the channel is typing a message. The indicator UI appears in the Header component of the GroupChannelModule. The indicator remains visible until the user sends the message or deletes the text completely. If the user stops typing for more than 10 seconds, the indicator will also disappear.

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.


How to use

Copy link

Once a group channel is created, the typing indicator feature is turned on by default through the enableTypingIndicator prop of GroupChannelFragment or GroupChannelModule.Provider. But in order to use it in a channel list view, you need to set the feature's prop to true in SendbirdUIKitContainer. Follow the code below.

import { SendbirdUIKitContainer } from '@sendbird/uikit-react-native';
const App = () => {
    return <SendbirdUIKitContainer chatOptions={{ enableChannelListTypingIndicator: true }} />;
};

Customize the UI for typing indicator

Copy link

The UI for 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...

String resource

Copy link

The following table shows a customizable property of StringSet.

CategoryPropertyDescription

LABELS

TYPING_INDICATOR_TYPINGS

A text indicating that a channel member is typing in the message input field.

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