---
id: file-attachment
title: FileAttachment
---

import AdditionalTouchableProps from '../common-content/core-components/channel/props/additional_touchable_props.mdx';
import AttachmentActions from '../common-content/core-components/channel/props/attachment_actions.mdx';
import FileAttachmentIcon from '../common-content/core-components/channel/props/file_attachment_icon.mdx';

Component to render file attachments within the [`MessageList`](./message_list.mdx).

## Basic Usage

You can customize this component and provide it back to the SDK via the [`FileAttachment`](../core-components/channel.mdx#fileattachment) prop on `Channel` if desired.

Changing the size of the file attachment icon can be easily accomplished.
```tsx
import { Channel, FileAttachment } from 'stream-chat-react-native';

<Channel FileAttachment={() => <FileAttachment attachmentSize={40} />}
```

## Props

### <div class="label required">required</div> **attachment**

Attachment object for `file` type attachment.

| Type |
| - |
| object |

### attachmentSize

Size of an attachment icon. This value gets passed to [`FileAttachmentIcon`](#fileattachmenticon) component.

| Type |
| - |
| number |

### <div class="label description">_overrides the value from [MessagesContext](../contexts/messages_context.mdx#additionaltouchableprops)_</div> additionalTouchableProps {#additionaltouchableprops}

<AdditionalTouchableProps />

### <div class="label description">_overrides the value from [MessagesContext](../contexts/messages_context.mdx#attachmentactions)_</div> AttachmentActions {#attachmentactions}

<AttachmentActions />

### <div class="label description">_overrides the value from [MessagesContext](../contexts/messages_context.mdx#fileattachmenticon)_</div> FileAttachmentIcon {#fileattachmenticon}

<FileAttachmentIcon />