# MessageContent

Component to render content of a message within the [`MessageList`](https://getstream.io/chat/docs/sdk/react-native/v5/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/v5/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/v5/ui-components/message-content/).

| 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/v5/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/v5/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           |
| -------------- |
| `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 |

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

## UI Component Props

### `Attachment`

Component for rendering attachments in MessageList.

Available props:

- `attachment` `{object}`

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

### `FileAttachmentGroup`

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

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

### `Gallery`

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

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

### `MessageDeleted`

Component to render deleted message.

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

### `MessageError`

Component to customize the message error component.

| Type          | Default                                                                       |
| ------------- | ----------------------------------------------------------------------------- |
| ComponentType | [`MessageError`](https://getstream.io/chat/docs/sdk/react-native/v5/ui-components/message-error/) |

### `MessageFooter`

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

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

### `MessageHeader`

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

| Type          |
| ------------- |
| ComponentType |

### `MessageReplies`

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

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

### `MessageStatus`

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

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

### `Reply`

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

| Type          | Default                                                                                                              |
| ------------- | -------------------------------------------------------------------------------------------------------------------- |
| ComponentType | [`Reply`](https://github.com/GetStream/stream-chat-react-native/blob/develop/package/src/components/Reply/Reply.tsx) |

---

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