FileIcon

Renders the file attachment icon inside MessageList.

Best Practices

  • Use mimeType to select appropriate icons or colors.
  • Keep icon sizes consistent across file attachments.
  • Avoid heavy icon rendering logic in large lists.
  • Provide a fallback icon for unknown MIME types.
  • Customize via WithComponents to keep overrides centralized.

Basic Usage

Replace the default UI via WithComponents.

Example: change the icon size.

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

<WithComponents
  overrides={{ FileAttachmentIcon: () => <FileIcon size="lg" /> }}
>
  <Channel channel={channel}>
    <MessageList />
    <MessageComposer />
  </Channel>
</WithComponents>;

Props

Prop Description Type
mimeType MIME type for the file attachment (for example, application/pdf, audio/mp4). string
size Icon size. Defaults to 'md'. 'sm' | 'md' | 'lg'
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>