Info:
This is documentation for Stream Chat React Native SDK v5, which is no longer actively maintained. For up-to-date documentation, see the latest version (v9).

OverlayReactions

OverlayReactions component is used to display the list of existing reactions within the message overlay, which opens up when the user long presses a message.

This is the default component provided to the prop OverlayReactions on the OverlayProvider component.

Props

alignment

Sets if the message should be aligned to right or left side of list.

Type Default
enum('right', 'left') 'right'

messageId

The message ID for which the reactions are displayed.

Type Default
String | undefined undefined

reactions

List of existing reactions which can be extracted from a message.

const reactions = message.latest_reactions.map((reaction) => ({
  alignment: clientId && clientId === reaction.user?.id ? "right" : "left",
  id: reaction?.user?.id || "",
  image: reaction?.user?.image,
  name: reaction?.user?.name || reaction.user_id || "",
  type: reaction.type,
}));
Type Default
Array | undefined undefined

showScreen

Shared value from React Native Reanimated useSharedValue hook.

Type
Object

supportedReactions

List of reactions which can be added on message. Please refer to the guide on customizing reactions for details.

Type Default
Array reactionData

title

Title for the component.

Type
String
Add Chat to my app: getstream.io/SKILL.md

The fastest way to build with Stream. Start a new project or improve an existing one. Full CLI and documentation integration out of the box.


Ask your agent:

/stream Build me a Social App with Feeds and Moderation.
/stream Any livestream calls running?
/stream Chat React Native v5: <Your Question>