> ## Documentation Index
> Fetch the complete documentation index at: https://cometchat-22654f5b-docs-rn-guide-message-privately.mintlify.site/llms.txt
> Use this file to discover all available pages before exploring further.

# Property Changes

> Complete prop migration reference for all components from v6 to v7 — renamed, removed, added, and type-changed props.

<Accordion title="AI Integration Quick Reference">
  | Package                       | Migration from | Key changes                                                                                                                                                                            | Reference                                              |
  | ----------------------------- | -------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------ |
  | `@cometchat/chat-uikit-react` | v6 → v7        | Plugin system replaces templates/textFormatters; compound components replace string props; individual hide\*Option props consolidated; view props become render props on MessageBubble | [Migration Overview](/ui-kit/react/migration-overview) |
</Accordion>

## Common Patterns

These 8 patterns apply across all components. You do not need to look them up per-component:

| # | Pattern                                    | v6                           | v7                          | Action Required                                                           |
| - | ------------------------------------------ | ---------------------------- | --------------------------- | ------------------------------------------------------------------------- |
| 1 | View prop types                            | `JSX.Element`                | `ReactNode`                 | None (backward-compatible)                                                |
| 2 | Date format type                           | `CalendarObject`             | `CometChatDateFormatConfig` | Same shape, type alias renamed                                            |
| 3 | `hideError` prop (list & other components) | `boolean`                    | Removed                     | Use `errorView` prop instead — **retained on `CometChatMessageComposer`** |
| 4 | `disableLoadingState` prop                 | `boolean`                    | Removed                     | Use `loadingView` prop instead                                            |
| 5 | `textFormatters` on list components        | `CometChatTextFormatter[]`   | Removed                     | Handled by plugin system                                                  |
| 6 | `templates` prop                           | `CometChatMessageTemplate[]` | Removed                     | Handled by plugin system                                                  |
| 7 | `className` prop                           | Not available                | `string`                    | New on all components — for custom styling                                |
| 8 | `children` prop                            | Not available                | `ReactNode`                 | New on many components — for compound composition                         |

***

## CometChatConversations

### Removed Props

| Prop             | Replacement                      |
| ---------------- | -------------------------------- |
| `textFormatters` | Plugin system handles formatting |
| `hideError`      | Use `errorView` prop             |

### New Props

| Prop                   | Type                          | Description                            |
| ---------------------- | ----------------------------- | -------------------------------------- |
| `onEmpty`              | `() => void`                  | Called when conversation list is empty |
| `searchRequestBuilder` | `ConversationsRequestBuilder` | Builder for search filtering           |
| `searchKeyword`        | `string`                      | Controlled search keyword              |

***

## CometChatMessageList

### Modified Props

| Prop            | v6 Type  | v7 Type  | Notes                                        |
| --------------- | -------- | -------- | -------------------------------------------- |
| `goToMessageId` | `string` | `number` | Changed to match SDK's `getId()` return type |

### Removed Props

| Prop             | Replacement          |
| ---------------- | -------------------- |
| `templates`      | Plugin system        |
| `textFormatters` | Plugin system        |
| `hideError`      | Use `errorView` prop |

### New Props

| Prop                         | Type                                       | Description                        |
| ---------------------------- | ------------------------------------------ | ---------------------------------- |
| `loggedInUser`               | `CometChat.User`                           | Override the logged-in user        |
| `messageTypes`               | `string[]`                                 | Filter message types to display    |
| `messageCategories`          | `string[]`                                 | Filter message categories          |
| `onAvatarClick`              | `(user: CometChat.User) => void`           | Avatar click callback              |
| `onEditMessage`              | `(message: CometChat.BaseMessage) => void` | Edit message callback              |
| `onReplyMessage`             | `(message: CometChat.BaseMessage) => void` | Reply message callback             |
| `disableTruncation`          | `boolean`                                  | Disable text truncation in bubbles |
| `bubbleView`                 | `(message, loggedInUser) => ReactNode`     | Custom bubble renderer             |
| `onActiveChatChanged`        | `(data) => void`                           | Active chat change callback        |
| `onMessageRead`              | `(message: CometChat.BaseMessage) => void` | Message read callback              |
| `onMessageDeleted`           | `(message: CometChat.BaseMessage) => void` | Message deleted callback           |
| `onConversationMarkedAsRead` | `(conversation) => void`                   | Conversation marked as read        |
| `onConversationUpdated`      | `(conversation) => void`                   | Conversation updated callback      |

***

## CometChatMessageComposer

### Renamed Props

