# ReactionListBottom

`ReactionListBottom` displays reactions above a message. This is the default component for the [`ReactionListBottom`](/chat/docs/sdk/react-native/v8/core-components/channel#reactionlistbottom) prop.

## Best Practices

- Keep reaction lists compact to avoid covering message content.
- Use `supportedReactions` to keep available reactions consistent.
- Avoid heavy logic in press handlers for smooth interactions.
- Respect `preventPress` when reactions should be read-only.
- Use consistent placement (top/bottom) across your app.

## Basic Usage

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

const CustomReactionListBottom = (props: ReactionListBottomProps) => (
  <ReactionListBottom {...props} />
);

<Channel ReactionListBottom={CustomReactionListBottom} />;
```

## Props

### `handleReaction`

Handles a reaction on a message. Called when a user reacts; should update the message and context.

| Type                                                     | Default     |
| -------------------------------------------------------- | ----------- |
| `(reactionType: string) => Promise<void>` \| `undefined` | `undefined` |

### `hasReactions`

True if the message has at least one reaction.

| Type    |
| ------- |
| boolean |


### `onLongPress`

Default long press handler for message UI.

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


### `onPress`

Default press handler for message UI.

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


### `onPressIn`

Default `pressIn` handler for message UI.

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


### `preventPress`

### `reactions`

Reactions added to the message.

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

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

### `supportedReactions`

List of reactions users can add to messages. See [customizing reactions](/chat/docs/sdk/react-native/v8/guides/message-customization#message-with-custom-reactions/).

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



---

This page was last updated at 2026-04-21T07:55:41.486Z.

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