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