Message List

import { useState, useEffect } from "react";
import { View, StyleSheet } from "react-native";
import { GestureHandlerRootView } from "react-native-gesture-handler";
import { SafeAreaProvider } from "react-native-safe-area-context";
import {
  CometChatMessageHeader,
  CometChatMessageList,
  CometChatMessageComposer,
  CometChatThemeProvider,
} from "@cometchat/chat-uikit-react-native";
import { CometChat } from "@cometchat/chat-sdk-react-native";

function ChatView() {
  const [chatUser, setChatUser] = useState<CometChat.User>();

  useEffect(() => {
    CometChat.getUser("uid").then((user) => setChatUser(user));
  }, []);

  return chatUser ? (
    <GestureHandlerRootView style={{ flex: 1 }}>
      <SafeAreaProvider>
        <CometChatThemeProvider>
          <View style={styles.container}>
            <CometChatMessageHeader user={chatUser} />
            <CometChatMessageList user={chatUser} />
            <CometChatMessageComposer user={chatUser} />
          </View>
        </CometChatThemeProvider>
      </SafeAreaProvider>
    </GestureHandlerRootView>
  ) : null;
}

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

import { CometChatMessageList } from "@cometchat/chat-uikit-react-native";

function MessageListDemo() {
  return <CometChatMessageList user={chatUser} />;
}

export default MessageListDemo;

import { CometChatMessageList } from "@cometchat/chat-uikit-react-native";
import { CometChat } from "@cometchat/chat-sdk-react-native";

function FilteredMessageList() {
  return (
    <CometChatMessageList
      user={chatUser}
      messageRequestBuilder={
        new CometChat.MessagesRequestBuilder().setLimit(5)
      }
    />
  );
}

import { CometChatMessageList } from "@cometchat/chat-uikit-react-native";
import { CometChat } from "@cometchat/chat-sdk-react-native";

function MessageListWithThreads() {
  const handleThreadReplies = (
    msg: CometChat.BaseMessage,
    messageBubbleView: () => JSX.Element | null
  ) => {
    console.log("Thread replies pressed:", msg.getId());
  };

  return (
    <CometChatMessageList
      user={chatUser}
      onThreadRepliesPress={handleThreadReplies}
    />
  );
}

import { CometChatMessageList } from "@cometchat/chat-uikit-react-native";
import { CometChat } from "@cometchat/chat-sdk-react-native";

function MessageListWithErrorHandler() {
  return (
    <CometChatMessageList
      user={chatUser}
      onError={(error: CometChat.CometChatException) => {
        console.error("MessageList error:", error);
      }}
    />
  );
}

import { CometChatMessageList } from "@cometchat/chat-uikit-react-native";
import { CometChat } from "@cometchat/chat-sdk-react-native";

function MessageListWithReactions() {
  const handleReactionPress = (
    reaction: CometChat.ReactionCount,
    messageObject: CometChat.BaseMessage
  ) => {
    console.log("Reaction pressed:", reaction, messageObject.getId());
  };

  return (
    <CometChatMessageList
      user={chatUser}
      onReactionPress={handleReactionPress}
    />
  );
}

import { CometChatMessageList } from "@cometchat/chat-uikit-react-native";
import { CometChat } from "@cometchat/chat-sdk-react-native";

function MessageListWithLoadHandler() {
  const handleLoad = (messageList: CometChat.BaseMessage[]) => {
    console.log("Messages loaded:", messageList.length);
  };

  return <CometChatMessageList user={chatUser} onLoad={handleLoad} />;
}

import { useEffect } from "react";
import { CometChatUIEventHandler } from "@cometchat/chat-uikit-react-native";