| v6 Name                                                                                                                                                                                                            | v7 Name                                                     |
| ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | ----------------------------------------------------------- |
| `initialComposerText`                                                                                                                                                                                              | `initialText`                                               |
| `placeholderText`                                                                                                                                                                                                  | `placeholder`                                               |
| `hideImageAttachmentOption` / `hideVideoAttachmentOption` / `hideAudioAttachmentOption` / `hideFileAttachmentOption` / `hidePollsOption` / `hideCollaborativeDocumentOption` / `hideCollaborativeWhiteboardOption` | `hideAttachmentOptions` (single object with boolean fields) |

### New Props

| Prop                            | Type                              | Description                                       |
| ------------------------------- | --------------------------------- | ------------------------------------------------- |
| `layout`                        | `CometChatMessageComposerLayout`  | Absorbs CompactMessageComposer variant            |
| `text`                          | `string`                          | Controlled text value                             |
| `maxInputHeight`                | `number`                          | Max height before scrolling                       |
| `enableRichTextEditor`          | `boolean`                         | Enable rich text formatting toolbar               |
| `hideRichTextFormattingOptions` | `boolean`                         | Hide formatting toolbar when rich text is enabled |
| `showBubbleMenuOnSelection`     | `boolean`                         | Show bubble menu on text selection                |
| `messageToEdit`                 | `TextMessage \| null`             | Message being edited                              |
| `messageToReply`                | `BaseMessage \| null`             | Message being replied to                          |
| `hideAttachmentOptions`         | `CometChatAttachmentHideOptions`  | Object to hide specific attachment types          |
| `showAttachmentPreview`         | `boolean`                         | Show attachment preview before sending            |
| `enableDragDrop`                | `boolean`                         | Enable drag-and-drop file upload                  |
| `maxAttachments`                | `number`                          | Max attachments per message                       |
| `allowedFileTypes`              | `string[]`                        | Allowed MIME types                                |
| `maxFileSize`                   | `number`                          | Max file size in bytes                            |
| `hideAIButton`                  | `boolean`                         | Hide AI assistant button                          |
| `hideLiveReaction`              | `boolean`                         | Hide live reaction button                         |
| `hideError`                     | `boolean`                         | Hide error state                                  |
| `disableAutoFocusOnMobile`      | `boolean`                         | Disable auto-focus on mobile                      |
| `liveReactionIcon`              | `string`                          | Custom live reaction icon                         |
| `attachmentIconView`            | `ReactNode`                       | Custom attachment icon                            |
| `voiceRecordingIconView`        | `ReactNode`                       | Custom voice recording icon                       |
| `emojiIconView`                 | `ReactNode`                       | Custom emoji icon                                 |
| `secondaryButtonView`           | `ReactNode`                       | Custom secondary button                           |
| `sendTextMessageOverride`       | `(text, richTextHtml?) => string` | Override sent text                                |
| `onClosePreview`                | `() => void`                      | Close preview callback                            |
| `onAttachmentAdded`             | `(file: File) => void`            | Attachment added callback                         |
| `onAttachmentRemoved`           | `(file: File) => void`            | Attachment removed callback                       |
| `onMentionSelected`             | `(user) => void`                  | Mention selected callback                         |

***

## CometChatMessageHeader

### Modified Props

| Prop          | v6 Signature | v7 Signature                      | Notes                              |
| ------------- | ------------ | --------------------------------- | ---------------------------------- |
| `onItemClick` | `() => void` | `(entity: User \| Group) => void` | Now receives the user/group entity |

### Removed Props

| Prop       | Replacement                                      |
| ---------- | ------------------------------------------------ |
| `itemView` | Use compound composition to replace header parts |

### New Props

| Prop                  | Type                              | Description                  |
| --------------------- | --------------------------------- | ---------------------------- |
| `onSummaryClick`      | `() => void`                      | Summary button click         |
| `onVoiceCallClick`    | `(entity: User \| Group) => void` | Voice call button click      |
| `onVideoCallClick`    | `(entity: User \| Group) => void` | Video call button click      |
| `callSettingsBuilder` | `any`                             | Custom call settings builder |

***

## CometChatThreadHeader

### Removed Props

| Prop             | Replacement   |
| ---------------- | ------------- |
| `template`       | Plugin system |
| `textFormatters` | Plugin system |

### New Props

| Prop              | Type         | Description                           |
| ----------------- | ------------ | ------------------------------------- |
| `onParentDeleted` | `() => void` | Called when parent message is deleted |
| `headerView`      | `ReactNode`  | Custom header content                 |

***

## CometChatUsers

### Removed Props

