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 {
  Channel,
  ReactionListBottom,
  ReactionListBottomProps,
} from "stream-chat-react-native";

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

<Channel ReactionListBottom={CustomReactionListBottom} />;

Props

handleReaction

Handles a reaction on a message. Called when a user reacts; should update the message and context.

hasReactions

onLongPress

onPress

onPressIn

preventPress

reactions

Reactions added to the message.

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

supportedReactions