# FileAttachmentList

A list of the file and audio attachments shared in a channel, grouped by month into sections. It fetches messages with file attachments, renders them in a `SectionList` with sticky month headers and 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.

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

## Best Practices

- Wrap it in `ChannelDetailsContextProvider` so it can resolve the channel to query.
- Use `additionalSectionListProps` to tune section rendering and scrolling instead of wrapping the list.
- Provide an `onPress` on the item when you want to handle attachments yourself instead of opening the asset URL.
- Override and configure the `FileAttachmentItem` building block by wrapping the list in `WithComponents` with an `overrides` map.

## General Usage

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

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

## Props

| Prop                         | Description                                                                                                                                                                     | Type                                                                   |
| ---------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------- |
| `additionalSectionListProps` | Override the underlying [`SectionList`](https://reactnative.dev/docs/sectionlist#props) props of the list.                                                                      | `Partial<SectionListProps<FileAttachmentTile, FileAttachmentSection>>` |
| `searchSource`               | A custom `MessageSearchSource` used to query and paginate the file/audio attachments. Overrides the source created by default (pre-configured to fetch file/audio attachments). | `MessageSearchSource`                                                  |

## Building blocks

### FileAttachmentItem

The row rendered for each file or audio attachment.

| Prop            | Description                                                                                                                                    | Type                                                                     |
| --------------- | ---------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------ |
| `attachment` \* | The file/audio attachment to render.                                                                                                           | `Attachment`                                                             |
| `message` \*    | The message the attachment belongs to.                                                                                                         | `MessageResponse`                                                        |
| `onPress`       | Fired with the pressed attachment and its message. When provided, this overrides the default behavior of opening the attachment's `asset_url`. | `(params: { attachment: Attachment; message: MessageResponse }) => void` |


---

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

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