| Prop                  | Replacement            |
| --------------------- | ---------------------- |
| `hideError`           | Use `errorView` prop   |
| `disableLoadingState` | Use `loadingView` prop |

***

## CometChatGroups

### Removed Props

| Prop        | Replacement          |
| ----------- | -------------------- |
| `hideError` | Use `errorView` prop |

### New Props

| Prop            | Type         | Description               |
| --------------- | ------------ | ------------------------- |
| `onEmpty`       | `() => void` | Called when list is empty |
| `searchKeyword` | `string`     | Controlled search keyword |

***

## CometChatGroupMembers

### Modified Props

| Prop      | v6 Signature                  | v7 Signature           | Notes                                                     |
| --------- | ----------------------------- | ---------------------- | --------------------------------------------------------- |
| `options` | `(group, member) => Option[]` | `(member) => Option[]` | `group` param removed — component already knows its group |

### Removed Props

| Prop                  | Replacement            |
| --------------------- | ---------------------- |
| `hideError`           | Use `errorView` prop   |
| `disableLoadingState` | Use `loadingView` prop |

### New Props

| Prop     | Type         | Description          |
| -------- | ------------ | -------------------- |
| `onBack` | `() => void` | Back button callback |

***

## CometChatIncomingCall

### Removed Props

| Prop   | Replacement                                   |
| ------ | --------------------------------------------- |
| `call` | Incoming call is detected automatically in v7 |

### New Props

| Prop          | Type         | Description           |
| ------------- | ------------ | --------------------- |
| `onCallEnded` | `() => void` | Called when call ends |

***

## CometChatOngoingCall

### New Props

| Prop              | Type         | Description           |
| ----------------- | ------------ | --------------------- |
| `isAudioOnly`     | `boolean`    | Audio-only call mode  |
| `isDirectCalling` | `boolean`    | Direct calling mode   |
| `onCallEnded`     | `() => void` | Called when call ends |

***

## CometChatMessageBubble

### Renamed Props

| v6 Name       | v7 Name             |
| ------------- | ------------------- |
| `topMenuSize` | `quickOptionsCount` |

### Modified Props

| Prop             | v6 Type                                            | v7 Type                          | Migration                               |
| ---------------- | -------------------------------------------------- | -------------------------------- | --------------------------------------- |
| `leadingView`    | `JSX.Element \| null`                              | `(message) => ReactNode \| null` | Wrap in arrow function: `() => yourJSX` |
| `headerView`     | `JSX.Element \| null`                              | `(message) => ReactNode \| null` | Wrap in arrow function                  |
| `bottomView`     | `JSX.Element \| null`                              | `(message) => ReactNode \| null` | Wrap in arrow function                  |
| `threadView`     | `JSX.Element \| null`                              | `(message) => ReactNode \| null` | Wrap in arrow function                  |
| `footerView`     | `JSX.Element \| null`                              | `(message) => ReactNode \| null` | Wrap in arrow function                  |
| `statusInfoView` | `JSX.Element \| null`                              | `(message) => ReactNode \| null` | Wrap in arrow function                  |
| `options`        | `(CometChatActionsIcon \| CometChatActionsView)[]` | `CometChatMessageOption[]`       | New type with `id`, `title`, `onClick`  |
| `setRef`         | `(ref: any) => void`                               | `Ref<HTMLDivElement>`            | Use `useRef()` instead of callback      |

### Removed Props

| Prop       | Replacement                 |
| ---------- | --------------------------- |
| `id`       | Derived from `message` prop |
| `type`     | Derived from `message` prop |
| `category` | Derived from `message` prop |

### New Props

| Prop                          | Type                         | Description                   |
| ----------------------------- | ---------------------------- | ----------------------------- |
| `message`                     | `CometChat.BaseMessage`      | The message object (required) |
| `group`                       | `CometChat.Group`            | Group context                 |
| `hideAvatar`                  | `boolean`                    | Hide avatar                   |
| `forceShowAvatar`             | `boolean`                    | Force show avatar             |
| `hideSenderName`              | `boolean`                    | Hide sender name              |
| `hideTimestamp`               | `boolean`                    | Hide timestamp                |
| `hideThreadView`              | `boolean`                    | Hide thread indicator         |
| `showError`                   | `boolean`                    | Show error state              |
| `disableInteraction`          | `boolean`                    | Disable all interactions      |
| `hideReceipts`                | `boolean`                    | Hide delivery receipts        |
| `messageSentAtDateTimeFormat` | `CometChatDateFormatConfig`  | Timestamp format              |
| `onAvatarClick`               | `(user) => void`             | Avatar click callback         |
| `onThreadRepliesClick`        | `(message) => void`          | Thread click callback         |
| `onOptionClick`               | `(option, message) => void`  | Option click callback         |
| `onReactionChipClick`         | `(messageId, emoji) => void` | Reaction chip click           |
| `isSelected`                  | `boolean`                    | Selection state               |

