Typing Indicator for PubNub Chat Components for React Native

Migrate to Chat SDK

PubNub will stop supporting Chat Components on January 1, 2025 but you are welcome to contribute. Learn how to migrate to the Chat SDK here.

Subscribes to events generated by MessageInput to display information about users that are currently typing messages.

It can be displayed as a text denoting the user's name, or in a form similar to a message that can be renderer inside the Message List component.

Component

Check the source code of the Typing Indicator component and its preview on the right.

Configurable parameters

The component source code contains additional parameters that are commented out. These parameters are optional and you can use them to configure the component layout to your liking. Refer to the Parameters section for details on their usage.

Try it out

Test the component as Sue Flores (default user):

1. Choose one of the Preview tabs and click Tap to Play for the Android and iOS emulators to have the sample component up and running.

2. Type in a message in the input field and send it. While typing, you will the Sue Flores is typing... message above the input filed.

Typing Indicator restriction

In the current implementation of PubNub Chat Components for React Native, you won't see Typing Indicator for your own messages.

1. Modify the source code of the component to your liking and see the changes live on the preview. For example, you can change the theme to dark or uncomment one of the configurable parameters to see how you can modify the component's default behavior.

Parameters

You can configure the component using these parameters:

Parameter	Type	Default value	Description
showAsMessage?	boolean	false	Option to put a typing indicator inside the MessageList component to render indicators as messages.
style?	TypingIndicatorStyle & MessageListStyle	n/a	Option to provide a custom StyleSheet for the component. It will be merged with the default styles.