ReactionListTop

ReactionListTop displays reactions above a message. This is the default component for the ReactionListTop 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.
Keep reaction sizes consistent across the app.

Basic Usage

Use case: Wrap or customize the reaction list rendered above the message bubble.

import {
  WithComponents,
  ReactionListTop,
  ReactionListTopProps,
} from "stream-chat-react-native";

const CustomReactionListTop = (props: ReactionListTopProps) => (
  <ReactionListTop {...props} />
);

<WithComponents overrides={{ ReactionListTop: CustomReactionListTop }}>
  <Channel channel={channel}>
    <MessageList />
    <MessageComposer />
  </Channel>
</WithComponents>;

To restyle the reaction list container (including its background), use the messageItemView.reactionListTop.container theme key.

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.	`(reactionType: string) => Promise<void>`
`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`
`reactionListType`	Default layout style used for the reaction list, sourced from `MessagesContext`.	`'clustered'` \| `'segmented'`
`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. `'clustered'` renders a clustered list; otherwise a horizontal segmented list is used.	`'clustered'` \| `'segmented'`

Examples

Reactions data structure:

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

MessageRepliesAvatar

ReactionListBottom