# MessagesContext
> **Info:** This is release candidate documentation for **Stream Chat React Native SDK v10**. For the latest stable version, see the [latest version (v9)](https://getstream.io/chat/docs/sdk/react-native/).
`MessagesContext` holds the message settings and handlers of a `Channel` or a `Thread`: the reactions on offer, the message actions, what pressing a message does, how messages are laid out and grouped. `Channel` and `Thread` build it from their props of the same names, and every message and list below them reads it. Read it with `useMessagesContext()`. For the one message a component renders, use [`MessageContext`](https://getstream.io/chat/docs/sdk/react-native/v10/component-reference/message/messagecontext/) instead.
## Best practices
- Set these values as props on `Channel` or `Thread`, not by rendering a `MessagesProvider` of your own. `Thread` builds its own value from its own props, so set them on both when a setting should apply to threads too.
- Pass stable values. The context value is rebuilt only when the channel's ID changes, or when `disableTypingIndicator`, `dismissKeyboardOnMessageTouch`, `messageContentOrder`, `messageOverlayTargetId`, `myMessageTheme`, `hasCreatePoll`, the number of keys in `additionalPressableProps` or `markdownRules`, or the number of `supportedReactions` changes. A new function passed later for a handler such as `onPressMessage` takes effect only then, so read state that changes through a ref.
- Call `useMessagesContext()` inside a `Channel` or a `Thread`. It throws anywhere else.
- In a component that renders one message, read the message and its handlers from `useMessageContext()`, and this context only for the settings.
## Basic usage
This component reads the reactions on offer from `MessagesContext` and the message's reaction handler from `MessageContext`, and shows the main reactions as buttons under each message's content:
```tsx title="src/QuickReactions.tsx"
import { Pressable, StyleSheet, View } from "react-native";
import {
useMessageContext,
useMessagesContext,
WithComponents,
} from "stream-chat-react-native";
const QuickReactions = () => {
const { supportedReactions } = useMessagesContext();
const { handleReaction } = useMessageContext();
if (!handleReaction) {
return null;
}
return (
{supportedReactions
?.filter((reaction) => reaction.isMain)
.map(({ Icon, type }) => (
handleReaction(type)}
>
))}
);
};
const overrides = { MessageContentBottomView: QuickReactions };
export const MessagesWithQuickReactions = ({
children,
}: {
children: React.ReactNode;
}) => {children};
const styles = StyleSheet.create({
row: { flexDirection: "row", gap: 8, padding: 4 },
});
```
`handleReaction` is `undefined` on a failed message, so the component renders nothing there.
## Values
The defaults are what the SDK uses when the prop isn't passed. For `customMessageSwipeAction`, `getMessageGroupStyle`, `messageActions`, `messageOverlayTargetId`, `messageSwipeToReplyHitSlop`, `onLongPressMessage` and `onPressMessage`, the context value is then `undefined`, and the components that read it fall back to the default.
| Value | Type | Default | Description |
| -------------------------------- | ------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
| `additionalPressableProps` | `Omit` | | Props for the `Pressable` around a message's content, and around its file, gallery, Giphy and link preview attachments. They're applied after the SDK's own, so `onPress`, `onLongPress` and `onPressIn` here replace the SDK's handlers. |
| `customMessageSwipeAction` | `({ channel, message, }: { channel: Channel; message: LocalMessage; }) => void` | quotes the message in the composer | Called when the user swipes a message, in place of quoting it. |
| `disableTypingIndicator` | `boolean` | | Leaves the typing indicator out of the message list. |
| `dismissKeyboardOnMessageTouch` | `boolean` | `true` | Dismisses the keyboard when the user presses a message. |
| `enableMessageGroupingByUser` | `boolean` | `true` | Groups consecutive messages from the same user. See [Message grouping](https://getstream.io/chat/docs/sdk/react-native/v10/component-reference/message-list/messagelist/#message-grouping). |
| `enableSwipeToReply` | `boolean` | `true` | Lets the user swipe a message to quote it. Deleted messages can't be swiped. |
| `FlatList` | `typeof FlatList` | React Native's `FlatList` | The list `MessageList` renders when its `animateLayout` is `false`. |
| `forceAlignMessages` | `boolean \| Alignment` | | `'left'` or `'right'` puts every message on that side. Otherwise the user's own messages are on the right and the others on the left; `true` doesn't change that. |
| `getMessageGroupStyle` | `(params: MessageGroupStylesParams) => GroupStyle[]` | `getGroupStyle` | Computes a message's group styles from the message, its neighbors, the date separators around them and `maxTimeBetweenGroupedMessages`. |
| `giphyVersion` | `keyof Images` | `'fixed_height'` | The rendition of a Giphy attachment to show, one of the keys of [Giphy's image object](https://developers.giphy.com/docs/api/schema#image-object). |
| `handleBan` | `(message: LocalMessage) => Promise` | | Called with the message when the user picks the ban action, before the SDK bans or unbans the sender. |
| `handleBlockUser` | `(user: LocalMessage['user']) => Promise` | | Called with the sender when the user picks the block action, before the confirmation dialog, or before the SDK unblocks a blocked sender. |
| `handleCopy` | `(message: LocalMessage) => Promise` | | Called with the message when the user picks the copy action, before the SDK copies the text. |
| `handleDelete` | `(message: LocalMessage) => Promise` | | Called with the message when the user picks the delete action, before the confirmation dialog. |
| `handleDeleteForMe` | `(message: LocalMessage) => Promise` | | Called with the message when the user picks the delete for me action, before the SDK runs it. |
| `handleEdit` | `(message: LocalMessage) => void` | | Called with the message when the user picks the edit action, before the composer switches to editing. |
| `handleFlag` | `(message: LocalMessage) => Promise` | | Called with the message when the user picks the flag action, before the confirmation dialog. |
| `handleMarkUnread` | `(message: LocalMessage) => Promise` | | Called with the message when the user picks the mark unread action, before the SDK marks it. |
| `handleMute` | `(message: LocalMessage) => Promise` | | Called with the message when the user picks the mute action, before the SDK mutes or unmutes the sender. |
| `handlePinMessage` | `((message: LocalMessage) => MessageActionType) \| null` | | Called with the message when the user picks the pin or unpin action, before the SDK runs it. Its return value isn't used. |
| `handleQuotedReply` | `(message: LocalMessage) => Promise` | | Called with the message when the user picks the reply action, before the composer quotes it. |
| `handleReaction` | `(message: LocalMessage, reactionType: string) => Promise` | | Called with the message and the reaction type when the user picks a reaction, before the SDK toggles it. Not called when `selectReaction` is set. |
| `handleRetry` | `(message: LocalMessage) => Promise` | | Called with the failed message, without its server-reserved fields, when the user picks the retry action, before the SDK resends it. |
| `handleThreadReply` | `(message: LocalMessage) => Promise` | | Called with the message when the user picks the thread reply action, before the list's `onThreadSelect`. |
| `hasCreatePoll` | `boolean` | whether polls are enabled for the channel | Shows the poll button in the composer. It can only turn the button off, so with polls disabled for the channel, `true` doesn't show it. |
| `isAttachmentEqual` | `(prevAttachment: Attachment, nextAttachment: Attachment) => boolean` | | An extra check when a message re-renders. Return `false` to re-render an attachment the SDK would consider unchanged, for example when a custom field changed. |
| `markdownRules` | `MarkdownRules` | | `simple-markdown` rules merged over the SDK's rules for message text. |
| `messageActions` | `(param: MessageActionsParams) => MessageActionType[]` | the exported `messageActions` | Returns the actions of the message menu, in order. See [Message actions](https://getstream.io/chat/docs/sdk/react-native/v10/ui/customizing/actions/#message-actions). |
| `messageContentOrder` | `MessageContentType[]` | `['quoted_reply', 'gallery', 'files', 'poll', 'ai_text', 'attachments', 'location', 'text']` | The order of the parts inside a message's bubble. A part left out doesn't render. |
| `messageOverlayTargetId` | `string` | `'@stream-io/message-root'` | Which `MessageOverlayWrapper` in a message the message menu measures and lifts into the overlay. A custom message view that wraps another view sets the same `targetId` on its wrapper. |
| `messageSwipeToReplyHitSlop` | `RectOrSize` | the screen's width on both sides | The hit slop of the swipe to reply gesture. |
| `messageTextNumberOfLines` | `number` | | Truncates message text to this many lines. Only the first paragraph renders then. |
| `myMessageTheme` | `DeepPartial` | | A theme merged over the current one for the user's own messages. See [Theming](https://getstream.io/chat/docs/sdk/react-native/v10/ui/customizing/theming/#the-users-own-messages). |
| `onAlsoSentToChannelHeaderPress` | `(payload: AlsoSentToChannelHeaderPressPayload) => void` | | Called when the user presses **View** on the "Also sent in channel" or "Replied to a thread" header, with the message's ID and, in a channel, the reply's `Thread`. The header shows **View** only when this is set. |
| `onLongPressMessage` | `(payload: MessagePressableHandlerPayload) => void` | opens the message menu | Called in place of the SDK's long press handler. The payload has `actionHandlers`, `additionalInfo`, `defaultHandler`, `emitter`, `event` and `message`; call `defaultHandler()` to keep the SDK's behavior. |
| `onPressInMessage` | `(payload: MessagePressableHandlerPayload) => void` | | Called when a press on a message or one of its parts starts, with the same payload. |
| `onPressMessage` | `(payload: MessagePressableHandlerPayload) => void` | what the pressed part does | Called in place of the SDK's press handler, with the same payload. `emitter` says which part was pressed. A press on a failed message doesn't reach it: that opens the message menu, or the bounce dialog for a bounced message. |
| `reactionListPosition` | `"bottom" \| "top"` | `'top'` | Where a message's reactions render: above the bubble, or under it. |
| `reactionListType` | `"clustered" \| "segmented"` | `'clustered'` | `'clustered'` shows up to four reaction icons in one pill; `'segmented'` shows a pill for each reaction type, with its count. See [Reaction components](https://getstream.io/chat/docs/sdk/react-native/v10/component-reference/message/reaction-components/). |
| `selectReaction` | `(message: LocalMessage) => (reactionType: string) => Promise` | | Replaces what picking a reaction does. It receives the message and returns the function the reaction picker and the reactions sheet call with the type. |
| `shouldShowUnreadUnderlay` | `boolean` | `true` | Shows the unread separator under the last read message. |
| `supportedReactions` | `ReactionData[]` | the exported `reactionData` | The reactions on offer. The ones with `isMain` show in the message menu's picker. A reaction of a type not in this list doesn't show on messages. |
| `urlPreviewType` | `"compact" \| "full"` | `'full'` | `'full'` renders link previews with `UrlPreview`, `'compact'` with `URLPreviewCompact`. |
## Related hooks
- `useMessagesContext()` returns the value. It throws outside a `Channel` or a `Thread`.
- `useMessageContext()` returns the value of the message a component renders. See [MessageContext](https://getstream.io/chat/docs/sdk/react-native/v10/component-reference/message/messagecontext/).
- [Message hooks](https://getstream.io/chat/docs/sdk/react-native/v10/reference/hooks/message-hooks/) has the hooks the handlers are built from.
---
For the most recent version of this documentation, visit [https://getstream.io/chat/docs/sdk/react-native/v10/component-reference/message-list/messagescontext/](https://getstream.io/chat/docs/sdk/react-native/v10/component-reference/message-list/messagescontext/).