Building A Conversation List + Message View

The Conversation List + Message View layout delivers a two-panel chat experience: pick a conversation in the list, then chat in a dedicated screen. On mobile, the list hides while a chat is open and returns with the back button.

---

User Interface Overview

1. Conversation List – shows users/groups with last message, presence, and typing indicators.
2. Message View – header + real-time message list.
3. Composer – send text, media, reactions, and replies.

Initialize and log in first via React Native Integration.

---

Step-by-Step Guide

Step 1: Render the conversation list

Handle selection to capture whether the item is a user or group.

<CometChatConversations
  onItemPress={(conversation: CometChat.Conversation) => {
    const isUser =
      conversation.getConversationType() ===
      CometChatUiKitConstants.ConversationTypeConstants.user;
    if (isUser) {
      setMessageUser(conversation.getConversationWith() as CometChat.User);
    } else {
      setMessageGroup(conversation.getConversationWith() as CometChat.Group);
    }
  }}
/>

Step 2: Build the message view

Compose Header + Message List + Composer and wire the back button to clear selection.

const Messages = ({
  user,
  group,
  onBack,
}: {
  user?: CometChat.User;
  group?: CometChat.Group;
  onBack: () => void;
}) => (
  <View style={styles.root}>
    <CometChatMessageHeader user={user} group={group} onBack={onBack} showBackButton />
    <CometChatMessageList user={user} group={group} />
    <CometChatMessageComposer user={user} group={group} />
  </View>
);

Step 3: Toggle list vs. chat

Hide the list when a chat is open; show it again when the header back button is tapped.

// src/ConversationMessage.tsx
import React, { useState } from "react";
import { View, StyleSheet, type ViewStyle } from "react-native";
import {
  CometChatConversations,
  CometChatMessageHeader,
  CometChatMessageList,
  CometChatMessageComposer,
  CometChatUiKitConstants,
} from "@cometchat/chat-uikit-react-native";
import { CometChat } from "@cometchat/chat-sdk-react-native";

const ConversationMessage: React.FC = () => {
  const [messageUser, setMessageUser] = useState<CometChat.User | undefined>();
  const [messageGroup, setMessageGroup] = useState<CometChat.Group | undefined>();

  const onBack = () => {
    setMessageUser(undefined);
    setMessageGroup(undefined);
  };

  const showList = !messageUser && !messageGroup;

  return (
    <>
      <CometChatConversations
        style={{ containerStyle: { display: showList ? "flex" : "none" } as ViewStyle }}
        onItemPress={(conversation: CometChat.Conversation) => {
          const isUser =
            conversation.getConversationType() === CometChatUiKitConstants.ConversationTypeConstants.user;
          if (isUser) {
            setMessageUser(conversation.getConversationWith() as CometChat.User);
          } else {
            setMessageGroup(conversation.getConversationWith() as CometChat.Group);
          }
        }}
      />

      {(messageUser || messageGroup) && (
        <View style={styles.root}>
          <CometChatMessageHeader user={messageUser} group={messageGroup} onBack={onBack} showBackButton />
          <CometChatMessageList user={messageUser} group={messageGroup} />
          <CometChatMessageComposer user={messageUser} group={messageGroup} />
        </View>
      )}
    </>
  );
};

const styles = StyleSheet.create({
  root: { flex: 1 },
});

export default ConversationMessage;

Mount ConversationMessage after login inside your navigator or root screen.

---

Run the app

npm run android
npm run ios

---

Tips

• Use showBackButton to return to the list on mobile.
• Swap the TrailingView prop on CometChatMessageHeader to add actions (info, block, call).
• Customize the list and message styling with the Theme APIs.