***

## CometChatContextMenu

### Renamed Props

| v6 Name             | v7 Name             |
| ------------------- | ------------------- |
| `data`              | `items`             |
| `moreIconHoverText` | `moreButtonTooltip` |

### Modified Props

| Prop              | Change                                                    |
| ----------------- | --------------------------------------------------------- |
| `onOptionClicked` | Type changed: now receives `CometChatContextMenuItemData` |

***

## CometChatConfirmDialog

All string/callback props moved to compound sub-components:

| v6 Prop             | v7 Location                                                 |
| ------------------- | ----------------------------------------------------------- |
| `title`             | `CometChatConfirmDialog.Content` → `title` prop             |
| `messageText`       | `CometChatConfirmDialog.Content` → `messageText` prop       |
| `cancelButtonText`  | `CometChatConfirmDialog.Actions` → `cancelButtonText` prop  |
| `confirmButtonText` | `CometChatConfirmDialog.Actions` → `confirmButtonText` prop |
| `onSubmitClick`     | `CometChatConfirmDialog.Actions` → `onConfirm` prop         |
| `onCancelClick`     | `CometChatConfirmDialog.Actions` → `onCancel` prop          |

New root-level props: `isOpen`, `onClose`, `closeOnOutsideClick`, `variant`.

The compound sub-components are `CometChatConfirmDialog.Root`, `.Icon` (optional leading icon, new in v7), `.Content`, and `.Actions`.

***

## CometChatActionSheet

All props moved to compound pattern:

| v6 Prop             | v7 Equivalent                                                                 |
| ------------------- | ----------------------------------------------------------------------------- |
| `actions`           | Pass items as `<CometChatActionSheet.Item item={...} />` children             |
| `onActionItemClick` | Each `CometChatActionSheet.Item` handles its own `onClick` via `item.onClick` |

New root-level props: `isOpen`, `onClose`, `layoutMode`, `title`.

***

## CometChatCheckbox

### Renamed Props

| v6 Name                  | v7 Name    |
| ------------------------ | ---------- |
| `labelText`              | `label`    |
| `onCheckBoxValueChanged` | `onChange` |

***

## CometChatChangeScope

### Renamed Props

| v6 Name        | v7 Name   |
| -------------- | --------- |
| `onCloseClick` | `onClose` |

### Modified Props

| Prop      | v6 Type    | v7 Type                            | Notes                                                                                               |
| --------- | ---------- | ---------------------------------- | --------------------------------------------------------------------------------------------------- |
| `options` | `string[]` | `CometChatChangeScopeOptionData[]` | Changed to structured `{ id, label }` objects. Migration: `options.map(s => ({ id: s, label: s }))` |

***

## CometChatDate

### Renamed Props

| v6 Name          | v7 Name        |
| ---------------- | -------------- |
| `calendarObject` | `formatConfig` |

### New Props

| Prop        | Type                            | Description            |
| ----------- | ------------------------------- | ---------------------- |
| `formatter` | `(timestamp: number) => string` | Custom format function |
| `variant`   | `CometChatDateVariant`          | Display variant        |

***

## CometChatReactions

### Renamed Props

| v6 Name                   | v7 Name          |
| ------------------------- | ---------------- |
| `messageObject`           | `message`        |
| `onReactionListItemClick` | `onReactorClick` |

### Modified Props

| Prop              | v6 Signature                                 | v7 Signature                       | Notes                                           |
| ----------------- | -------------------------------------------- | ---------------------------------- | ----------------------------------------------- |
| `onReactionClick` | `(reaction: ReactionCount, message) => void` | `(emoji: string, message) => void` | First param changed from object to emoji string |

***

## CometChatReactionList

### Renamed Props

| v6 Name               | v7 Name       |
| --------------------- | ------------- |
| `messageObject`       | `message`     |
| `reactionItemClicked` | `onItemClick` |

***

## CometChatFullScreenViewer

### Renamed Props

| v6 Name          | v7 Name   |
| ---------------- | --------- |
| `ccCloseClicked` | `onClose` |

### Removed Props

| Prop               | Replacement                                                          |
| ------------------ | -------------------------------------------------------------------- |
| `message`          | Replaced by individual props: `senderName`, `senderAvatar`, `sentAt` |
| `placeholderImage` | Handled internally                                                   |

### New Props

