> ## 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. # Core > Explore CometChat React Native UI Kit core messaging features, including media sharing, receipts, typing indicators, and more. **Quick Reference for AI Agents & Developers** Key components powering core features: * **Conversations** → [CometChatConversations](/ui-kit/react-native/conversations) * **Message List** → [CometChatMessageList](/ui-kit/react-native/message-list) * **Message Composer** → [CometChatMessageComposer](/ui-kit/react-native/message-composer) * **Message Header** → [CometChatMessageHeader](/ui-kit/react-native/message-header) * **Users** → [CometChatUsers](/ui-kit/react-native/users) * **Groups** → [CometChatGroups](/ui-kit/react-native/groups) * **Group Members** → [CometChatGroupMembers](/ui-kit/react-native/group-members) ## Overview The UI Kit comprises a variety of components, each designed to work seamlessly with one another to deliver a comprehensive and intuitive chat experience. Here's how different UI Kit components work together to achieve CometChat's core features: ## Instant Messaging At the heart of CometChat's functionality is the ability to support real-time text messaging. Users can send and receive instant messages, fostering quick and efficient communication.

| Components | Functionality | | -------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | [MessageComposer](/ui-kit/react-native/message-composer) | [MessageComposer](/ui-kit/react-native/message-composer) contains an ActionSheet component — a contextual menu overlay that provides multiple options for sharing media files. | | [MessageList](/ui-kit/react-native/message-list) | [MessageList](/ui-kit/react-native/message-list) component displays various media message bubbles, including [Image Bubble](/ui-kit/react-native/message-bubble-styling#image-bubble), [File Bubble](/ui-kit/react-native/message-bubble-styling#file-bubble), [Audio Bubble](/ui-kit/react-native/message-bubble-styling#audio-bubble), [Video Bubble](/ui-kit/react-native/message-bubble-styling#video-bubble) | > A complete messaging interface can be built by combining three key components: [MessageHeader](/ui-kit/react-native/message-header), [MessageList](/ui-kit/react-native/message-list), and [MessageComposer](/ui-kit/react-native/message-composer). ## Read Receipts CometChat's Read Receipts feature provides visibility into message status, letting users know when a message has been delivered and read. This brings clarity to communication and ensures users are informed about the status of their messages.

| Components | Functionality | | -------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | [Conversations](/ui-kit/react-native/conversations) | [Conversations](/ui-kit/react-native/conversations) component renders a conversation item list. Each item also displays the delivery status of the last message, providing users with real-time updates on message status. | | [MessageList](/ui-kit/react-native/message-list) | [MessageList](/ui-kit/react-native/message-list) component renders different types of message bubbles. Read receipt status is an integral part of all message bubbles, regardless of type, and provides real-time updates about message status. | | [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 The 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.

| 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 shows when a user is typing a response in real-time, fostering a more interactive and engaging chat environment. This enhances the real-time communication experience, making conversations feel more natural and fluid.

| Components | Functionality | | ----------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | [Conversations](/ui-kit/react-native/conversations) | [Conversations](/ui-kit/react-native/conversations) component renders a list of conversation items, each displaying real-time typing indicators. If a user in a one-on-one or group chat is currently typing, the status is reflected instantly in the conversation list. | | [Message Header](/ui-kit/react-native/message-header) | [Message Header](/ui-kit/react-native/message-header) component displays user or group details in the toolbar. It also manages the typing indicator, dynamically updating to show a real-time "typing..." status when a user or group member is actively typing. | ## User Presence CometChat's User Presence feature lets users see the online or offline status of their contacts, helping them choose the right time to start a conversation and set expectations for response times.

| Components | Functionality | | ---------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | [Conversations](/ui-kit/react-native/conversations) | [Conversations](/ui-kit/react-native/conversations) component renders a list of conversation items, each displaying user presence information such as online or offline status. | | [MessageHeader](/ui-kit/react-native/message-header) | [Message Header](/ui-kit/react-native/message-header) component displays user or group details in the toolbar. It also handles user presence, showing real-time online or offline status for the selected user. | | [Users](/ui-kit/react-native/users) | [Users](/ui-kit/react-native/users) component displays a list of users available in your app and is also responsible for showing their real-time presence status such as online or offline. | | [GroupMembers](/ui-kit/react-native/group-members) | [Group Members](/ui-kit/react-native/group-members) component displays a list of users within a group and also manages real-time presence information, showing whether each member is online or offline. | ## Reactions CometChat's Reactions feature adds a layer of expressiveness to your chat application by allowing users to react to messages. With Reactions, users can convey a range of emotions or express their thoughts on a particular message without typing out a full response, enhancing the user experience and fostering greater engagement.

| Components | Functionality | | ------------------------------------------------ | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | | [MessageList](/ui-kit/react-native/message-list) | [MessageList](/ui-kit/react-native/message-list) component renders various types of message bubbles. Regardless of the message type, reactions are seamlessly integrated, allowing users to respond in a more engaging and expressive way. | ## Mentions Mentions is a feature that enhances the interactivity and clarity of group or 1-on-1 chats by allowing users to directly address or refer to specific individuals in a conversation.

| Components | Functionality | | -------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | [Conversations](/ui-kit/react-native/conversations) | [Conversations](/ui-kit/react-native/conversations) component integrates the Mentions feature, allowing users to see directly from the conversation list when they or others have been specifically mentioned in a chat. | | [MessageComposer](/ui-kit/react-native/message-composer) | [MessageComposer](/ui-kit/react-native/message-composer) component allows users to compose and send various types of messages, including support for the Mentions feature to directly address participants within the conversation. | | [MessageList](/ui-kit/react-native/message-list) | [MessageList](/ui-kit/react-native/message-list) component displays a list of sent and received messages. It also supports rendering Mentions, enhancing the clarity and interactivity of conversations by highlighting direct references to users. | ## Rich Text Formatting Rich Text Formatting allows users to style their messages with bold, italic, underline, strikethrough, and inline code formatting. This brings richer expression to conversations and helps users emphasize key points, making communication clearer and more engaging.

| Components | Functionality | | ----------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | | [CompactMessageComposer](/ui-kit/react-native/compact-message-composer) | [CompactMessageComposer](/ui-kit/react-native/compact-message-composer) provides a built-in rich text editor with formatting toolbar and native text selection menu items for bold, italic, underline, strikethrough, and code formatting. | | [MessageList](/ui-kit/react-native/message-list) | [MessageList](/ui-kit/react-native/message-list) renders formatted messages with the appropriate styling applied, displaying bold, italic, underline, strikethrough, and code formatting as intended by the sender. | ## Quoted Reply The Quoted Reply feature enables users to quickly reply to specific messages by selecting the "Reply" option from a message's action menu. This enhances context, keeps conversations organized, and improves the overall chat experience in both 1-on-1 and group chats.

| Components | Functionality | | --------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | [Message List](/ui-kit/react-native/message-list) | [Message List](/ui-kit/react-native/message-list) supports replying to messages via the "Reply" option. Users can select "Reply" on a message to open the composer with the quoted reply pre-filled, maintaining context. | | [Message Composer](/ui-kit/react-native/message-composer) | [Message Composer](/ui-kit/react-native/message-composer) works seamlessly with Quoted Reply by showing the quoted message above the input field, letting users compose their response in proper context. | ## Conversation and Advanced Search Conversation and Advanced Search enables users to quickly find conversations, messages, and media across chats in real time. It supports filters, scopes, and custom actions, allowing users to locate content efficiently while keeping the chat experience smooth and intuitive.

| Components | Functionality | | ----------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | Search | Search allows users to search across conversations and messages in real time. Users can click on a result to open the conversation or jump directly to a specific message. | | [Message Header](/ui-kit/react-native/message-header) | [Message Header](/ui-kit/react-native/message-header) shows the search button in the chat header, allowing users to search within a conversation. | | [Message List](/ui-kit/react-native/message-list) | [Message List](/ui-kit/react-native/message-list) shows the selected message when clicked from search results and highlights it in the message list. | | [Conversations](/ui-kit/react-native/conversations) | [Conversations](/ui-kit/react-native/conversations) displays the search input. | ## Moderation CometChat's Message Moderation feature helps maintain a safe and respectful chat environment by automatically filtering and managing inappropriate content. Messages can be automatically blocked or flagged based on predefined rules, ensuring harmful content is handled before it reaches users.

Learn more about setting up moderation rules and managing content in the [Moderation](/moderation/overview) documentation. | Components | Functionality | | ------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | [Message List](/ui-kit/react-native/message-list) | [Message List](/ui-kit/react-native/message-list) automatically handles moderated messages, displaying blocked content appropriately based on your moderation settings. | After implementing moderation rules, users can report messages they find inappropriate or harmful. As a next step, you can enable the **[Report Message](#report-message)** feature to allow users to flag messages for review by moderators. ## Report Message The Report Message feature allows users to report inappropriate or harmful messages within the chat. Users can choose from predefined reasons and provide additional remarks for detailed context. This feature helps maintain a safe and respectful chat environment. Learn more about how flagged messages are handled, reviewed, and moderated in the [Flagged Messages](/moderation/flagged-messages) documentation.

| Components | Functionality | | ------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | | [Message List](/ui-kit/react-native/message-list) | [Message List](/ui-kit/react-native/message-list) provides the "Report Message" option in the message actions menu, allowing users to initiate the reporting process for inappropriate messages. | ## Threaded Conversations The Threaded Conversations feature enables users to respond directly to a specific message in a chat. This keeps conversations organized and enhances the user experience by maintaining context, especially in group chats.

| Components | Functionality | | ---------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | [Threaded Header](/ui-kit/react-native/threaded-messages-header) | [Threaded Header](/ui-kit/react-native/threaded-messages-header) component displays the original message along with all its replies, helping users follow the context of a threaded conversation. | | [MessageComposer](/ui-kit/react-native/message-composer) | [MessageComposer](/ui-kit/react-native/message-composer) component enables users to compose and send various types of messages. | | [MessageList](/ui-kit/react-native/message-list) | [MessageList](/ui-kit/react-native/message-list) component displays a chronological list of sent and received messages. It also supports Mentions, making conversations more interactive and easier to follow by highlighting direct references to users. | ## Group Chat CometChat facilitates Group Chats, allowing users to have conversations with multiple participants simultaneously. This feature is crucial for team collaborations, group discussions, social communities, and more.

For a comprehensive understanding and guide on implementing and using the Groups feature in CometChat, refer to the detailed guide on [Groups](/ui-kit/react-native/groups). *** ## Next Steps Explore voice and video calling capabilities Add stickers, polls, link previews, and more Browse all available UI Kit components Customize colors, fonts, and appearance