# ReactionListClustered

`ReactionListClustered` renders reactions in a compact clustered style. It can be used as a custom implementation for reaction list rendering in `MessageList`.

## Best Practices

- Use clustered mode when horizontal space is limited.
- Keep `supportedReactions` aligned with your channel configuration.
- Avoid heavy logic inside press handlers to keep list interactions smooth.
- Use `accessibilityLabel` for improved screen-reader support.
- Keep container styling minimal to preserve default hit targets.

## Props

| Prop                   | Description                                                                                                                                                                                                                                                                                                                                         | Type                              |
| ---------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------------------------------- |
| `hasReactions`         | True if the message has at least one reaction.                                                                                                                                                                                                                                                                                                      | `boolean`                         |
| `onPress`              | Default press handler for message UI.                                                                                                                                                                                                                                                                                                               | `function`                        |
| `onPressIn`            | Default `pressIn` handler for message UI.                                                                                                                                                                                                                                                                                                           | `function`                        |
| `preventPress`         | Disables press interactions on reaction items.                                                                                                                                                                                                                                                                                                      | `boolean`                         |
| `reactions`            | Reactions summary list for the message.                                                                                                                                                                                                                                                                                                             | `array`                           |
| `showReactionsOverlay` | Opens reactions overlay.                                                                                                                                                                                                                                                                                                                            | `(reactionType?: string) => void` |
| `supportedReactions`   | List of reactions users can add to messages. See [customizing reactions](/chat/docs/sdk/react-native/guides/message-customization#message-with-custom-reactions/). Defaults to [reactionData](https://github.com/GetStream/stream-chat-react-native/blob/182f1047a1417da64047a12f9a6cfaf1252cfbd8/package/src/components/Channel/Channel.tsx#L129). | `array`                           |
| `containerStyle`       | Custom style for the clustered content container.                                                                                                                                                                                                                                                                                                   | `StyleProp<ViewStyle>`            |
| `accessibilityLabel`   | Accessibility label for the clustered reaction list container.                                                                                                                                                                                                                                                                                      | `string`                          |


---

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

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