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

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
Message type

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

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