# PinnedMessageList

A searchable, paginated list of a channel's pinned messages. It fetches the pinned messages, renders them in a `FlatList` with infinite scroll, and shows an empty state when there are none. Needs to be wrapped in a `ChannelDetailsContextProvider` that supplies the channel.

This is the list surfaced by the navigation section of [`ChannelDetails`](/chat/docs/sdk/react-native/ui-components/channel-details/). You can render it on its own screen as well.

![PinnedMessageList](@chat-sdk/react-native/v9-latest/_assets/ui-components/channel/channel-details-pinned.PNG)

## Best Practices

- Wrap it in `ChannelDetailsContextProvider` so it can resolve the channel to query.
- Use `additionalFlatListProps` to tune scrolling and performance instead of wrapping the list.
- Pass `formatMessageDate` through the item when you need a custom date format in the preview.
- Override and configure the `PinnedMessageItem` building block by wrapping the list in `WithComponents` with an `overrides` map.

## General Usage

```tsx
import {
  OverlayProvider,
  Chat,
  ChannelDetailsContextProvider,
  PinnedMessageList,
} from "stream-chat-react-native";

const App = () => {
  return (
    <OverlayProvider>
      <Chat client={client}>
        <ChannelDetailsContextProvider channel={channel}>
          <PinnedMessageList />
        </ChannelDetailsContextProvider>
      </Chat>
    </OverlayProvider>
  );
};
```

## Props

| Prop                      | Description                                                                                                                                                       | Type                                      |
| ------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------------------------------------- |
| `additionalFlatListProps` | Override the underlying [`FlatList`](https://reactnative.dev/docs/flatlist#props) props of the list.                                                              | `Partial<FlatListProps<MessageResponse>>` |
| `searchInputProps`        | Additional props forwarded to the search input.                                                                                                                   | `SearchInputProps`                        |
| `searchSource`            | A custom `MessageSearchSource` used to query and paginate the pinned messages. Overrides the source created by default (pre-configured to fetch pinned messages). | `MessageSearchSource`                     |

## Building blocks

### PinnedMessageItem

The row rendered for each pinned message.

| Prop                | Description                                                  | Type                     |
| ------------------- | ------------------------------------------------------------ | ------------------------ |
| `channel` \*        | The channel the pinned message belongs to.                   | `Channel`                |
| `message` \*        | The pinned message to render.                                | `MessageResponse`        |
| `formatMessageDate` | Optional function to format the message date in the preview. | `(date: Date) => string` |


---

This page was last updated at 2026-06-30T12:00:28.033Z.

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