# Attachment

Renders message attachments inside [`MessageList`](/chat/docs/sdk/react-native/v8/ui-components/message-list/). This is the default component for the [`Attachment`](/chat/docs/sdk/react-native/v8/core-components/channel#attachment/) prop.

It selects the correct renderer by attachment type (card, Giphy, file, etc.). For customization, use type-specific props like [`Giphy`](/chat/docs/sdk/react-native/v8/core-components/channel#giphy/), [`Gallery`](/chat/docs/sdk/react-native/v8/core-components/channel#gallery/), [`UrlPreview`](/chat/docs/sdk/react-native/v8/core-components/channel#urlpreview/), or [`FileAttachment`](/chat/docs/sdk/react-native/v8/core-components/channel#fileattachment/). See [Attachment Customization](/chat/docs/sdk/react-native/v8/guides/custom-attachment/) for details.

## Best Practices

- Prefer type-specific overrides (Gallery, FileAttachment) over replacing the whole Attachment component.
- Handle unknown or custom attachment types gracefully.
- Keep attachment rendering lightweight to avoid list jank.
- Use `AttachmentActions` for supported actions instead of custom tap logic.
- Ensure URL previews and media rendering are consistent with your app theme.

## Props

### **attachment**

Attachment object to render. Typically an item from `message.attachments` (for example, `message.attachments[0]`).

| 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) |


### `Card`

Renders custom attachment types. See [Custom Attachment](/chat/docs/sdk/react-native/v8/guides/custom-attachment/).

| Type          | Default                                                      |
| ------------- | ------------------------------------------------------------ |
| ComponentType | [`Card`](/chat/docs/sdk/react-native/v8/ui-components/card/) |

### `FileAttachment`

Renders `file` attachments in `MessageList`.

| Type          | Default                                                                           |
| ------------- | --------------------------------------------------------------------------------- |
| ComponentType | [`FileAttachment`](/chat/docs/sdk/react-native/v8/ui-components/file-attachment/) |

### `Gallery`

Renders `image` attachments in `MessageList`.

| Type          | Default                                                            |
| ------------- | ------------------------------------------------------------------ |
| ComponentType | [`Gallery`](/chat/docs/sdk/react-native/v8/ui-components/gallery/) |


### `Giphy`

Renders Giphy attachments in `MessageList`.

| Type          | Default                                                        |
| ------------- | -------------------------------------------------------------- |
| ComponentType | [`Giphy`](/chat/docs/sdk/react-native/v8/ui-components/giphy/) |

### `UrlPreview`

Renders URL previews in `MessageList`.

| Type          | Default                                                      |
| ------------- | ------------------------------------------------------------ |
| ComponentType | [`Card`](/chat/docs/sdk/react-native/v8/ui-components/card/) |


---

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

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