# ChannelPreviewMessageDeliveryStatus

Renders message delivery/read status in a channel row inside [`ChannelList`](/chat/docs/sdk/react-native/core-components/channel-list/). This is the default component for the [`ChannelPreviewMessageDeliveryStatus`](/chat/docs/sdk/react-native/core-components/channel-list#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`](/chat/docs/sdk/react-native/core-components/channel-list#channelpreviewmessagedeliverystatus/) on `ChannelList`.

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

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

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

## Props

| Prop      | Description                                                  | Type                                                |
| --------- | ------------------------------------------------------------ | --------------------------------------------------- |
| `channel` | Channel instance from the Stream Chat client.                | [Channel](/chat/docs/javascript/creating_channels/) |
| `message` | Message used to determine delivery state and sender context. | `LocalMessage` \| `MessageResponse`                 |


---

This page was last updated at 2026-04-17T17:33:46.095Z.

For the most recent version of this documentation, visit [https://getstream.io/chat/docs/sdk/react-native/ui-components/channel-preview-message-delivery-status/](https://getstream.io/chat/docs/sdk/react-native/ui-components/channel-preview-message-delivery-status/).