Gallery

Renders image attachments inside MessageList.

Best Practices

Keep gallery layouts compact to avoid oversized rows.
Use setOverlay and gallery context helpers instead of custom image viewers.
Handle mixed image/video attachments gracefully.
Respect preventPress when 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`

FilePreview

Giphy