# Gallery

Renders image attachments inside [`MessageList`](/chat/docs/sdk/react-native/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/core-components/channel#gallery/) prop on `Channel`.

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

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

## Props

### `additionalPressableProps`

<partial id="chat-sdk/react-native/v8-latest/_partials/common-content/ui-components/channel/props/additional_pressable_props"></partial>

### `alignment`

<partial id="chat-sdk/react-native/v8-latest/_partials/common-content/contexts/message-context/alignment"></partial>

### `groupStyles`

<partial id="chat-sdk/react-native/v8-latest/_partials/common-content/contexts/message-context/group_styles"></partial>

### `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/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`

<partial id="chat-sdk/react-native/v8-latest/_partials/common-content/contexts/message-context/on_long_press"></partial>

### `onPress`

<partial id="chat-sdk/react-native/v8-latest/_partials/common-content/contexts/message-context/on_press"></partial>

### `onPressIn`

<partial id="chat-sdk/react-native/v8-latest/_partials/common-content/contexts/message-context/on_press_in"></partial>

### `preventPress`

If true, disables `onPress`.

| Type    | Default |
| ------- | ------- |
| Boolean | false   |

### `setSelectedMessage`

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

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

### `setMessages`

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

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

### `setOverlay`

Setter for [`overlay`](/chat/docs/sdk/react-native/contexts/overlay-context#overlay/). You can use this setter to show the overlay.

| Type                |
| ------------------- |
| `(overlay) => void` |

### `threadList`

<partial id="chat-sdk/react-native/v8-latest/_partials/common-content/contexts/message-context/thread_list"></partial>

### `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/ui-components/video-thumbnail/) |


---

This page was last updated at 2026-03-06T17:06:07.448Z.

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