ReactionListBottom

ReactionListBottom displays reactions above a message. This is the default component for the 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

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. Defaults to reactionData.	`array`

Examples

Reactions data structure:

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

ReactionListTop

ReactionListClustered