| Prop                     | Type                                 | Description                   |
| ------------------------ | ------------------------------------ | ----------------------------- |
| `isOpen`                 | `boolean`                            | Controlled open state         |
| `mediaType`              | `CometChatFullScreenViewerMediaType` | Type of media being viewed    |
| `fileName`               | `string`                             | File name display             |
| `fileSize`               | `number`                             | File size display             |
| `attachments`            | `CometChatMediaAttachment[]`         | Multi-media gallery support   |
| `startIndex`             | `number`                             | Initial gallery index         |
| `senderName`             | `string`                             | Sender display name           |
| `senderAvatar`           | `string`                             | Sender avatar URL             |
| `senderStatus`           | `string`                             | Sender online status          |
| `sentAt`                 | `string`                             | Message timestamp             |
| `onIndexChange`          | `(index: number) => void`            | Gallery index change callback |
| `onDownload`             | `(attachment) => void`               | Download callback             |
| `enablePictureInPicture` | `boolean`                            | PiP for video                 |

***

## CometChatImageBubble

In v7, image bubbles are **self-extracting**: pass the SDK `message` and the bubble derives its own attachments, caption, and alignment. The pre-extracted data props from v6 are gone.

### Removed Props

| Prop          | Replacement                                                                                                  |
| ------------- | ------------------------------------------------------------------------------------------------------------ |
| `src`         | Self-extracted from `message` (multi-image support via the message's attachments)                            |
| `isSentByMe`  | `alignment` (`"left"` / `"right"`), auto-derived from the message sender vs. the logged-in user when omitted |
| `attachments` | Self-extracted from `message`                                                                                |
| `caption`     | Self-extracted from `message`                                                                                |
| `senderName`  | Self-extracted from `message`                                                                                |

### New / Current Props

| Prop               | Type                          | Description                                           |
| ------------------ | ----------------------------- | ----------------------------------------------------- |
| `message`          | `CometChat.MediaMessage`      | Source message — drives all extraction (**required**) |
| `alignment`        | `"left" \| "right"`           | Override incoming/outgoing alignment                  |
| `textFormatters`   | `CometChatTextFormatter[]`    | Text formatters for caption rendering                 |
| `placeholderImage` | `string`                      | Custom placeholder shown while the image loads        |
| `onImageClicked`   | `(attachment, index) => void` | Fires when an image is clicked                        |
| `className`        | `string`                      | Custom root class                                     |

<Note>
  This self-extracting pattern applies to all message bubbles in v7 (`CometChatTextBubble`, `CometChatVideoBubble`, `CometChatAudioBubble`, `CometChatFileBubble`, `CometChatPollBubble`, `CometChatStickerBubble`, `CometChatCallBubble`, and the action/collaborative bubbles): each takes the SDK `message` and derives its own data. See [Message Bubble](/ui-kit/react/components/message-bubble).
</Note>

***

## CometChatSearchBar

### Modified Props

| Prop       | v6 Signature                          | v7 Signature              | Notes                                 |
| ---------- | ------------------------------------- | ------------------------- | ------------------------------------- |
| `onChange` | `(input: { value?: string }) => void` | `(value: string) => void` | Simplified — receives string directly |

### New Props

| Prop                | Type                    | Description              |
| ------------------- | ----------------------- | ------------------------ |
| `defaultSearchText` | `string`                | Default search text      |
| `disabled`          | `boolean`               | Disable the search bar   |
| `debounceMs`        | `number`                | Debounce delay in ms     |
| `inputRef`          | `Ref<HTMLInputElement>` | Ref to the input element |
| `style`             | `CSSProperties`         | Inline styles            |

***

## CometChatButton

### Removed Props

| Prop      | Replacement                                                        |
| --------- | ------------------------------------------------------------------ |
| `text`    | Use `children`                                                     |
| `iconURL` | Use `children` (render your own icon)                              |
| `onClick` | Uses native `ButtonHTMLAttributes` — standard `onClick` from React |

### New Props

| Prop           | Type                     | Description                |
| -------------- | ------------------------ | -------------------------- |
| `variant`      | `CometChatButtonVariant` | Button style variant       |
| `size`         | `CometChatButtonSize`    | Button size                |
| `loadingLabel` | `string`                 | Label shown during loading |

***

## Next Steps

<CardGroup cols={2}>
  <Card title="Migration Overview" icon="arrow-up" href="/ui-kit/react/migration-overview">
    Architecture changes and step-by-step checklist
  </Card>

  <Card title="Components Overview" icon="grid-2" href="/ui-kit/react/components-overview">
    Browse all v7 components
  </Card>
</CardGroup>