TypingIndicator

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 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:

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.