Skip to main content
Version: v3

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
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

Did you find this page helpful?