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.
Type | Default |
---|---|
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.
Type | Default |
---|---|
array | reactionData |