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

Customize Gallery and pass it via the Gallery prop on Channel.

import { Channel, Gallery } from "stream-chat-react-native";

<Channel Gallery={() => <Gallery preventPress />} />;

Props

`additionalPressableProps`

Extra props passed to the underlying Pressable used in message components like MessageContent.

Type
object

`alignment`

Sets whether the message aligns left or right in the list.

Type	Default
enum('right', 'left')	'right'

`groupStyles`

Position of the message within a group of consecutive messages from the same user. Use groupStyles to style messages based on position (for example, avatars show only on the last message).

Type
array of enum('top', 'bottom', 'middle', 'single')

`hasThreadReplies`

Whether the current message has thread replies. Used to set the correct bottom corner radius based on alignment.

Type	Default
Boolean	`!!message.reply_count`

`images`

Array of image attachments on the message.

const images = message.attachments.filter((a) => a.type === "image");

Type
Array

`legacyImageViewerSwipeBehaviour`

Note: Available in SDK version >= v3.9.0.

Enable/disable legacy image viewer behavior.

When true, the image viewer lets you swipe through all loaded images in the channel. This adds JS thread work to track and pre-populate images for smooth transitions.

Type	Default
boolean	false

`messageId`

ID of the current message.

Type
String

`messageText`

Text content of the current message (message.text). Used for gallery styling.

Type
String

`onLongPress`

Default long press handler for message UI.

Type
function

`onPress`

Default press handler for message UI.

Type
function

`onPressIn`

Default pressIn handler for message UI.

Type
function

`preventPress`

If true, disables onPress.

Type	Default
Boolean	false

`setSelectedMessage`

Setter for value selectedMessage.

Type
`(selectedMessage: {messageId?: string; url?: string;}) => void`

`setMessages`

Setter for value messages.

Type
`(messages: LocalMessage[]) => void`

`setOverlay`

Setter for overlay. You can use this setter to show the overlay.

Type
`(overlay) => void`

`threadList`

True if the current message is part of a thread.

Type
Boolean

`videos`

Array of video attachments.

const videos = message.attachments.filter(
  (a) => a.type === "video" && !a.og_scrape_url,
);

Type
array

UI Component Props

`VideoThumbnail`

Renders video thumbnails for video attachments in MessageList.

Type	Default
ComponentType	`VideoThumbnail`

FileIcon

Giphy