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
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>