# 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/v4/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 } from 'stream-chat-react-native';

const ReactionListWithCustomBackground = () => <ReactionList 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/v4/ui-components/message-content/) once the content gets loaded.

| Type   |
| ------ |
| number |

### **alignment**

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

### fill

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

| Type   |
| ------ |
| string |

### onLongPress

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

### message

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

### `onPress`

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

### reactions

<partial id="chat-sdk/react-native/v4/_partials/common-content/contexts/message-context/reactions"></partial>

### reactionSize

Dimensions for each reaction icon.

| Type   |
| ------ |
| number |

### showMessageOverlay

<partial id="chat-sdk/react-native/v4/_partials/common-content/contexts/message-context/show_message_overlay"></partial>

### stroke

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

| Type   |
| ------ |
| string |

### supportedReactions

<partial id="chat-sdk/react-native/v4/_partials/common-content/core-components/channel/props/supported_reactions"></partial>

### `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-04-10T16:26:41.219Z.

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