# TypingIndicator

> **Info:** This is release candidate documentation for **Stream Chat React Native SDK v10**. For the latest stable version, see the [latest version (v9)](https://getstream.io/chat/docs/sdk/react-native/).

`TypingIndicator` shows who is typing at the newest end of the message list: the avatars of up to three typing users, and a bubble with animated dots. `TypingIndicatorContainer` wraps it and renders it only while someone other than the user is typing in that list. Both are override keys, and the list renders them in its default newer-end header. [Typing indicators](https://getstream.io/chat/docs/sdk/react-native/v10/features/messaging/typing-indicators/) covers the feature across the layers.

## Best practices

- Replace the look with the `TypingIndicator` override key. The container already hides it while nobody is typing, so the replacement doesn't need to check.
- Read the typing users through `useTypingString()`, or `channel.state`'s `typing` with `useStateStore`. The typing state lives only in `channel.state.typing`.
- Turn the indicator off with `disableTypingIndicator` on `Channel` or `Thread`, rather than with an override that renders nothing.
- A `HeaderComponent` passed to `MessageList`, or a `FooterComponent` passed to `MessageFlashList`, replaces the newer end, typing indicator included. Render `TypingIndicatorContainer` and `TypingIndicator` in it to keep them.

## Basic usage

This replacement shows the typing text instead of avatars:

```tsx title="src/TypingText.tsx"
import { StyleSheet, Text } from "react-native";
import { useTypingString, WithComponents } from "stream-chat-react-native";

const TypingText = () => {
  const typingString = useTypingString();

  return <Text style={styles.text}>{typingString}...</Text>;
};

const overrides = { TypingIndicator: TypingText };

export const ListWithTypingText = ({
  children,
}: {
  children: React.ReactNode;
}) => <WithComponents overrides={overrides}>{children}</WithComponents>;

const styles = StyleSheet.create({
  text: { fontSize: 12, fontStyle: "italic" },
});
```

## Which typing users show

The list reads `channel.state.typing`: the last `typing.start` event of each user who is typing in the channel. A `typing.stop` event removes the user, and so do 7 seconds without a new event. The list leaves out the current user. In a channel's list it keeps the events without a `parent_id`; in a thread's list, the events whose `parent_id` is the thread's.

## TypingIndicator

`TypingIndicator` takes no props. It reads the typing users of the channel, and of the thread inside a `Thread`, from context. Its styles are under `theme.typingIndicator`: `container`, `avatarStackContainer` and `loadingDotsBubble`.

## TypingIndicatorContainer

`TypingIndicatorContainer` renders its children in a padded row while at least one other user is typing, and nothing otherwise. The list renders it around `TypingIndicator`. Its style is `theme.messageList.typingIndicatorContainer`.

| Prop       | Type                    | Default                                   | Description                                                                       |
| ---------- | ----------------------- | ----------------------------------------- | --------------------------------------------------------------------------------- |
| `children` | `React.ReactNode`       |                                           | What to render while someone is typing.                                           |
| `client`   | `StreamChat`            | from `ChatContext`                        | The client, used to leave out the current user.                                   |
| `threadId` | `string`                | the ID of the thread from `ThreadContext` | Counts only the typing events of this thread. Without it, only the channel's own. |
| `typing`   | `Record<string, Event>` | `channel.state`'s `typing`                | The typing events, keyed by user ID.                                              |

## Related hooks

- `useTypingString()` returns "Cleo is typing", "Cleo and 2 more are typing" or `""`, for the channel or thread a component sits in. The texts come from the `channelPreview.typing.withUser.label` and `messageList.typing.withMoreUsers.label` translation keys.
- `useStateStore(channel.state, selector)` reads `typing` directly, for a component outside a `Channel`.

---

For the most recent version of this documentation, visit [https://getstream.io/chat/docs/sdk/react-native/v10/component-reference/message-list/typing-indicator/](https://getstream.io/chat/docs/sdk/react-native/v10/component-reference/message-list/typing-indicator/).