ChannelPreviewMessageDeliveryStatus

Renders message delivery/read status in a channel row inside ChannelList. This is the default component for the ChannelPreviewMessageDeliveryStatus override.

Best Practices

• Show delivery state only for messages sent by the current user.
• Keep icons subtle so delivery state does not overpower message preview text.
• Account for channels where read events are disabled.
• Avoid rendering this indicator when no meaningful status is available.
• Keep custom icon colors consistent with your chat semantics tokens.

General Usage

Customize it and pass it via ChannelPreviewMessageDeliveryStatus on ChannelList.

import {
  ChannelList,
  ChannelMessagePreviewDeliveryStatus,
  WithComponents,
} from "stream-chat-react-native";

const CustomPreviewMessageDeliveryStatus = (props) => (
  <ChannelMessagePreviewDeliveryStatus {...props} />
);

const App = () => {
  return (
    <WithComponents
      overrides={{
        ChannelPreviewMessageDeliveryStatus: CustomPreviewMessageDeliveryStatus,
      }}
    >
      <ChannelList />
    </WithComponents>
  );
};

Props