Skip to main content
Version: v5

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.

TypeDefault
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 admin role
  • current user has moderator role
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.

e.g. 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 atleast 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.

e.g., ['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

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

videos#

Array of video file attachments.

const videos = message.attachments.filter(a => a.type === 'video' && !a.og_scrape_url);
Type
array

Did you find this page helpful?