Skip to content

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