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. You can render it on its own screen as well.

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

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

Building blocks

PinnedMessageItem

The row rendered for each pinned message.