This is documentation for Stream Chat React Native SDK v5, which is nolonger actively maintained. For up-to-date documentation, see the latest version (v8) .

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

OverlayReactionsAvatar

OverlayContext