function useMessageListEvents() {
  useEffect(() => {
    const uiListenerId = "UI_LISTENER_" + Date.now();
    const messageListenerId = "MESSAGE_LISTENER_" + Date.now();

    CometChatUIEventHandler.addUIListener(uiListenerId, {
      openChat: ({ user, group }) => {
        console.log("Chat opened:", user || group);
      },
    });

    CometChatUIEventHandler.addMessageListener(messageListenerId, {
      ccMessageEdited: ({ message }) => {
        console.log("Message edited:", message.getId());
      },
      ccMessageDeleted: ({ message }) => {
        console.log("Message deleted:", message.getId());
      },
    });

    return () => {
      CometChatUIEventHandler.removeUIListener(uiListenerId);
      CometChatUIEventHandler.removeMessageListener(messageListenerId);
    };
  }, []);
}

import { CometChatMessageList } from "@cometchat/chat-uikit-react-native";
import { CometChat } from "@cometchat/chat-sdk-react-native";
import { View, Text, TouchableOpacity } from "react-native";

function MessageListWithHeader() {
  const getHeaderView = ({
    user,
    group,
    id,
  }: {
    user?: CometChat.User;
    group?: CometChat.Group;
    id?: { uid?: string; guid?: string; parentMessageId?: string };
  }) => {
    return (
      <View style={{ flexDirection: "row", padding: 10, backgroundColor: "#edeafa", gap: 8 }}>
        <TouchableOpacity style={{ backgroundColor: "#fafafa", paddingHorizontal: 12, paddingVertical: 6, borderRadius: 16 }}>
          <Text style={{ color: "#6852D6" }}>Notes</Text>
        </TouchableOpacity>
        <TouchableOpacity style={{ backgroundColor: "#fafafa", paddingHorizontal: 12, paddingVertical: 6, borderRadius: 16 }}>
          <Text style={{ color: "#6852D6" }}>Pinned</Text>
        </TouchableOpacity>
      </View>
    );
  };

  return <CometChatMessageList user={chatUser} HeaderView={getHeaderView} />;
}

import { CometChatMessageList } from "@cometchat/chat-uikit-react-native";
import { CometChat } from "@cometchat/chat-sdk-react-native";
import { View, Text, TouchableOpacity } from "react-native";

function MessageListWithFooter() {
  const getFooterView = ({
    user,
    group,
    id,
  }: {
    user?: CometChat.User;
    group?: CometChat.Group;
    id?: { uid?: string; guid?: string; parentMessageId?: string };
  }) => {
    return (
      <View style={{ flexDirection: "row", padding: 10, backgroundColor: "#edeafa", gap: 8 }}>
        <TouchableOpacity style={{ backgroundColor: "#fafafa", paddingHorizontal: 12, paddingVertical: 6, borderRadius: 16 }}>
          <Text style={{ color: "#6852D6" }}>Ice Breakers</Text>
        </TouchableOpacity>
      </View>
    );
  };

  return <CometChatMessageList user={chatUser} FooterView={getFooterView} />;
}

import { CometChatMessageList, ChatConfigurator, CometChatMessageTemplate } from "@cometchat/chat-uikit-react-native";
import { CometChat } from "@cometchat/chat-sdk-react-native";
import { Text } from "react-native";

function MessageListCustomTemplates() {
  const getTemplates = () => {
    let templates: CometChatMessageTemplate[] = ChatConfigurator.getDataSource().getAllMessageTemplates(theme);
    templates.map((data) => {
      if (data.type === "text") {
        data.ContentView = (messageObject: CometChat.BaseMessage) => {
          const textMessage = messageObject as CometChat.TextMessage;
          return (
            <Text style={{ backgroundColor: "#fff5fd", padding: 10 }}>
              {textMessage.getText()}
            </Text>
          );
        };
      }
    });
    return templates;
  };

  return <CometChatMessageList user={chatUser} templates={getTemplates()} />;
}

import { CometChatMessageList } from "@cometchat/chat-uikit-react-native";

