---
source_url: https://www.pubnub.com/docs/chat/components/react-native/ui-components/typing-indicator
title: Typing Indicator for PubNub Chat Components for React Native
updated_at: 2026-06-19T11:34:52.005Z
---

> Documentation Index
> For a curated overview of PubNub documentation, see: https://www.pubnub.com/docs/llms.txt
> For the full list of all documentation pages, see: https://www.pubnub.com/docs/llms-full.txt


# Typing Indicator for PubNub Chat Components for React Native

:::warning Migrate to Chat SDK
PubNub will stop supporting Chat Components on January 1, 2025 but you are [welcome to contribute](https://github.com/pubnub/react-chat-components). Learn how to migrate to the Chat SDK [here](https://www.pubnub.com/docs/general/resources/migration-guides/react-components-chat-sdk).
:::

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.

:::tip 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](#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.

:::tip 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](#parameters) to see how you can modify the component's default behavior.

## Parameters

You can configure the component using these parameters:

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