Gallery
Renders image attachments inside MessageList.
Best Practices
- Keep gallery layouts compact to avoid oversized rows.
- Use
setOverlayand gallery context helpers instead of custom image viewers. - Handle mixed image/video attachments gracefully.
- Respect
preventPresswhen you need to disable full-screen viewing. - Avoid heavy image processing in render; rely on caching or native components.
Basic Usage
Replace the default UI via WithComponents.
import { WithComponents, Gallery } from "stream-chat-react-native";
<WithComponents overrides={{ Gallery: () => <Gallery preventPress /> }}>
<Channel channel={channel}>
<MessageList />
<MessageComposer />
</Channel>
</WithComponents>;Props
| Prop | Description | Type |
|---|---|---|
additionalPressableProps |
Extra props passed to the underlying Pressable used in message components like MessageContent. |
object |
alignment |
Sets whether the message aligns left or right in the list. Defaults to 'right'. |
enum('right', 'left') |
channelId |
ID of the channel the message belongs to. Used to resolve image CDN hosts and the gallery viewer. | string | undefined |
images |
Array of image attachments on the message. |
array |
imageGalleryStateStore |
State store backing the full-screen image gallery viewer. | object |
message |
Message object the attachments belong to. | Message type |
messageContentOrder |
Order of message content. Example: ['quoted_reply', 'attachments', 'file', 'gallery', 'text']. |
array |
messageHasOnlyOneMedia |
True when the message contains exactly one media attachment. Used for sizing. Defaults to false. |
boolean |
myMessageTheme |
Theme applied to the current user's messages. Memoize this object or pass a stable reference. | 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 |
If true, disables onPress. Defaults to false. |
boolean |
setOverlay |
Setter for overlay. You can use this setter to show the overlay. |
(overlay) => void |
videos |
Array of video attachments. |
array |
UI Component Props
| Prop | Description | Type |
|---|---|---|
AttachmentUploadIndicator |
Renders pending upload progress over local image and video thumbnails. Defaults to AttachmentUploadIndicator. |
ComponentType |
MediaUploadProgressOverlay |
Renders the full-cover upload overlay used by AttachmentUploadIndicator in overlay mode. Defaults to MediaUploadProgressOverlay. |
ComponentType |
VideoThumbnail |
Renders video thumbnails for video attachments in MessageList. Defaults to VideoThumbnail. |
ComponentType |