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.
• Use messageContentWidth for precise alignment with message bubbles.
• Keep reaction sizes consistent across the app.

Basic Usage

Use case: Override the background color on the reaction list container.

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

const ReactionListTopWithCustomBackground = (props: ReactionListTopProps) => (
  <ReactionListTop {...props} fill="#00DDDD" />
);

<Channel ReactionListTop={ReactionListTopWithCustomBackground} />;

Props

alignment

fill

Background color for reaction list container when alignment is left.

hasReactions

messageContentWidth

Width of the message content. Computed in MessageContent after layout, and used to align the reactions to the message edge.

onLongPress

onPress

onPressIn

preventPress

reactions

Reactions added to the message.

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

reactionSize

Reaction icon size.

showMessageOverlay

Opens the message action overlay (called on long press).

supportedReactions