MessageContext
MessageContext is provided by Message component. If you are not familiar with React Context API, please read about it on React docs.
Basic Usage#
MessageContext can be consumed by any of the child component of Message component as following:
import { useContext } from 'react';
import { MessageContext } from 'stream-chat-react-native';
const { isMyMessage, message, files } = useContext(MessageContext);
Alternatively, you can also use useMessageContext hook provided by library to consume MessageContext.
import { useMessageContext } from 'stream-chat-react-native';
const { isMyMessage, message, files } = useMessageContext();
Value#
actionsEnabled#
This value gets set to true when following condition is true:
message.type === 'regular' && message.status === 'received';
| Type |
|---|
| boolean |
alignment#
Sets if the message should be aligned to right or left side of list.
| Type | Default |
|---|---|
| enum('right', 'left') | 'right' |
canModifyMessage#
True if one of the following condition is true:
- message is sent by the current user (connected to chat)
- current user has
adminrole - current user has
moderatorrole
| Type |
|---|
| boolean |
disabled#
True if channel is frozen and disableIfFrozenChannel is true.
| Type |
|---|
| boolean |
files#
Array of file type attachments to be shown in the grouped UI component.
const files = message.attachments.filter(a => a.type === 'file');
| Type |
|---|
| array |
groupStyles#
Position of message in the group. A message group is a group of consecutive messages from the same user. groupStyles can be used to style the message as per their position in message group.
for example user avatar (to which message belongs to) is only showed for last (bottom) message in group.
| Type |
|---|
| array of enum('top', 'bottom', 'middle', 'single') |
handleAction#
Function to send an attachment action on message. For example, in case of giphy type attachments, there are 3 actions available - Shuffle, Cancel, Send.
| Type |
|---|
(name: string, value: string) => Promise |
handleDeleteMessage#
Callback function for "Delete Message" action.
| Type |
|---|
| function |
handleEditMessage#
Callback function for "Edit Message" action.
| Type |
|---|
| function |
handleQuotedReplyMessage#
Callback function for "Quoted Reply" action.
| Type |
|---|
| function |
handleResendMessage#
Callback function for "Resend Message" (for failed message) action.
| Type |
|---|
| function |
handleToggleBanUser#
Callback function for "Ban/Unban User" action.
| Type |
|---|
| function |
handleToggleMuteUser#
Callback function for "Mute/Unmute User" action.
| Type |
|---|
| function |
handleToggleReaction#
Callback function for toggling reaction from reaction selector.
| Type |
|---|
(reactionType: string) => void |
hasReactions#
True if the message has at least 1 reaction.
| Type |
|---|
| boolean |
images#
Array of image type attachments on message.
const images = message.attachments.filter(a => a.type === 'image');
| Type |
|---|
| array |
isMyMessage#
True if the message is sent by current user (connected to chat).
| Type |
|---|
| boolean |
lastGroupMessage#
Whether or not this is the last message in a group of messages.
| Type |
|---|
| boolean |
lastReceivedId#
Most recent message id in the message list.
| Type |
|---|
| string |
message#
Message object
| Type |
|---|
| object |
messageContentOrder#
Order of message content.
for example ['quoted_reply', 'attachments', 'file', 'gallery', 'text']
| Type |
|---|
| array |
onLongPress#
Default long press handler for message UI.
| Type |
|---|
| function |
onlyEmojis#
True if the message text only contains emojis and nothing else.
| Type |
|---|
| boolean |
onOpenThread#
Handler function for "Thread Reply" action.
| Type |
|---|
| function |
onPress#
Default press handler for message UI.
| Type |
|---|
| function |
onPressIn#
Default pressIn handler for message UI.
| Type |
|---|
| function |
otherAttachments#
All the attachments on the message except for types file and image.
| Type |
|---|
| array |
reactions#
List of reactions added to the message.
[
{
own: true,
type: 'love',
},
{
own: false,
type: 'haha',
},
];
| Type |
|---|
| array |
readEventsEnabled#
Enable read receipts. The default value is supplied by the channel config.
| Type |
|---|
| boolean |
showMessageOverlay#
Function to open the message action overlay. This function gets called when user long presses a message.
| Type |
|---|
| function |
showMessageStatus#
When false, message status (read receipt, pending state indicator) won't be rendered. By default, this value is true for messages sent by current user of chat.
| Type |
|---|
boolean |
threadList#
True if current message is part of a message thread.
| Type |
|---|
| boolean |