function MessageListCustomDateSeparator() {
  const customDateSeparatorPattern = (date: number) => {
    const timeStampInSeconds = new Date(date * 1000);
    const day = String(timeStampInSeconds.getUTCDate()).padStart(2, "0");
    const month = String(timeStampInSeconds.getUTCMonth() + 1).padStart(2, "0");
    const year = timeStampInSeconds.getUTCFullYear();
    return `${day}/${month}/${year}`;
  };

  return (
    <CometChatMessageList
      user={chatUser}
      dateSeperatorPattern={customDateSeparatorPattern}
    />
  );
}

import { CometChatMessageList } from "@cometchat/chat-uikit-react-native";
import { CometChat } from "@cometchat/chat-sdk-react-native";

function MessageListCustomDatePattern() {
  const generateDateString = (message: CometChat.BaseMessage) => {
    const days = ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat"];
    const timeStamp = message.getSentAt();
    if (timeStamp) {
      const date = new Date(timeStamp * 1000);
      const day = days[date.getUTCDay()];
      const hours = date.getUTCHours();
      const minutes = String(date.getUTCMinutes()).padStart(2, "0");
      return `${day}, ${hours}:${minutes}`;
    }
    return "---, --:--";
  };

  return (
    <CometChatMessageList
      user={chatUser}
      datePattern={generateDateString}
    />
  );
}

import {
  CometChatMessageList,
  CometChatTextFormatter,
  CometChatMentionsFormatter,
} from "@cometchat/chat-uikit-react-native";

function MessageListWithFormatters() {
  const getTextFormatters = () => {
    const textFormatters: CometChatTextFormatter[] = [];
    const mentionsFormatter = new CometChatMentionsFormatter();
    mentionsFormatter.setMentionsStyle({
      textStyle: { color: "#D6409F" },
      selfTextStyle: { color: "#30A46C" },
    });
    textFormatters.push(mentionsFormatter);
    return textFormatters;
  };

  return (
    <CometChatMessageList
      user={chatUser}
      textFormatters={getTextFormatters()}
    />
  );
}

import { CometChatMessageList } from "@cometchat/chat-uikit-react-native";

function ThreadedMessageList() {
  return (
    <CometChatMessageList
      user={chatUser}
      parentMessageId={parentMessage.getId()}
    />
  );
}

import { CometChatMessageList } from "@cometchat/chat-uikit-react-native";

function MinimalMessageList() {
  return (
    <CometChatMessageList
      user={chatUser}
      receiptsVisibility={false}
      avatarVisibility={false}
      hideTimestamp={true}
      hideGroupActionMessages={true}
    />
  );
}

import { CometChatMessageList } from "@cometchat/chat-uikit-react-native";

function LeftAlignedList() {
  return (
    <CometChatMessageList
      user={chatUser}
      alignment="leftAligned"
    />
  );
}

import { CometChatMessageList } from "@cometchat/chat-uikit-react-native";

function AIMessageList() {
  const suggestedMessages = [
    "How can I help you today?",
    "Tell me more about your issue.",
    "What would you like to achieve?",
  ];

  return (
    <CometChatMessageList
      user={chatUser}
      suggestedMessages={suggestedMessages}
      onSuggestedMessageClick={(suggestion) => console.log("Clicked:", suggestion)}
    />
  );
}

import { CometChatMessageList } from "@cometchat/chat-uikit-react-native";

function NavigateToMessage() {
  return (
    <CometChatMessageList
      user={chatUser}
      goToMessageId="message_id_123"
    />
  );
}

import { CometChatMessageList } from "@cometchat/chat-uikit-react-native";

function AgentChat() {
  return (
    <CometChatMessageList
      user={agentUser}
      loadLastAgentConversation={true}
    />
  );
}

import { CometChatMessageList } from "@cometchat/chat-uikit-react-native";

function StyledMessageList() {
  return (
    <CometChatMessageList
      user={chatUser}
      style={{
        containerStyle: {
          backgroundColor: "#FEEDE1",
        },
        outgoingMessageBubbleStyles: {
          containerStyle: {
            backgroundColor: "#F76808",
          },
        },
      }}
    />
  );
}