# ChannelLastMessagePreview

Renders icon + text for the latest message preview in a channel row. This component is used by [`ChannelPreviewMessage`](/chat/docs/sdk/react-native/ui-components/channel-preview-message/) to render the final preview content.

## Best Practices

- Keep preview text short and single-line for stable list row height.
- Use semantic text colors so deleted and normal messages are clearly differentiated.
- Avoid heavy formatting logic inside render for large channel lists.
- Keep icon usage consistent with the message type being previewed.
- Reuse this component when customizing `ChannelPreviewMessage` to preserve SDK behavior.

## General Usage

Use it when overriding [`ChannelPreviewMessage`](/chat/docs/sdk/react-native/core-components/channel-list#channelpreviewmessage/) through `ChannelList`.

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

const CustomPreviewMessage = ({ lastMessage }) => {
  if (!lastMessage) return null;
  return <ChannelLastMessagePreview message={lastMessage} />;
};

const App = () => {
  return (
    <WithComponents overrides={{ ChannelPreviewMessage: CustomPreviewMessage }}>
      <ChannelList />
    </WithComponents>
  );
};
```

## Props

| Prop      | Description                                                | Type                                                  |
| --------- | ---------------------------------------------------------- | ----------------------------------------------------- |
| `message` | Message object used to generate the preview icon and text. | `LocalMessage` \| `MessageResponse` \| `DraftMessage` |


---

This page was last updated at 2026-04-20T08:51:06.911Z.

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