Attachment

Renders message attachments inside MessageList. This is the default component for the Attachment prop.

It selects the correct renderer by attachment type (card, Giphy, file, etc.). For customization, use type-specific props like Giphy, Gallery, UrlPreview, or FileAttachment. See Attachment Customization for details.

Pending local attachments can render upload progress in MessageList. Image and video attachments use AttachmentUploadIndicator through Gallery and VideoThumbnail; file and audio attachments render the same upload state in their preview metadata.

Best Practices

  • Prefer type-specific overrides (Gallery, FileAttachment) over replacing the whole Attachment component.
  • Handle unknown or custom attachment types gracefully via the UnsupportedAttachment override.
  • Keep attachment rendering lightweight to avoid list jank.
  • Ensure URL previews and media rendering are consistent with your app theme.

Props

Prop Description Type
attachment Attachment object to render. Typically an item from message.attachments (for example, message.attachments[0]). object

UI Component Props

Prop Description Type
AudioAttachment Renders audio and voice-recording attachments in MessageList. Defaults to AudioAttachment. ComponentType
FileAttachment Renders file attachments in MessageList. Defaults to FileAttachment. ComponentType
Gallery Renders image attachments in MessageList. Defaults to Gallery. ComponentType
Giphy Renders Giphy attachments in MessageList. Defaults to Giphy. ComponentType
UnsupportedAttachment Renders attachments whose type is not recognized by the SDK. Defaults to UnsupportedAttachment. ComponentType
UrlPreview Renders URL previews in MessageList. Defaults to UrlPreview. ComponentType
URLPreviewCompact Renders compact URL previews in MessageList. Defaults to URLPreviewCompact. ComponentType
urlPreviewType Type of URL preview to render. Defaults to 'full'. 'full' | 'compact'
Add Chat to my app: getstream.io/SKILL.md

The fastest way to build with Stream. Start a new project or improve an existing one. Full CLI and documentation integration out of the box.


Ask your agent:

/stream Build me a Social App with Feeds and Moderation.
/stream Any livestream calls running?
/stream Chat React Native v9: <Your Question>