# MessageContext

`MessageContext` is provided by [`Message`](https://github.com/GetStream/stream-chat-react-native/blob/main/package/src/components/Message/Message.tsx) component. If you are not familiar with React Context API, please read about it on [React docs](https://reactjs.org/docs/context.html).

## Basic Usage

`MessageContext` can be consumed by any of the child component of `Message` component as following:

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

```tsx
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:

```tsx
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`](/chat/docs/javascript/chat-permission-policies/) role
- current user has [`moderator`](/chat/docs/javascript/chat-permission-policies/) role

| Type    |
| ------- |
| boolean |

### files

Array of `file` type attachments to be shown in the grouped UI component.

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

```tsx
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](#groupstyles).

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

```tsx
[
  {
    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.

```tsx
const videos = message.attachments.filter(
  (a) => a.type === "video" && !a.og_scrape_url,
);
```

| Type  |
| ----- |
| array |



---

This page was last updated at 2026-07-10T16:05:04.004Z.

For the most recent version of this documentation, visit [https://getstream.io/chat/docs/sdk/react-native/v5/contexts/message-context/](https://getstream.io/chat/docs/sdk/react-native/v5/contexts/message-context/).