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 UsageUse 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} />
#
Propsrequired 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' |
#
fillBackground 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 |
#
reactionSizeDimensions 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 |
#
strokeBackground 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 |