# FileAttachment

Renders file attachments inside [`MessageList`](/chat/docs/sdk/react-native/v8/ui-components/message-list/).

## Best Practices

- Keep file rows compact and readable.
- Use `AttachmentActions` for consistent send/shuffle/cancel behaviors where applicable.
- Validate file size/type before rendering heavy previews.
- Use consistent icons and sizes across your app.
- Customize via the `Channel` prop instead of editing internals.

## Basic Usage

Customize it and pass it via the [`FileAttachment`](/chat/docs/sdk/react-native/v8/core-components/channel#fileattachment/) prop on `Channel`.

Example: change the file attachment icon size.

```tsx
import { Channel, FileAttachment } from "stream-chat-react-native";

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

## Props

### `attachment`

Attachment object for a `file` type attachment.

| Type   |
| ------ |
| Object |

### `attachmentSize`

Attachment icon size, passed to [`FileAttachmentIcon`](#fileattachmenticon).

| Type   |
| ------ |
| Number |

### `additionalPressableProps`

Extra props passed to the underlying [Pressable](https://reactnative.dev/docs/pressable#props) used in message components like [`MessageContent`](/chat/docs/sdk/react-native/v8/ui-components/message-content/).

| Type   |
| ------ |
| object |


## UI Component Props

### `AttachmentActions`

Renders additional attachment actions (for example, Giphy send/shuffle/cancel).

| Type          | Default                                                                                                                                         |
| ------------- | ----------------------------------------------------------------------------------------------------------------------------------------------- |
| ComponentType | [AttachmentActions](https://github.com/GetStream/stream-chat-react-native/v8/blob/main/package/src/components/Attachment/AttachmentActions.tsx) |


### `FileAttachmentIcon`

Renders the file icon for `file` attachments.

| Type          | Default                                                                                                                            |
| ------------- | ---------------------------------------------------------------------------------------------------------------------------------- |
| ComponentType | [`FileIcon`](https://github.com/GetStream/stream-chat-react-native/v8/blob/develop/package/src/components/Attachment/FileIcon.tsx) |



---

This page was last updated at 2026-04-17T17:33:44.455Z.

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