ReactionListBottom

ReactionListBottom displays reactions below 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
`alignment`	Sets whether the message aligns left or right in the list. Defaults to `'right'`.	`enum('right', 'left')`
`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`	Disable press interactions for the reaction list.	`boolean`
`reactions`	Reactions added to the message.	`array`
`showCount`	Whether to show the count next to each reaction. Defaults to `true`.	`boolean`
`showReactionsOverlay`	Opens the reactions overlay.	`(selectedReaction?: string) => void`
`supportedReactions`	List of reactions users can add to messages. See customizing reactions. Defaults to reactionData.	`array`
`type`	Layout of the reaction list. `'segmented'` renders a grid; otherwise a clustered list is used.	`'clustered'` \| `'segmented'`

Examples

Reactions data structure:

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

ReactionListTop

ReactionListClustered