# ReactionListBottom

`ReactionListBottom` displays reactions above a message. This is the default component for the [`ReactionListBottom`](/chat/docs/sdk/react-native/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 {
  WithComponents,
  ReactionListBottom,
  ReactionListBottomProps,
} from "stream-chat-react-native";

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

<WithComponents overrides={{ ReactionListBottom: CustomReactionListBottom }}>
  <Channel channel={channel}>
    <MessageList />
    <MessageComposer />
  </Channel>
</WithComponents>;
```

## Props

| Prop                 | Description                                                                                                                                                                                                                                                                                                                                         | Type                                                     |
| -------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------------------------------- |
| `handleReaction`     | Handles a reaction on a message. Called when a user reacts; should update the message and context. Defaults to `undefined`.                                                                                                                                                                                                                         | `(reactionType: string) => Promise<void>` \| `undefined` |
| `hasReactions`       | True if the message has at least one reaction.                                                                                                                                                                                                                                                                                                      | `boolean`                                                |
| `onLongPress`        | Default long press handler for message UI.                                                                                                                                                                                                                                                                                                          | `function`                                               |
| `onPress`            | Default press handler for message UI.                                                                                                                                                                                                                                                                                                               | `function`                                               |
| `onPressIn`          | Default `pressIn` handler for message UI.                                                                                                                                                                                                                                                                                                           | `function`                                               |
| `preventPress`       |                                                                                                                                                                                                                                                                                                                                                     |                                                          |
| `reactions`          | Reactions added to the message.                                                                                                                                                                                                                                                                                                                     | `array`                                                  |
| `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`                                                  |

## Examples

Reactions data structure:

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


---

This page was last updated at 2026-05-13T13:38:50.705Z.

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