# MessageContext

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

## Best Practices

- Use `useMessageContext` for consistent access and typings.
- Keep message-level logic local; avoid reaching into channel state here.
- Use `actionsEnabled` and `canModifyMessage` to gate UI actions.
- Avoid heavy computations in message contexts to prevent list jank.
- Treat attachment arrays as read-only and render them efficiently.

## Basic Usage

Consume `MessageContext` in any child of `Message`:

```tsx
import { useContext } from "react";
import { MessageContext } from "stream-chat-react-native";

const { isMyMessage, message, files } = useContext(MessageContext);
```

Alternatively, use the `useMessageContext` hook.

```tsx
import { useMessageContext } from "stream-chat-react-native";

const { isMyMessage, message, files } = useMessageContext();
```

## Value

### `actionsEnabled`

Set to true when:

```tsx
message.type === "regular" && message.status === "received";
```

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

### alignment

Sets whether the message aligns left or right in the list.

| Type                  | Default |
| --------------------- | ------- |
| enum('right', 'left') | 'right' |


### canModifyMessage

True if one of the following 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` attachments shown in the grouped UI component.

```tsx
const files = message.attachments.filter((a) => a.type === "file");
```

| Type  |
| ----- |
| Array |

### `groupStyles`

Position of the message within a group of consecutive messages from the same user. Use `groupStyles` to style messages based on position (for example, avatars show only on the last message).

| Type                                               |
| -------------------------------------------------- |
| array of enum('top', 'bottom', 'middle', 'single') |


### `handleAction`

Sends an attachment action on a message (for example, Giphy Shuffle/Cancel/Send).

| Type                                       |
| ------------------------------------------ |
| `(name: string, value: string) => Promise` |

### handleToggleReaction

Callback function for toggling reaction from reaction selector.

| Type                             |
| -------------------------------- |
| `(reactionType: string) => void` |

### hasReactions

True if the message has at least one reaction.

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


### images

Array of `image` attachments on the message.

```tsx
const images = message.attachments.filter((a) => a.type === "image");
```

| Type  |
| ----- |
| Array |

### isMyMessage

True if the message was sent by the current user.

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

| Type   |
| ------ |
| string |

### message

Message object.

| Type           |
| -------------- |
| `Message` type |


### messageContentOrder

Order of message content.

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 contains only emojis.

| 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 attachments except `file` and `image`.

| Type  |
| ----- |
| Array |


### reactions

Reactions added to the message.

```tsx
[
  {
    own: true,
    type: "love",
  },
  {
    own: false,
    type: "haha",
  },
];
```

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

### showMessageOverlay

Opens the message action overlay (called on long press).

| Type                                       |
| ------------------------------------------ |
| `(showMessageReactions?: boolean) => void` |

### showMessageStatus

When false, message status (read receipt, pending indicator) isn’t rendered. Defaults to true for messages sent by the current user.

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

### `threadList`

True if the current message is part of a thread.

| Type    |
| ------- |
| Boolean |


### videos

Array of `video` attachments.

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

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


---

This page was last updated at 2026-04-21T07:55:40.630Z.

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