# Gallery

Renders image attachments inside [`MessageList`](/chat/docs/sdk/react-native/v8/ui-components/message-list/).

## 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`](/chat/docs/sdk/react-native/v8/core-components/channel#gallery/) prop on `Channel`.

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

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

## Props

### `additionalPressableProps`

Extra props passed to the underlying [Pressable](https://reactnative.dev/docs/pressable#props) used in message components like [`MessageContent`](/chat/docs/sdk/react-native/v8/ui-components/message-content/).

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

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

| Type  |
| ----- |
| Array |

### `legacyImageViewerSwipeBehaviour`

**Note:** Available in SDK version >= [v3.9.0](https://github.com/GetStream/stream-chat-react-native/v8/releases).

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`](/chat/docs/sdk/react-native/v8/contexts/image-gallery-context#selectedmessage/).

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

### `setMessages`

Setter for value [`messages`](/chat/docs/sdk/react-native/v8/contexts/image-gallery-context#messages/).

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

### `setOverlay`

Setter for [`overlay`](/chat/docs/sdk/react-native/v8/contexts/overlay-context#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.

```tsx
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`](/chat/docs/sdk/react-native/v8/ui-components/video-thumbnail/) |


---

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

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