MediaList

A three-column grid of the image and video attachments shared in a channel. It fetches messages with image/video attachments, renders them as square tiles in a FlatList, and opens a fullscreen gallery viewer (with swipe navigation across all loaded media) when a tile is pressed. It shows an empty state when there is no media. Needs to be wrapped in a ChannelDetailsContextProvider that supplies the channel.

This is the grid 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 grid behavior and scrolling instead of wrapping the list.
• Keep the default onPress to preserve the fullscreen gallery transition, and only override it when you need custom navigation.
• Override and configure the MediaItem building block by wrapping the grid in WithComponents with an overrides map.

General Usage

import {
  OverlayProvider,
  Chat,
  ChannelDetailsContextProvider,
  MediaList,
} from "stream-chat-react-native";

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

Props

Building blocks

MediaItem

The square tile rendered for each image or video attachment.