FileAttachment

Renders file attachments inside MessageList.

Best Practices

Keep file rows compact and readable.
Validate file size/type before rendering heavy previews.
Use consistent icons and sizes across your app.
Customize via WithComponents instead of editing internals.

Basic Usage

Replace the default UI via WithComponents.

Example: change the file attachment icon size.

import { WithComponents, FileAttachment } from "stream-chat-react-native";

<WithComponents
  overrides={{
    FileAttachment: () => <FileAttachment attachmentIconSize="lg" />,
  }}
>
  <Channel channel={channel}>
    <MessageList />
    <MessageComposer />
  </Channel>
</WithComponents>;

Props

Prop	Description	Type
`attachment`	Attachment object for a `file` type attachment.	`object`
`attachmentIconSize`	Size of the file icon, forwarded to `FilePreview`/`FileIcon`. Defaults to `'md'`.	`'sm'` \| `'md'` \| `'lg'`
`additionalPressableProps`	Extra props passed to the underlying Pressable used in message components like `MessageContent`.	`object`
`onLongPress`	Default long press handler for message UI.	`function`
`onPress`	Default press handler for message UI.	`function`
`onPressIn`	Default `pressIn` handler for message UI.	`function`
`preventPress`	Disable press interactions for the file row.	`boolean`
`styles`	Style overrides for the file row (`container`, `details`, `size`, `title`).	`object`

UI Component Props

Prop	Description	Type
`FilePreview`	Renders the file row content and receives the upload progress indicator while a local attachment is pending. Defaults to `FilePreview`.	`ComponentType`

FileAttachmentGroup

FileIcon