# Card

Renders custom attachments inside [`MessageList`](/chat/docs/sdk/react-native/v8/ui-components/message-list/). See [Custom Attachment](/chat/docs/sdk/react-native/v8/guides/custom-attachment/) for usage.

## Best Practices

- Provide fallback values when `image_url` or `thumb_url` are missing.
- Keep card content concise to avoid oversized previews.
- Use `og_scrape_url` for navigation and avoid custom link logic.
- Ensure press handlers are lightweight and accessible.
- Customize via `CardHeader`/`CardCover`/`CardFooter` for consistent styling.

## Props

### `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 |


### `author_name`

Author name shown in the card footer.

| Type   |
| ------ |
| string |

### `image_url`

Cover image URL. If missing, `thumb_url` is used.

| Type   |
| ------ |
| string |

### `og_scrape_url`

URL to open when the card is pressed.

| Type   |
| ------ |
| string |

### `onLongPress`

Default long press handler for message UI.

| Type     |
| -------- |
| function |


### `onPress`

Default press handler for message UI.

| Type     |
| -------- |
| function |


### `onPressIn`

Default `pressIn` handler for message UI.

| Type     |
| -------- |
| function |


### `text`

Text description shown in the card footer.

| Type   |
| ------ |
| string |

### `thumb_url`

Thumbnail URL for cover image.

| Type   |
| ------ |
| string |

### `title`

Title shown in the card footer.

| Type   |
| ------ |
| string |

## UI Component Props

### `CardCover`

Renders the main body of [`Card`](/chat/docs/sdk/react-native/v8/ui-components/card/) attachments. See [Custom Attachment](/chat/docs/sdk/react-native/v8/guides/custom-attachment/).

| Type          |
| ------------- |
| ComponentType |

### `CardFooter`

Renders the footer for [`Card`](/chat/docs/sdk/react-native/v8/ui-components/card/) attachments. See [Custom Attachment](/chat/docs/sdk/react-native/v8/guides/custom-attachment/).

| Type          |
| ------------- |
| ComponentType |

### `CardHeader`

Renders the header for [`Card`](/chat/docs/sdk/react-native/v8/ui-components/card/) attachments. See [Custom Attachment](/chat/docs/sdk/react-native/v8/guides/custom-attachment/).

| Type          |
| ------------- |
| ComponentType |

### `ImageComponent`

Drop-in replacement for all underlying [`Image`](https://reactnative.dev/docs/next/image) components in the SDK. Useful for offline image caching. See the [Offline Support Guide](/chat/docs/sdk/react-native/v8/basics/offline-support/).

| Type          | Default                                            |
| ------------- | -------------------------------------------------- |
| ComponentType | [`Image`](https://reactnative.dev/docs/next/image) |



---

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

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