useChannelPreviewData

Returns channel preview state (lastMessage, muted, and unread) for rendering list rows.

Best Practices

• Use this hook in custom Preview components rendered by ChannelList.
• Treat lastMessage as optional and handle empty channels safely.
• Avoid additional unread computations in render; use the hook output directly.
• Respect muted channels and avoid showing unread badges when muted.
• Keep expensive formatting outside the list item render path.

Usage

import { useChannelPreviewData } from "stream-chat-react-native";

type Props = {
  channel: Channel;
  client: StreamChat;
};

const CustomPreview = ({ channel, client }: Props) => {
  const { lastMessage, muted, unread } = useChannelPreviewData(channel, client);

  return (
    <>
      <Text>{lastMessage?.text ?? "No messages yet"}</Text>
      {!muted && unread > 0 ? <Text>{unread}</Text> : null}
    </>
  );
};

Parameters

Returns