Skip to content

mark as unread feture #200

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
suraj-chauhan-cometchat wants to merge 3 commits into
base: main
Choose a base branch
from
Open

mark as unread feture #200

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
f69ebcc
mark as unread feture
suraj-chauhan-cometchat Jan 20, 2026
92bcd30
added showMarkAsUnreadOption property
suraj-chauhan-cometchat Jan 21, 2026
84a9c4e
add ccUpdateConversation event description to events documentation
suraj-chauhan-cometchat Jan 21, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
35 changes: 20 additions & 15 deletions sdk/react-native/delivery-read-receipts.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -438,35 +438,39 @@ You can mark the messages for a particular conversation as unread using the `mar

| Parameter | Information |
| --------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| message | To mark a message as unread, pass a non-null `BaseMessage` instance to the `markAsUnread()` function. All messages below that message in the conversation will contribute to the unread messages count. Example: When User B sends User A a total of 10 messages, and User A invokes the `markAsUnread()` method on the fifth message, all messages located below the fifth message within the conversation list will be designated as unread. This results in a notification indicating there are 5 unread messages in the conversation list. |
| listener | The callback listener that will be called on success or error. This should be a non-null `CallbackListener` instance. |
| message | To mark a message as unread, pass a non-null `BaseMessage` instance to the `markMessageAsUnread()` function. All messages below that message in the conversation will contribute to the unread messages count. Example: When User B sends User A a total of 10 messages, and User A invokes the `markMessageAsUnread()` method on the fifth message, all messages located below the fifth message within the conversation list will be designated as unread. This results in a notification indicating there are 5 unread messages in the conversation list. |

<Note>
You cannot mark your own messages as unread. This method only works for messages received from other users.
</Note>

<Tabs>
<Tab title="Mark as Unread">
<Tab title="Mark Messages as Unread">
```javascript
CometChat.markAsUnread(message);
CometChat.markMessageAsUnread(message);
```

</Tab>

<Tab title="TypeScript">
```typescript
let message: CometChat.BaseMessage;
CometChat.markAsUnread(message);
CometChat.markMessageAsUnread(message);
```

</Tab>

</Tabs>

In case you would like to be notified of an error if the receipts fail to go through you can use `.then(successCallback, failureCallback).`
In case you would like to be notified of an error if the receipts fail to go through you can use `.then(successCallback, failureCallback).` On success, this method returns an updated `Conversation` object with the updated unread message count and other conversation data.

<Tabs>
<Tab title="Mark as Unread">
<Tab title="Mark Messages as Unread">
```javascript
CometChat.markAsUnread(message).then(
() => {
console.log("mark as unread success.");
CometChat.markMessageAsUnread(message).then(
(conversation) => {
console.log("mark messages as unread success.", conversation);
console.log("Unread message count:", conversation.getUnreadMessageCount());
},
(error) => {
console.log("An error occurred when marking the message as unread.", error);
Expand All @@ -479,12 +483,13 @@ CometChat.markAsUnread(message).then(
<Tab title="TypeScript">
```typescript
let message: CometChat.BaseMessage;
CometChat.markAsUnread(message).then(
() => {
console.log("mark as read success.");
CometChat.markMessageAsUnread(message).then(
(conversation: CometChat.Conversation) => {
console.log("mark messages as unread success.", conversation);
console.log("Unread message count:", conversation.getUnreadMessageCount());
},
(error: CometChat.CometChatException) => {
console.log("An error occurred when marking the message as read.", error);
console.log("An error occurred when marking the message as unread.", error);
}
);
```
Expand Down Expand Up @@ -630,6 +635,6 @@ The following features will be available only if the **Enhanced Messaging Status
* `onMessagesReadByAll` event,
* `deliveredAt` field in a group message,
* `readAt` field in a group message.
* `markAsUnread` method.
* `markMessageAsUnread` method.

</Info>
13 changes: 13 additions & 0 deletions ui-kit/react-native/core-features.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -50,6 +50,19 @@ CometChat's Read Receipts feature provides visibility into the message status, l
| [MessageList](/ui-kit/react-native/message-list) | [MessageList](/ui-kit/react-native/message-list) component renders different types of Message bubbles, Read Recept status is an integral part of all message bubbles, no matter the type, and provides real-time updates about the status of the message. |
| [MessageInformation](/ui-kit/react-native/component-styling#message-information) | [MessageInformation](/ui-kit/react-native/component-styling#message-information) component provides transparency into the status of each sent message, giving the sender insights into whether their message has been delivered and read. |

## Mark as Unread

Mark as Unread feature allows users to manually mark messages as unread, helping them keep track of important conversations they want to revisit later. When enabled, the message list can automatically start from the first unread message, making it easier to pick up where you left off.

<Frame>
<img src="/images/mark-as-unread.png" />
</Frame>

| Components | Functionality |
| ------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| [Message List](/ui-kit/react-native/message-list) | [Message List](/ui-kit/react-native/message-list) provides the "Mark as unread" option in message actions and supports starting from the first unread message when enabled. |
| [Conversations](/ui-kit/react-native/conversations) | [Conversations](/ui-kit/react-native/conversations) component listens to conversation updates and reflects the updated unread count in real-time. |

## Typing Indicator

The Typing Indicator feature in CometChat shows when a user is typing a response in real-time, fostering a more interactive and engaging chat environment. This feature enhances the real-time communication experience, making conversations feel more natural and fluid.
Expand Down
1 change: 1 addition & 0 deletions ui-kit/react-native/events.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -15,6 +15,7 @@ Both Components and Composite Components have the ability to emit events. These
| Name | Description |
| --------------------- | -------------------------------------------------------------------------- |
| ccConversationDeleted | This event is triggered when the user successfully deletes a conversation. |
| ccUpdateConversation | This event is triggered to update a conversation in the conversation list. Takes a Conversation object to update. |

### CometChatUserEventListener

Expand Down
41 changes: 41 additions & 0 deletions ui-kit/react-native/message-list.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -411,6 +411,11 @@ Below is a list of customizations along with corresponding code snippets
| **hideMessageInfoOption** | used to toggle visibility of hide message info option in MessageList | `hideMessageInfoOption={true}` |
| **hideGroupActionMessages** | used to toggle visibility of hide group action info option in MessageList | `hideGroupActionMessages={true}` |
| **hideTimestamp** | used to toggle visibility of hide timestamp in MessageList | `hideTimestamp={true}` |
| **startFromUnreadMessages** | When set to true, the chat will load from the first unread message if unread messages exist, otherwise loads from the latest messages. Default is false. | `startFromUnreadMessages={true}` |
| **showMarkAsUnreadOption** | When set to true, shows the "Mark Unread" option in the message actions menu. This option will only appear for received messages, not for the user's own messages. Default is false. | `showMarkAsUnreadOption={true}` |
| **NewMessageIndicatorView** | Custom view component for the "New Messages" indicator. | `NewMessageIndicatorView={MyCustomIndicator}` |
| **newMessageIndicatorStyle** | Custom styles for the "New Messages" indicator. | `newMessageIndicatorStyle={{ backgroundColor: 'red' }}` |
| **newMessageIndicatorText** | Text to display in the "New Messages" indicator. | `newMessageIndicatorText="New Messages"` |

***

Expand Down Expand Up @@ -1138,3 +1143,39 @@ return (
<Frame>
<img src="/images/53d4119c-message_list_footer_view-7210ad9b52c7d141691091518bd6e4e3.png" />
</Frame>

***

#### NewMessageIndicatorView

Custom view component for the "New Messages" indicator.

Use Cases:

* Create a unique design for the new message notification.
* Add animation or custom behavior to the indicator.

<Tabs>
<Tab title="App.tsx">
```tsx
import { CometChatMessageList } from "@cometchat/chat-uikit-react-native";
import { View, Text, TouchableOpacity } from 'react-native';
import { CometChat } from "@cometchat/chat-sdk-react-native";

const CustomNewMessageIndicator = () => {
return (
<View style={{ backgroundColor: '#3399FF', padding: 8, borderRadius: 20, alignSelf:'center' }}>
<Text style={{ color: 'white', fontWeight: 'bold' }}>⬇ New Messages</Text>
</View>
);
};

return (
<CometChatMessageList
user={chatUser}
NewMessageIndicatorView={CustomNewMessageIndicator}
/>
);
```
</Tab>
</Tabs>