# FilePreview

`FilePreview` renders the file icon, title, and metadata used by [`FileAttachment`](/chat/docs/sdk/react-native/ui-components/file-attachment/).

## Best Practices

- Use this component to keep file rows visually consistent.
- Keep title lines constrained for dense message layouts.
- Prefer indicator overrides for lightweight status UI.
- Reuse `FileAttachmentIcon` overrides from `Channel` for consistency.
- Keep custom styles additive to preserve spacing and truncation behavior.

## Props

| Prop                 | Description                                                     | Type                   |
| -------------------- | --------------------------------------------------------------- | ---------------------- |
| `attachment`         | Attachment object to preview.                                   | `object`               |
| `attachmentIconSize` | Icon size passed to the file icon component.                    | `'sm' \| 'md' \| 'lg'` |
| `titleNumberOfLines` | Maximum number of lines for the file title. Defaults to `2`.    | `number`               |
| `indicator`          | Custom metadata indicator replacing default size/duration text. | `ReactNode`            |
| `styles`             | Style overrides (`container`, `details`, `size`, `title`).      | `object`               |

## UI Component Props

### `FileAttachmentIcon`

Icon component used for file previews.

Renders the file icon for `file` attachments.

| Type          | Default                                                                                                                         |
| ------------- | ------------------------------------------------------------------------------------------------------------------------------- |
| ComponentType | [`FileIcon`](https://github.com/GetStream/stream-chat-react-native/blob/develop/package/src/components/Attachment/FileIcon.tsx) |



---

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

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