import { useChannelTypingState } from "stream-chat-react-native";
const TypingPreview = ({ channel }: { channel: Channel }) => {
const { usersTyping } = useChannelTypingState({ channel });
if (!usersTyping.length) return null;
return (
<Text>{`${usersTyping[0].name ?? usersTyping[0].id} is typing...`}</Text>
);
};This is beta documentation for Stream Chat React Native SDK v9. For the latest stable version, see the latest version (v8)
.
useChannelTypingState
Tracks users currently typing in a channel for preview rendering.
Best Practices
- Use this hook for typing badges in
ChannelListrows. - Ignore self-typing in previews to reduce visual noise.
- Keep typing text concise for small row layouts.
- Prefer memoized row components when displaying typing users.
- Handle zero typers as the default state.
Usage
Parameters
| Name | Type | Required | Description |
|---|---|---|---|
| channel | Channel | Yes | Channel to subscribe to typing events for. |
Returns
| Name | Type | Description |
|---|---|---|
| usersTyping | UserResponse[] | Current list of users typing in this channel. |