# Attachment

Component to render the message attachments within the [`MessageList`](https://getstream.io/chat/docs/sdk/react-native/v3/ui-components/message-list/).

This is the default component provided to the prop [`Attachment`](https://getstream.io/chat/docs/sdk/react-native/v3/core-components/channel#attachment) on the `Channel` component.
It renders relevant component according to type of the attachment (for example card, Giphy, file etc). Generally you wouldn't need to use this component for customization,
you should instead use specific attachment type related prop such as [`Giphy`](https://getstream.io/chat/docs/sdk/react-native/v3/core-components/channel#giphy), [`Gallery`](https://getstream.io/chat/docs/sdk/react-native/v3/core-components/channel#gallery), [`UrlPreview`](https://getstream.io/chat/docs/sdk/react-native/v3/core-components/channel#urlpreview), [`FileAttachment`](https://getstream.io/chat/docs/sdk/react-native/v3/core-components/channel#fileattachment) etc.
Please check our guide on [Attachment Customization](https://getstream.io/chat/docs/sdk/react-native/v3/guides/custom-attachment/) for details.

## Props

### **attachment**

Attachment object to render UI for. This is basically a value from `attachments` array on message object - `message.attachments[0]`.

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

### AttachmentActions

Component to render additional actions on attachment. for example send, shuffle, cancel in case of Giphy.

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

### Card

Component to render any custom type of attachment. Please check the guides for [Custom Attachment](https://getstream.io/chat/docs/sdk/react-native/v3/guides/custom-attachment/)

| Type      | Default                                                      |
| --------- | ------------------------------------------------------------ |
| component | [`Card`](https://getstream.io/chat/docs/sdk/react-native/v3/ui-components/card/) |

### FileAttachment

Component to render 'file' type attachment in `MessageList`.

| Type      | Default                                                                           |
| --------- | --------------------------------------------------------------------------------- |
| component | [`FileAttachment`](https://getstream.io/chat/docs/sdk/react-native/v3/ui-components/file-attachment/) |

### Gallery

Component to render 'image' type attachments in the `MessageList`.

| Type      | Default                                                            |
| --------- | ------------------------------------------------------------------ |
| component | [`Gallery`](https://getstream.io/chat/docs/sdk/react-native/v3/ui-components/gallery/) |

### Giphy

Component to render Giphy type attachments in `MessageList`.

| Type      | Default                                                        |
| --------- | -------------------------------------------------------------- |
| component | [`Giphy`](https://getstream.io/chat/docs/sdk/react-native/v3/ui-components/giphy/) |

### UrlPreview

Component to render preview of URLs in `MessageList`.

| Type      | Default                                                      |
| --------- | ------------------------------------------------------------ |
| component | [`Card`](https://getstream.io/chat/docs/sdk/react-native/v3/ui-components/card/) |

---

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