---
id: reaction-list
title: ReactionList
---

import Alignment from '../common-content/contexts/message-context/alignment.mdx';
import OnLongPress from '../common-content/contexts/message-context/on_long_press.mdx';
import OnPress from '../common-content/contexts/message-context/on_press.mdx';
import Reactions from '../common-content/contexts/message-context/reactions.mdx';
import ShowMessageOverlay from '../common-content/contexts/message-context/show_message_overlay.mdx';

import SupportedReactions from '../common-content/core-components/channel/props/supported_reactions.mdx';

`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`](../core-components/channel.mdx#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

### <div class="label required">required</div> **messageContentWidth** {#messagecontentwidth}

Width of message content. This helps ReactionList align itself on the front-edge of the message content.
This value gets computed in [`MessageContent`](./message_content.mdx) once the content gets loaded.

| Type |
| - |
| number |

### <div class="description">overrides the value from [MessageContext](../contexts/message_context.mdx#alignment)</div> **alignment** {#alignment}

<Alignment />

### fill

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

| Type |
| - |
| string |

<!-- ### radius -->

### <div class="description">overrides the value from [MessageContext](../contexts/message_context.mdx#onlongpress)</div> onLongPress {#onlongpress}

<OnLongPress />

### <div class="description">overrides the value from [MessageContext](../contexts/message_context.mdx#onpress)</div> onPress {#onpress}

<OnPress />

### <div class="description">overrides the value from [MessageContext](../contexts/message_context.mdx#reactions)</div> reactions {#reactions}

<Reactions />

### reactionSize

Dimensions for each reaction icon.

| Type |
| - |
| number |

### <div class="description">overrides the value from [MessageContext](../contexts/message_context.mdx#showmessageoverlay)</div> showMessageOverlay {#showmessageoverlay}

<ShowMessageOverlay />

### stroke

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

| Type |
| - |
| string |

<!-- ### strokeSize -->

### <div class="description">overrides the value from [MessagesContext](../contexts/messages_context.mdx#supportedreactions)</div> supportedReactions {#supportedreactions}

<SupportedReactions />