# MessageContent

Component to render content of a message within the [`MessageList`](https://getstream.io/chat/docs/sdk/react-native/v4/ui-components/message-list/). Message avatar and reactions are not part of `MessageContent`.
This is the default component provided to the prop [`MessageContent`](https://getstream.io/chat/docs/sdk/react-native/v4/core-components/channel#messagecontent) on the `Channel` component.

## Props

### additionalTouchableProps

Additional props provided to the underlying [TouchableOpacity](https://reactnative.dev/docs/touchableopacity#props) used by components within a message such as [`MessageContent`](https://getstream.io/chat/docs/sdk/react-native/v4/ui-components/message-content#additionaltouchableprops).

| Type   |
| ------ |
| object |

### alignment

Sets if the message should be aligned to right or left side of list.

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

### disabled

True if channel is [frozen](https://getstream.io/chat/docs/javascript/disabling-channels/) and [disableIfFrozenChannel](https://getstream.io/chat/docs/sdk/react-native/v4/core-components/channel#disableiffrozenchannel) is true.

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

### `formatDate`

Format function that returns a string to be used for the date in the message status and delete message component.

| Type     |
| -------- |
| function |

| Parameter | Description                                                                                                                                                    |
| --------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| date      | date to format provided as a string, [Date](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date), or number (Unix Timestamp) |

### `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') |

### hasReactions

True if the message has at least 1 reaction.

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

### 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](https://getstream.io/chat/docs/sdk/react-native/v4/contexts/message-context/#groupstyles).

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

### members

Members of current channel. This value is received from backend when you query a channel, either using [`client.queryChannels()`](https://getstream.io/chat/docs/javascript/query-channels/) or [`channel.watch()`](https://getstream.io/chat/docs/javascript/creating-channels/) API call.

>
> **Warning:** `client.queryChannels()` or `channel.watch()` returns only up to 100 members of channel. So if you expect total number of members to be > 100, its better to use [`client.queryMembers()`](https://getstream.io/chat/docs/javascript/query-members/) API endpoint separately to get the list of members.
>

```tsx
Record<
  string, // userId
  {
    banned?: boolean;
    created_at?: string;
    invite_accepted_at?: string;
    invite_rejected_at?: string;
    invited?: boolean;
    is_moderator?: boolean;
    role?: string;
    shadow_banned?: boolean;
    updated_at?: string;
    user?: UserResponse<UserType>;
    user_id?: string;
  }
>;
```

| Type   |
| ------ |
| object |

### message

Message object

| Type   |
| ------ |
| object |

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

### `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 |

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

### Attachment

Component for rendering attachments in MessageList.

Available props:

- `attachment` `{object}`

| Type      | Default                                                                  |
| --------- | ------------------------------------------------------------------------ |
| component | [`Attachment`](https://getstream.io/chat/docs/sdk/react-native/v4/ui-components/attachment/) |

### FileAttachmentGroup

Component to render group of `file` type attachments, when there are multiple `file` type attachments in message.

| Type      | Default                                                                                      |
| --------- | -------------------------------------------------------------------------------------------- |
| component | [`FileAttachmentGroup`](https://getstream.io/chat/docs/sdk/react-native/v4/ui-components/file-attachment-group/) |

### Gallery

Component to render 'image' type attachments in the `MessageList`.

| Type      | Default                                                            |
| --------- | ------------------------------------------------------------------ |
| component | [`Gallery`](https://getstream.io/chat/docs/sdk/react-native/v4/ui-components/gallery/) |

### MessageDeleted

Component to render deleted message.

| Type      | Default                                                                           |
| --------- | --------------------------------------------------------------------------------- |
| component | [`MessageDeleted`](https://getstream.io/chat/docs/sdk/react-native/v4/ui-components/message-deleted/) |

### MessageFooter

Component to render footer for message, within [`MessageList`](https://getstream.io/chat/docs/sdk/react-native/v4/ui-components/message-list/).

| Type      | Default                                                                         |
| --------- | ------------------------------------------------------------------------------- |
| component | [`MessageFooter`](https://getstream.io/chat/docs/sdk/react-native/v4/ui-components/message-footer/) |

### MessageHeader

Component to render header for message, within [`MessageList`](https://getstream.io/chat/docs/sdk/react-native/v4/ui-components/message-list/).

| Type      |
| --------- |
| component |

### MessageReplies

Component to show number of thread replies and avatars of members who replied on message

| Type      | Default                                                                           |
| --------- | --------------------------------------------------------------------------------- |
| component | [`MessageReplies`](https://getstream.io/chat/docs/sdk/react-native/v4/ui-components/message-replies/) |

### MessageStatus

Component to render status of message, which includes time and read-receipts.

| Type      | Default                                                                         |
| --------- | ------------------------------------------------------------------------------- |
| component | [`MessageStatus`](https://getstream.io/chat/docs/sdk/react-native/v4/ui-components/message-status/) |

### Reply

Component to render preview of parent of message for quoted reply.

| Type      | Default                                                        |
| --------- | -------------------------------------------------------------- |
| component | [`Reply`](https://getstream.io/chat/docs/sdk/react-native/v4/ui-components/reply/) |

---

For the most recent version of this documentation, visit [https://getstream.io/chat/docs/sdk/react-native/v4/ui-components/message-content/](https://getstream.io/chat/docs/sdk/react-native/v4/ui-components/message-content/).