Skip to main content
Version: v4

ReactionList

ReactionList component is used to display the reactions added to a message right on top of it.

This is the default component provided to the prop ReactionList on the Channel component.

Basic Usage#

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

import { Channel, ReactionList } from 'stream-chat-react-native';

const ReactionListWithCustomBackground = () => <ReactionList fill={'#00DDD'} stroke={'#fffff'} />

<Channel ReactionList={ReactionListWithCustomBackground} />

Props#

required
messageContentWidth#

Width of message content. This helps ReactionList align itself on the front-edge of the message content. This value gets computed in MessageContent once the content gets loaded.

Type
number

overrides the value from MessageContext
alignment#

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

TypeDefault
enum('right', 'left')'right'

fill#

Background color for reaction list container when alignment is left.

Type
string

overrides the value from MessageContext
onLongPress#

Default long press handler for message UI.

Type
function

overrides the value from MessageContext
message#

Message object

Type
object

overrides the value from MessageContext
onPress#

Default press handler for message UI.

Type
function

overrides the value from MessageContext
reactions#

List of reactions added to the message.

[
{
own: true,
type: 'love',
},
{
own: false,
type: 'haha',
},
];
Type
array

reactionSize#

Dimensions for each reaction icon.

Type
number

overrides the value from MessageContext
showMessageOverlay#

Function to open the message action overlay. This function gets called when user long presses a message.

Type
function

stroke#

Background color for reaction list container when alignment is right.

Type
string

overrides the value from MessagesContext
supportedReactions#

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

TypeDefault
arrayreactionData

overrides the value from MessagesContext
targetedMessage#

Has the message id of the message which is to be highlighted. By default the value is undefined. As soon as the highlight time is out this is set to undefined.

Type
string

Did you find this page helpful?