# ReactionList

`ReactionList` component is used to display the reactions added to a message right on top of it.

This is the default component provided to the prop [`ReactionList`](/chat/docs/sdk/react-native/v5/core-components/channel#reactionlist/) on the `Channel` component.

## Basic Usage

**Use case**: Override the background color on the reaction list container.

```tsx
import { Channel, ReactionList, ReactionListProps } from 'stream-chat-react-native';

const ReactionListWithCustomBackground = (props: ReactionListProps) => <ReactionList {...props} fill={'#00DDD'} stroke={'#fffff'} />

<Channel ReactionList={ReactionListWithCustomBackground} />
```

## Props

### `messageContentWidth`

Width of message content. This helps ReactionList align itself on the front-edge of the message content.
This value gets computed in [`MessageContent`](/chat/docs/sdk/react-native/v5/ui-components/message-content/) once the content gets loaded.

| Type   |
| ------ |
| Number |

### `alignment`

Sets if the message should be aligned to right or left side of list.

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


### `fill`

Background color for reaction list container when [`alignment`](#alignment) is `left`.

| Type   |
| ------ |
| String |

### `onLongPress`

Default long press handler for message UI.

| Type     |
| -------- |
| function |


### `message`

Message object.

| Type           |
| -------------- |
| `Message` type |


### `onPress`

Default press handler for message UI.

| Type     |
| -------- |
| function |


### `reactions`

List of reactions added to the message.

```tsx
[
  {
    own: true,
    type: "love",
  },
  {
    own: false,
    type: "haha",
  },
];
```

| Type  |
| ----- |
| array |


### `reactionSize`

Dimensions for each reaction icon.

| Type   |
| ------ |
| Number |

### `showMessageOverlay`

Function to open the message action overlay. This function gets called when user long presses a message.

| Type     |
| -------- |
| function |


### `stroke`

Background color for reaction list container when [`alignment`](#alignment) is `right`.

| Type   |
| ------ |
| String |

### `supportedReactions`

List of reactions which can be added on message.
Please refer to [the guide on customizing reactions](/chat/docs/sdk/react-native/v5/guides/message-customization#message-with-custom-reactions/) for details.

| Type  | Default                                                                                                                                                             |
| ----- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| Array | [reactionData](https://github.com/GetStream/stream-chat-react-native/blob/182f1047a1417da64047a12f9a6cfaf1252cfbd8/package/src/components/Channel/Channel.tsx#L129) |


### `targetedMessage`

Has the message id of the message which is to be highlighted. By default the value is undefined. As soon as the highlight time is out this is set to `undefined`.

| Type   |
| ------ |
| String |


---

This page was last updated at 2026-06-08T08:25:19.173Z.

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