> ## 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.

# Message List

> Message List — CometChat documentation.

## Overview

`MessageList` is a [Composite Component](/ui-kit/react/v4/components-overview#composite-components) that displays a list of messages and effectively manages real-time operations. It includes various types of messages such as Text Messages, Media Messages, Stickers, and more.

`MessageList` is primarily a list of the base component [MessageBubble](/ui-kit/react/v4/message-bubble). The MessageBubble Component is utilized to create different types of chat bubbles depending on the message type.

<Frame>
  <img src="https://mintcdn.com/cometchat-22654f5b-docs-rn-guide-message-privately/Gp90C5sdVtuRR4t7/images/84b6122e-message_list_overview_web_screens-82682fa3bbde2a59aff34eeff5235c05.png?fit=max&auto=format&n=Gp90C5sdVtuRR4t7&q=85&s=8f54e72a4603a144c47e05fc6147c7c0" width="3600" height="2400" data-path="images/84b6122e-message_list_overview_web_screens-82682fa3bbde2a59aff34eeff5235c05.png" />
</Frame>

***

## Usage

### Integration

The following code snippet illustrates how you can directly incorporate the MessageList component into your Application.

<Tabs>
  <Tab title="MessageListDemo.tsx">
    ```typescript theme={null}
    import React from "react";
    import { CometChat } from "@cometchat/chat-sdk-javascript";
    import { CometChatMessageList } from "@cometchat/chat-uikit-react";

      export function MessageListDemo() {
        const [chatUser, setChatUser] = React.useState<CometChat.User>()
        React.useEffect(() => {
            CometChat.getUser("uid").then((user) => {
                setChatUser(user);
            })
        }, [])

        return chatUser ? (
          <div>
            <CometChatMessageList
              user={chatUser}
            />
          </div>
        ) : null;
      }
    ```
  </Tab>

  <Tab title="App.tsx">
    ```typescript theme={null}
    import { MessageListDemo } from "./MessageListDemo";

    export default function App() {
      return (
        <div className="App">
          <div>
            <MessageListDemo />
          </div>
        </div>
      );
    }
    ```
  </Tab>
</Tabs>

<Warning>
  To fetch messages for a specific entity, you need to supplement it with `User` or `Group` Object.
</Warning>

***

### Actions

[Actions](/ui-kit/react/v4/components-overview#actions) dictate how a component functions. They are divided into two types: Predefined and User-defined. You can override either type, allowing you to tailor the behavior of the component to fit your specific needs.

#### 1. onThreadRepliesClick

`onThreadRepliesClick` is triggered when you click on the threaded message bubble. The `onThreadRepliesClick` action doesn't have a predefined behavior. You can override this action using the following code snippet.

<Tabs>
  <Tab title="TypeScript">
    MessageListDemo.tsx

    ```typescript theme={null}
    import React from "react";
    import { CometChat } from "@cometchat/chat-sdk-javascript";
    import { CometChatMessageList } from "@cometchat/chat-uikit-react";

      export function MessageListDemo() {
        const [chatUser, setChatUser] = React.useState<CometChat.User>()
        React.useEffect(() => {
            CometChat.getUser("uid").then((user) => {
                setChatUser(user);
            })
        }, [])

        const getOnThreadRepliesClick = () => {
          //your custom actions
         }

        return chatUser ? (
          <div>
            <CometChatMessageList
              user={chatUser}
              onThreadRepliesClick={getOnThreadRepliesClick}
            />
          </div>
        ) : null;
      }
    ```
  </Tab>

  <Tab title="JavaScript">
    MessageListDemo.jsx

    ```javascript theme={null}

    import React, { useState, useEffect } from "react";
    import { CometChat } from "@cometchat/chat-sdk-javascript";
    import { CometChatMessageList } from "@cometchat/chat-uikit-react";

    export function MessageListDemo() {
      const [chatUser, setChatUser] = useState(null);

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

      const getOnThreadRepliesClick = () => {
        //your custom actions
      };

      return chatUser ? (
        <div>
          <CometChatMessageList
            user={chatUser}
            onThreadRepliesClick={getOnThreadRepliesClick}
          />
        </div>
      ) : null;
    }
    ```
  </Tab>
</Tabs>

#### 2. onError

This action doesn't change the behavior of the component but rather listens for any errors that occur in the MessageList component.

<Tabs>
  <Tab title="TypeScript">
    MessageListDemo.tsx

    ```typescript theme={null}

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

      export function MessageListDemo() {
        const [chatUser, setChatUser] = React.useState<CometChat.User>()
        React.useEffect(() => {
            CometChat.getUser("uid").then((user) => {
                setChatUser(user);
            })
        }, [])

       function handleError(error: CometChat.CometChatException) {
          throw new Error("your custom error action");
        }

        return chatUser ? (
          <div>
            <CometChatMessageList
              user={chatUser}
              onError={handleError}
            />
          </div>
        ) : null;
      }
    ```
  </Tab>

  <Tab title="JavaScript">
    MessageListDemo.jsx

    ```javascript theme={null}

    import React, { useState, useEffect } from "react";
    import { CometChat } from "@cometchat/chat-sdk-javascript";
    import { CometChatMessageList } from "@cometchat/chat-uikit-react";

    export function MessageListDemo() {
      const [chatUser, setChatUser] = useState(null);

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

      const handleError = (error) => {
        throw new Error("your custom error action");
      };

      return chatUser ? (
        <div>
          <CometChatMessageList
            user={chatUser}
            onError={handleError}
          />
        </div>
      ) : null;
    }
    ```
  </Tab>
</Tabs>

### Filters

You can adjust the `MessagesRequestBuilder` in the MessageList Component to customize your message list. Numerous options are available to alter the builder to meet your specific needs. For additional details on `MessagesRequestBuilder`, please visit [MessagesRequestBuilder](/sdk/javascript/message-filtering).

In the example below, we are applying a filter to the messages based on a search substring and for a specific user. This means that only messages that contain the search term and are associated with the specified user will be displayed

<Tabs>
  <Tab title="TypeScript">
    MessageListDemo.tsx

    ```typescript theme={null}

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

      export function MessageListDemo() {
        const [chatUser, setChatUser] = React.useState<CometChat.User>()
        React.useEffect(() => {
            CometChat.getUser("uid").then((user) => {
                setChatUser(user);
            })
        }, [])

        return chatUser ? (
          <div>
            <CometChatMessageList
              user={chatUser}
              messagesRequestBuilder={new CometChat.MessagesRequestBuilder().setLimit(5)}
            />
          </div>
        ) : null;
      }
    ```
  </Tab>

  <Tab title="JavaScript">
    MessageListDemo.jsx

    ```javascript theme={null}

    import React, { useState, useEffect } from "react";
    import { CometChat } from "@cometchat/chat-sdk-javascript";
    import { CometChatMessageList } from "@cometchat/chat-uikit-react";

    export function MessageListDemo() {
      const [chatUser, setChatUser] = useState(null);

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

      return chatUser ? (
        <div>
          <CometChatMessageList
            user={chatUser}
            messagesRequestBuilder={new CometChat.MessagesRequestBuilder().setLimit(5)}
          />
        </div>
      ) : null;
    }
    ```
  </Tab>
</Tabs>

<Note>
  The following parameters in messageRequestBuilder will always be altered inside the message list

  1. UID
  2. GUID
</Note>

### Events

[Events](/ui-kit/react/v4/components-overview#events) are emitted by a `Component`. By using event you can extend existing functionality. Being global events, they can be applied in Multiple Locations and are capable of being Added or Removed.

The list of events emitted by the Message List component is as follows.

| Event                   | Description                                                                                                                                     |
| ----------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------- |
| **ccOpenChat**          | this event alerts the listeners if the logged-in user has opened a user or a group chat                                                         |
| **ccMessageEdited**     | Triggers whenever a loggedIn user edits any message from the list of messages .it will have three states such as: inProgress, success and error |
| **ccMessageDeleted**    | Triggers whenever a loggedIn user deletes any message from the list of messages                                                                 |
| **ccActiveChatChanged** | This event is triggered when the user navigates to a particular chat window.                                                                    |
| **ccMessageRead**       | Triggers whenever a loggedIn user reads any message.                                                                                            |
| **ccLiveReaction**      | Triggers whenever a loggedIn clicks on live reaction                                                                                            |

Adding `CometChatMessageEvents` Listener's

<Tabs>
  <Tab title="TypeScript">
    ```typescript theme={null}
    mport {CometChatMessageEvents, CometChatUIEvents} from "@cometchat/chat-uikit-react";

    const ccOpenChat = CometChatUIEvents.ccOpenChat.subscribe(
    () => {
    // Your Code
    }
    );

    const ccMessageEdited = CometChatMessageEvents.ccMessageEdited.subscribe(
    () => {
    // Your Code
    }
    );

    const ccMessageDeleted = CometChatMessageEvents.ccMessageDeleted.subscribe(
    () => {
    // Your Code
    }
    );

    const ccActiveChatChanged = CometChatUIEvents.ccActiveChatChanged.subscribe(
    () => {
    // Your Code
    }
    );

    const ccMessageRead = CometChatMessageEvents.ccMessageRead.subscribe(
    () => {
    // Your Code
    }
    );

    const ccLiveReaction = CometChatMessageEvents.ccLiveReaction.subscribe(
    () => {
    // Your Code
    }
    );

    ```
  </Tab>

  <Tab title="JavaScript">
    ```javascript theme={null}
    import { CometChatMessageEvents, CometChatUIEvents } from "@cometchat/chat-uikit-react";

    const ccOpenChat = CometChatUIEvents.ccOpenChat.subscribe(() => {
      // Your Code
    });

    const ccMessageEdited = CometChatMessageEvents.ccMessageEdited.subscribe(() => {
      // Your Code
    });

    const ccMessageDeleted = CometChatMessageEvents.ccMessageDeleted.subscribe(
      () => {
        // Your Code
      }
    );

    const ccActiveChatChanged =
      CometChatUIEvents.ccActiveChatChanged.subscribe(() => {
        // Your Code
      });

    const ccMessageRead = CometChatMessageEvents.ccMessageRead.subscribe(() => {
      // Your Code
    });

    const ccLiveReaction = CometChatMessageEvents.ccLiveReaction.subscribe(() => {
      // Your Code
    });
    ```
  </Tab>
</Tabs>

***

Removing `CometChatMessageEvents` Listener's

<Tabs>
  <Tab title="TypeScript">
    ```typescript theme={null}
    ccMessageEdited?.unsubscribe();
    ccActiveChatChanged?.unsubscribe();
    ```
  </Tab>

  <Tab title="JavaScript">
    ```javascript theme={null}
    ccMessageEdited?.unsubscribe();
    ccActiveChatChanged?.unsubscribe();
    ```
  </Tab>
</Tabs>

***

## Customization

To fit your app's design requirements, you can customize the appearance of the Message List component. We provide exposed properties that allow you to modify the experience and behavior according to your specific needs.

### Style

Using Style you can customize the look and feel of the component in your app, These parameters typically control elements such as the color, size, shape, and fonts used within the component.

#### 1. MessageList Style

You can set the MessageListStyle to the MessageList Component Component to customize the styling.

<Tabs>
  <Tab title="TypeScript">
    MessageListDemo.tsx

    ```typescript theme={null}

    import React from "react";
    import { CometChat } from "@cometchat/chat-sdk-javascript";
    import { CometChatMessageList, MessageListStyle } from "@cometchat/chat-uikit-react";

      export function MessageListDemo() {
        const [chatUser, setChatUser] = React.useState<CometChat.User>()
        React.useEffect(() => {
            CometChat.getUser("uid").then((user) => {
                setChatUser(user);
            })
        }, [])

        const messageListStyle = new MessageListStyle({
          background:"transparent",
          border:"1px solid black",
          borderRadius:"20px",
          height:"100%",
          width:"100%",
          loadingIconTint:"red",
          nameTextColor:"pink",
          threadReplyTextColor:"green"
        });

        return chatUser ? (
          <div>
            <CometChatMessageList
              user={chatUser}
              messageListStyle={messageListStyle}
            />
          </div>
        ) : null;
      }
    ```
  </Tab>

  <Tab title="JavaScript">
    MessageListDemo.jsx

    ```javascript theme={null}

    import React, { useState, useEffect } from "react";
    import { CometChat } from "@cometchat/chat-sdk-javascript";
    import { CometChatMessageList, MessageListStyle } from "@cometchat/chat-uikit-react";

    export function MessageListDemo() {
      const [chatUser, setChatUser] = useState(null);

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

      const messageListStyle = new MessageListStyle({
        background: "transparent",
        border: "1px solid black",
        borderRadius: "20px",
        height: "100%",
        width: "100%",
        loadingIconTint: "red",
        nameTextColor: "pink",
        threadReplyTextColor: "green"
      });

      return chatUser ? (
        <div>
          <CometChatMessageList
            user={chatUser}
            messageListStyle={messageListStyle}
          />
        </div>
      ) : null;
    }
    ```
  </Tab>
</Tabs>

List of properties exposed by MessageListStyle

| Property                        | Description                                                      | Code                                    |
| ------------------------------- | ---------------------------------------------------------------- | --------------------------------------- |
| **border**                      | Used to set border                                               | `border?: string,`                      |
| **borderRadius**                | Used to set border radius                                        | `borderRadius?: string;`                |
| **background**                  | Used to set background colour                                    | `background?: string;`                  |
| **height**                      | Used to set height                                               | `height?: string;`                      |
| **width**                       | Used to set width                                                | `width?: string;`                       |
| **loadingIconTint**             | used to set loading icon tint                                    | `loadingIconTint?: string;`             |
| **emptyStateTextFont**          | used to set empty state text font                                | `emptyStateTextFont?: string;`          |
| **errorStateTextFont**          | used to set error state text font                                | `errorStateTextFont?: string;`          |
| **emptyStateTextColor**         | used to set empty state text color                               | `emptyStateTextColor?: string;`         |
| **errorStateTextColor**         | used to set error state text color                               | `errorStateTextColor?: string;`         |
| **nameTextColor**               | used to set sender/receiver name text color on a message bubble. | `nameTextColor?: string;`               |
| **nameTextFont**                | used to set sender/receiver name text font on a message bubble   | `nameTextFont?: string;`                |
| **TimestampTextColor**          | used to set time stamp text color                                | `TimestampTextColor?: string;`          |
| **TimestampTextFont**           | used to set time stamp text font                                 | `TimestampTextFont?: string;`           |
| **threadReplyTextColor**        | used to set thread reply text color                              | `threadReplyTextColor?: string;`        |
| **threadReplyTextFont**         | used to set thread reply text font                               | `threadReplyTextFont?: string;`         |
| **threadReplyIconTint**         | used to set thread reply icon tint                               | `threadReplyIconTint?: string;`         |
| **threadReplyUnreadTextColor**  | used to set thread reply unread text color                       | `threadReplyUnreadTextColor?: string;`  |
| **threadReplyUnreadTextFont**   | used to set thread reply unread text font                        | `threadReplyUnreadTextFont?: string;`   |
| **threadReplyUnreadBackground** | used to set thread reply unread background                       | `threadReplyUnreadBackground?: string;` |

#### 2. Avatar Style

To apply customized styles to the `Avatar` component in the `Message List` Component, you can use the following code snippet. For further insights on `Avatar` Styles [refer](/ui-kit/react/v4/avatar#avatar-style)

<Tabs>
  <Tab title="TypeScript">
    MessageListDemo.tsx

    ```typescript theme={null}
    import React from "react";
    import { CometChat } from "@cometchat/chat-sdk-javascript";
    import { CometChatMessageList, AvatarStyle } from "@cometchat/chat-uikit-react";

      export function MessageListDemo() {
        const [chatUser, setChatUser] = React.useState<CometChat.User>()
        React.useEffect(() => {
            CometChat.getUser("uid").then((user) => {
                setChatUser(user);
            })
        }, [])

      const avatarStyle = new AvatarStyle({
        backgroundColor:"#cdc2ff",
        border:"2px solid #6745ff",
        borderRadius:"10px",
        outerViewBorderColor:"#ca45ff",
        outerViewBorderRadius:"5px",
        nameTextColor:"#4554ff"
      })

        return chatUser ? (
          <div>
            <CometChatMessageList
              user={chatUser}
              avatarStyle={avatarStyle}
            />
          </div>
        ) : null;
      }
    ```
  </Tab>

  <Tab title="JavaScript">
    MessageListDemo.jsx

    ```javascript theme={null}

    import React, { useState, useEffect } from "react";
    import { CometChat } from "@cometchat/chat-sdk-javascript";
    import { CometChatMessageList, AvatarStyle } from "@cometchat/chat-uikit-react";

    export function MessageListDemo() {
      const [chatUser, setChatUser] = useState(null);

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

      const avatarStyle = new AvatarStyle({
        backgroundColor: "#cdc2ff",
        border: "2px solid #6745ff",
        borderRadius: "10px",
        outerViewBorderColor: "#ca45ff",
        outerViewBorderRadius: "5px",
        nameTextColor: "#4554ff"
      });

      return chatUser ? (
        <div>
          <CometChatMessageList
            user={chatUser}
            avatarStyle={avatarStyle}
          />
        </div>
      ) : null;
    }
    ```
  </Tab>
</Tabs>

#### 3. DateSeparator Style

To apply customized styles to the `DateSeparator` in the `Message list` Component, you can use the following code snippet.

<Tabs>
  <Tab title="TypeScript">
    MessageListDemo.tsx

    ```typescript theme={null}
    import React from "react";
    import { CometChat } from "@cometchat/chat-sdk-javascript";
    import { CometChatMessageList, DateStyle } from "@cometchat/chat-uikit-react";

      export function MessageListDemo() {
        const [chatUser, setChatUser] = React.useState<CometChat.User>()
        React.useEffect(() => {
            CometChat.getUser("uid").then((user) => {
                setChatUser(user);
            })
        }, [])

      const dateSeparatorStyle = new DateStyle({
        backgroundColor: "#cdc2ff",
        border: "2px solid #6745ff",
        borderRadius: "15px",
      });

        return chatUser ? (
          <div>
            <CometChatMessageList
              user={chatUser}
               dateSeparatorStyle={dateSeparatorStyle}
            />
          </div>
        ) : null;
      }
    ```
  </Tab>

  <Tab title="JavaScript">
    MessageListDemo.jsx

    ```javascript theme={null}

    import React, { useState, useEffect } from "react";
    import { CometChat } from "@cometchat/chat-sdk-javascript";
    import { CometChatMessageList, DateStyle } from "@cometchat/chat-uikit-react";

    export function MessageListDemo() {
      const [chatUser, setChatUser] = useState(null);

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

      const dateSeparatorStyle = new DateStyle({
        backgroundColor: "#cdc2ff",
        border: "2px solid #6745ff",
        borderRadius: "15px",
      });

      return chatUser ? (
        <div>
          <CometChatMessageList
            user={chatUser}
            dateSeparatorStyle={dateSeparatorStyle}
          />
        </div>
      ) : null;
    }
    ```
  </Tab>
</Tabs>

#### 4. EmojiKeyboard Style

To apply customized styles to the `EmojiKeyBoard` in the `Message list` Component, you can use the following code snippet.

<Tabs>
  <Tab title="TypeScript">
    MessageListDemo.tsx

    ```typescript theme={null}
    import React from "react";
    import { CometChat } from "@cometchat/chat-sdk-javascript";
    import { CometChatMessageList, EmojiKeyboardStyle } from "@cometchat/chat-uikit-react";

      export function MessageListDemo() {
        const [chatUser, setChatUser] = React.useState<CometChat.User>()
        React.useEffect(() => {
            CometChat.getUser("uid").then((user) => {
                setChatUser(user);
            })
        }, [])

      const emojiKeyboardStyle = new EmojiKeyboardStyle({
        background:'red',
        border:'2px solid green',
        borderRadius:'15px',
        activeIconTint:'yellow',
        textColor:'#8830f2'
      });

        return chatUser ? (
          <div>
            <CometChatMessageList
              user={chatUser}
              emojiKeyboardStyle={emojiKeyboardStyle}
            />
          </div>
        ) : null;
      }
    ```
  </Tab>

  <Tab title="JavaScript">
    MessageListDemo.jsx

    ```javascript theme={null}

    import React, { useState, useEffect } from "react";
    import { CometChat } from "@cometchat/chat-sdk-javascript";
    import { CometChatMessageList, EmojiKeyboardStyle } from "@cometchat/chat-uikit-react";

    export function MessageListDemo() {
      const [chatUser, setChatUser] = useState(null);

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

      const emojiKeyboardStyle = new EmojiKeyboardStyle({
        background:'red',
        border:'2px solid green',
        borderRadius:'15px',
        activeIconTint:'yellow',
        textColor:'#8830f2'
      });

      return chatUser ? (
        <div>
          <CometChatMessageList
            user={chatUser}
            emojiKeyboardStyle={emojiKeyboardStyle}
          />
        </div>
      ) : null;
    }
    ```
  </Tab>
</Tabs>

***

### Functionality

These are a set of small functional customizations that allow you to fine-tune the overall experience of the component. With these, you can change text, set custom icons, and toggle the visibility of UI elements.

<Tabs>
  <Tab title="TypeScript">
    MessageListDemo.tsx

    ```typescript theme={null}
    import React from "react";
    import { CometChat } from "@cometchat/chat-sdk-javascript";
    import { CometChatMessageList } from "@cometchat/chat-uikit-react";

      export function MessageListDemo() {
        const [chatUser, setChatUser] = React.useState<CometChat.User>()
        React.useEffect(() => {
            CometChat.getUser("uid").then((user) => {
                setChatUser(user);
            })
        }, [])

        return chatUser ? (
          <div>
            <CometChatMessageList
              user={chatUser}
              hideError={true}
              hideReceipt={true}
            />
          </div>
        ) : null;
      }
    ```
  </Tab>

  <Tab title="JavaScript">
    MessageListDemo.jsx

    ```javascript theme={null}

    import React, { useState, useEffect } from "react";
    import { CometChat } from "@cometchat/chat-sdk-javascript";
    import { CometChatMessageList } from "@cometchat/chat-uikit-react";

    export function MessageListDemo() {
      const [chatUser, setChatUser] = useState(null);

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

      return chatUser ? (
        <div>
          <CometChatMessageList
            user={chatUser}
            hideError={true}
            hideReceipt={true}
          />
        </div>
      ) : null;
    }
    ```
  </Tab>
</Tabs>

***

Below is a list of customizations along with corresponding code snippets

| Property                               | Description                                                                                                                                                                                                                                     | Code                                                      |
| -------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------------------------------------------------------- |
| **user** [report]()                    | Used to pass user object of which header specific details will be shown                                                                                                                                                                         | `user={chatUser}`                                         |
| **group** [report]()                   | Used to pass group object of which header specific details will be shown                                                                                                                                                                        | `group={chatGroup}`                                       |
| **alignment**                          | used to set the alignmet of messages in CometChatMessageList. It can be either **left** or **standard**                                                                                                                                         | `{MessageListAlignment.left}`                             |
| **emptyStateText**                     | used to set text which will be visible when no messages are available                                                                                                                                                                           | `emptyStateText="Your Custom Empty State text"`           |
| **errorStateText**                     | used to set text which will be visible when error in messages retrieval                                                                                                                                                                         | `errorStateText="Your Custom Error State text"`           |
| **hideError**                          | used to toggle visibility of error in MessageList                                                                                                                                                                                               | `hideError={true}`                                        |
| **disableSoundForMessages** [report]() | used to enable/disable sound for incoming/outgoing messages , default false                                                                                                                                                                     | `disableSoundForMessages={true}`                          |
| **customSoundForMessages** [report]()  | used to set custom sound for outgoing message                                                                                                                                                                                                   | `customSoundForMessages="your custom sound for messages"` |
| **readIcon**                           | used to set custom read icon visible at read receipt                                                                                                                                                                                            | `readIcon="your custom read icon"`                        |
| **deliveredIcon**                      | used to set custom delivered icon visible at read receipt                                                                                                                                                                                       | `deliveredIcon="your custom delivered icon"`              |
| **sentIcon**                           | used to set custom sent icon visible at read receipt                                                                                                                                                                                            | `sentIcon="your custom sent icon "`                       |
| **waitIcon**                           | used to set custom wait icon visible at read receipt                                                                                                                                                                                            | `waitIcon="your custom wait icon"`                        |
| **showAvatar**                         | used to toggle visibility for avatar                                                                                                                                                                                                            | `showAvatar={true}`                                       |
| **hideDateSeparator**                  | used to toggle visibility of date separator                                                                                                                                                                                                     | `hideDateSeparator={true}`                                |
| **timestampAlignment**                 | used to set receipt's time stamp alignment .It can be either **top** or **bottom**                                                                                                                                                              | `timestampAlignment={TimestampAlignment.top}`             |
| **newMessageIndicatorText** [report]() | used to set new message indicator text                                                                                                                                                                                                          | `newMessageIndicatorText="Custom Indicator text"`         |
| **scrollToBottomOnNewMessage**         | should scroll to bottom on new message? , by default false                                                                                                                                                                                      | `scrollToBottomOnNewMessages={true}`                      |
| **hideReceipt**                        | Used to control the visibility of read receipts without affecting the functionality of marking messages as read and delivered.                                                                                                                  | `hideReceipt={true}`                                      |
| **Disable Mentions**                   | Sets whether mentions in text should be disabled. Processes the text formatters If there are text formatters available and the disableMentions flag is set to true, it removes any formatters that are instances of CometChatMentionsFormatter. | `disableMentions={true}`                                  |
| **Disable Reactions**                  | Sets A boolean value indicating whether to disable reactions.Pass `true` to disable reactions, `false` to enable them.                                                                                                                          | `disableReactions={true}`                                 |

***

### Advance

For advanced-level customization, you can set custom views to the component. This lets you tailor each aspect of the component to fit your exact needs and application aesthetics. You can create and define your views, layouts, and UI elements and then incorporate those into the component.

#### Templates

[CometChatMessageTemplate](/ui-kit/react/v4/message-template) is a pre-defined structure for creating message views that can be used as a starting point or blueprint for creating message views often known as message bubbles. For more information, you can refer to [CometChatMessageTemplate](/ui-kit/react/v4/message-template).

You can set message Templates to MessageList by using the following code snippet

<Tabs>
  <Tab title="TypeScript">
    MessageListDemo.tsx

    ```typescript theme={null}
    import React from "react";
    import { CometChat } from "@cometchat/chat-sdk-javascript";
    import { CometChatMessageList, CometChatTheme, ChatConfigurator, CometChatActionsIcon } from "@cometchat/chat-uikit-react";

    export function MessageListDemo() {
      const [chatUser, setChatUser] = React.useState<CometChat.User>()
      React.useEffect(() => {
        CometChat.getUser("uid").then((user) => {
          setChatUser(user);
        })
      }, [])

      const getCustomOptions = (
        loggedInUser: CometChat.User,
        message: CometChat.BaseMessage,
        theme: CometChatTheme,
        group?: CometChat.Group
      ) => {
        const defaultOptions: any =
          ChatConfigurator.getDataSource().getMessageOptions(
            loggedInUser,
            message,
            theme,
            group
          );
        const myView: any = new CometChatActionsIcon({
          id: "custom id",
          title: "your custom title for options",
          iconURL: "your custom icon url for options",
          iconTint: "#7316f5",
          onClick: () => console.log("custom action"),
        });
        defaultOptions.push(myView);
        return defaultOptions;
      };

      const getTemplates = () => {
        let templates = ChatConfigurator.getDataSource().getAllMessageTemplates();
        templates.map((data) => {
          data.options = (
            loggedInUser: CometChat.User,
            message: CometChat.BaseMessage,
            theme: CometChatTheme,
            group?: CometChat.Group
          ) => getCustomOptions(loggedInUser, message, theme, group);
        });
        return templates;
      };

      return chatUser ? (
        <div>
          <CometChatMessageList
            user={chatUser}
            templates={getTemplates()}
          />
        </div>
      ) : null;
    }
    ```
  </Tab>

  <Tab title="JavaScript">
    MessageListDemo.jsx

    ```javascript theme={null}

    import React, { useState, useEffect } from "react";
    import { CometChat } from "@cometchat/chat-sdk-javascript";
    import {
      CometChatMessageList,
      ChatConfigurator,
      CometChatActionsIcon,
    } from "@cometchat/chat-uikit-react";

    export function MessageListDemo() {
      const [chatUser, setChatUser] = useState(null);

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

      const getCustomOptions = (loggedInUser, message, theme, group) => {
        const defaultOptions = ChatConfigurator.getDataSource().getMessageOptions(
          loggedInUser,
          message,
          theme,
          group
        );
        const myView = new CometChatActionsIcon({
          id: "custom id",
          title: "your custom title for options",
          iconURL: "your custom icon url for options",
          iconTint: "#7316f5",
          onClick: () => console.log("custom action"),
        });
        defaultOptions.push(myView);
        return defaultOptions;
      };

      const getTemplates = () => {
        let templates = ChatConfigurator.getDataSource().getAllMessageTemplates();
        templates.map((data) => {
          data.options = (loggedInUser, message, theme, group) =>
            getCustomOptions(loggedInUser, message, theme, group);
        });
        return templates;
      };

      return chatUser ? (
        <div>
          <CometChatMessageList user={chatUser} templates={getTemplates()} />
        </div>
      ) : null;
    }
    ```
  </Tab>
</Tabs>

#### DateSeparatorPattern

You can customize the date pattern of the message list separator using the `DateSeparatorPattern` prop. Choose from predefined options like time, DayDate, DayDateTime, or DateTime.

```javascript theme={null}
DateSeparatorPattern={DatePatterns.DateTime}
```

**Example**

**Default**

<Frame>
  <img src="https://mintcdn.com/cometchat-22654f5b-docs-rn-guide-message-privately/2SVOPiSpm0QEqRoz/images/ecdf73e0-message_list_dateseparator_default_web_screens-50dce04f63a4b15e5f7bbfaa300a46e2.png?fit=max&auto=format&n=2SVOPiSpm0QEqRoz&q=85&s=7e85755c959603e4cd74e92580d2e999" width="3600" height="2400" data-path="images/ecdf73e0-message_list_dateseparator_default_web_screens-50dce04f63a4b15e5f7bbfaa300a46e2.png" />
</Frame>

**Custom**

<Frame>
  <img src="https://mintcdn.com/cometchat-22654f5b-docs-rn-guide-message-privately/NN4EdpOU3viwWMb_/images/0be6d0bc-message_list_dateseparator_custom_web_screens-522eeefb4f2a268b76053b372e3a31dd.png?fit=max&auto=format&n=NN4EdpOU3viwWMb_&q=85&s=d41be5246ecea651d4ef97391756b565" width="3600" height="2400" data-path="images/0be6d0bc-message_list_dateseparator_custom_web_screens-522eeefb4f2a268b76053b372e3a31dd.png" />
</Frame>

<Tabs>
  <Tab title="TypeScript">
    MessageListDemo.tsx

    ```typescript theme={null}
    import React from "react";
    import { CometChat } from "@cometchat/chat-sdk-javascript";
    import { CometChatMessageList, DatePatterns } from "@cometchat/chat-uikit-react";

      export function MessageListDemo() {
        const [chatUser, setChatUser] = React.useState<CometChat.User>()
        React.useEffect(() => {
            CometChat.getUser("uid").then((user) => {
                setChatUser(user);
            })
        }, [])

        return chatUser ? (
          <div>
            <CometChatMessageList
              user={chatUser}
              DateSeparatorPattern={DatePatterns.DateTime}
            />
          </div>
        ) : null;
      }
    ```
  </Tab>

  <Tab title="JavaScript">
    MessageListDemo.jsx

    ```javascript theme={null}

    import React, { useState, useEffect } from "react";
    import { CometChat } from "@cometchat/chat-sdk-javascript";
    import { CometChatMessageList, DatePatterns } from "@cometchat/chat-uikit-react";

    export function MessageListDemo() {
      const [chatUser, setChatUser] = useState(null);

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

      return chatUser ? (
        <div>
          <CometChatMessageList
            user={chatUser}
            DateSeparatorPattern={DatePatterns.DateTime}
          />
        </div>
      ) : null;
    }
    ```
  </Tab>
</Tabs>

#### DatePattern

You can modify the date pattern to your requirement using **DatePattern**. Choose from predefined options like time, DayDate, DayDateTime, or DateTime.

DatePatterns describes a specific format or arrangement used to represent dates in a human-readable form.

| Name        | Description                                                                                                                                                                                                                                |
| ----------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
| time        | Date format displayed in the format hh:mm a                                                                                                                                                                                                |
| DayDate     | Date format displayed in the following format.<br />1) If timestamp \< 24hrs display “Today”<br />2) If timestamp \< 48hrs display “Yesterday”<br />3) If timestamp \< 7days display “EEE” i.e , SUNDAY<br />4) else display “d MMM, yyyy” |
| DayDateTime | Date format displayed in the following format.<br />1) If timestamp \< 24hrs display “hh:mm a”<br />2) If timestamp \< 48hrs display “Yesterday”<br />3) If timestamp \< 7days display “EEE” i.e SUNDAY<br />4) else display “dd MM yyyy”  |

```javascript theme={null}
datePattern={DatePatterns.DateTime}
```

<Tabs>
  <Tab title="TypeScript">
    MessageListDemo.tsx

    ```typescript theme={null}

    import React from "react";
    import { CometChat } from "@cometchat/chat-sdk-javascript";
    import { CometChatMessageList, DatePatterns } from "@cometchat/chat-uikit-react";

      export function MessageListDemo() {
        const [chatUser, setChatUser] = React.useState<CometChat.User>()
        React.useEffect(() => {
            CometChat.getUser("uid").then((user) => {
                setChatUser(user);
            })
        }, [])

        return chatUser ? (
          <div>
            <CometChatMessageList
              user={chatUser}
              datePattern={DatePatterns.DateTime}
            />
          </div>
        ) : null;
      }
    ```
  </Tab>

  <Tab title="JavaScript">
    MessageListDemo.jsx

    ```javascript theme={null}

    import React, { useState, useEffect } from "react";
    import { CometChat } from "@cometchat/chat-sdk-javascript";
    import { CometChatMessageList, DatePatterns } from "@cometchat/chat-uikit-react";

    export function MessageListDemo() {
      const [chatUser, setChatUser] = useState(null);

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

      return chatUser ? (
        <div>
          <CometChatMessageList
            user={chatUser}
            datePattern={DatePatterns.DateTime}
          />
        </div>
      ) : null;
    }
    ```
  </Tab>
</Tabs>

***

#### Headerview

You can set custom headerView to the Message List component using the following method.

```javascript theme={null}
headerView={getHeaderView()}
```

**Example**

<Frame>
  <img src="https://mintcdn.com/cometchat-22654f5b-docs-rn-guide-message-privately/PrOf0fpV33FkfOMB/images/12df05d3-message_list_headerview_web_screens-d9d482ab0f822f54872d750d5fc69a38.png?fit=max&auto=format&n=PrOf0fpV33FkfOMB&q=85&s=9daafb86ca3cfd76e673b2c6be309d68" width="3600" height="2400" data-path="images/12df05d3-message_list_headerview_web_screens-d9d482ab0f822f54872d750d5fc69a38.png" />
</Frame>

<Tabs>
  <Tab title="TypeScript">
    MessageListDemo.tsx

    ```typescript theme={null}

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

      export function MessageListDemo() {
        const [chatUser, setChatUser] = React.useState<CometChat.User>()
        React.useEffect(() => {
            CometChat.getUser("uid").then((user) => {
                setChatUser(user);
            })
        }, [])

      const getHeaderView = () => {
        return (
          <div style={{ height: '40px', width: '100px', background: '#a46efa', borderRadius: '20px', display: 'flex', justifyContent: 'center', alignItems: 'center', margin: '10px' }}>
            <button style={{ height: '40px', width: '40px', background: '#a46efa', border: 'none', display: 'flex', justifyContent: 'center', alignItems: 'center', cursor: "pointer" }}>
              <img src="img" style={{ height: 'auto', width: '100%', maxWidth: '100%', maxHeight: '100%', borderRadius: '50%' }} alt="bot" />
              <span>Chat Bot</span>
            </button>
          </div>
        )
      }

        return chatUser ? (
          <div>
            <CometChatMessageList
              user={chatUser}
              headerView={getHeaderView()}
            />
          </div>
        ) : null;
      }
    ```
  </Tab>

  <Tab title="JavaScript">
    MessageListDemo.jsx

    ```javascript theme={null}

    import React, { useState, useEffect } from "react";
    import { CometChat } from "@cometchat/chat-sdk-javascript";
    import { CometChatMessageList } from "@cometchat/chat-uikit-react";

    export function MessageListDemo() {
      const [chatUser, setChatUser] = useState(null);

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

      const getHeaderView = () => {
        return (
          <div style={{ height: '40px', width: '100px', background: '#a46efa', borderRadius: '20px', display: 'flex', justifyContent: 'center', alignItems: 'center', margin: '10px' }}>
            <button style={{ height: '40px', width: '40px', background: '#a46efa', border: 'none', display: 'flex', justifyContent: 'center', alignItems: 'center', cursor: "pointer" }}>
              <img src="img" style={{ height: 'auto', width: '100%', maxWidth: '100%', maxHeight: '100%', borderRadius: '50%' }} alt="bot" />
              <span>Chat Bot</span>
            </button>
          </div>
        )
      }

      return chatUser ? (
        <div>
          <CometChatMessageList
            user={chatUser}
            headerView={getHeaderView()}
          />
        </div>
      ) : null;
    }
    ```
  </Tab>
</Tabs>

***

#### FooterView

You can set custom footerview to the Message List component using the following method.

```javascript theme={null}
footerview={getFooterView()}
```

**Example**

<Frame>
  <img src="https://mintcdn.com/cometchat-22654f5b-docs-rn-guide-message-privately/XgQ9DxAoWn0btB5m/images/5a4ee787-message_list_footerview_web_screens-b1db166e35552534f56ca5f7deff0aed.png?fit=max&auto=format&n=XgQ9DxAoWn0btB5m&q=85&s=1925fc67c35677afe4c182b7aca2ba88" width="3600" height="2400" data-path="images/5a4ee787-message_list_footerview_web_screens-b1db166e35552534f56ca5f7deff0aed.png" />
</Frame>

<Tabs>
  <Tab title="TypeScript">
    MessageListDemo.tsx

    ```typescript theme={null}

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

      export function MessageListDemo() {
        const [chatUser, setChatUser] = React.useState<CometChat.User>()
        React.useEffect(() => {
            CometChat.getUser("uid").then((user) => {
                setChatUser(user);
            })
        }, [])

      const getFooterView = () => {
        return (
          <div style={{ height: '40px', width: '100px', background: '#a46efa', borderRadius: '20px', display: 'flex', justifyContent: 'center', alignItems: 'center', margin: '10px' }}>
            <button style={{ height: '40px', width: '40px', background: '#a46efa', border: 'none', display: 'flex', justifyContent: 'center', alignItems: 'center', cursor: "pointer" }}>
              <img src="img" style={{ height: 'auto', width: '100%', maxWidth: '100%', maxHeight: '100%', borderRadius: '50%' }} alt="bot" />
              <span>Chat Bot</span>
            </button>
          </div>
        )
      }

        return chatUser ? (
          <div>
            <CometChatMessageList
              user={chatUser}
              footerview={getFooterView()}
            />
          </div>
        ) : null;
      }
    ```
  </Tab>

  <Tab title="JavaScript">
    MessageListDemo.jsx

    ```javascript theme={null}

    import React, { useState, useEffect } from "react";
    import { CometChat } from "@cometchat/chat-sdk-javascript";
    import { CometChatMessageList } from "@cometchat/chat-uikit-react";

    export function MessageListDemo() {
      const [chatUser, setChatUser] = useState(null);

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

      const getFooterView = () => {
        return (
          <div style={{ height: '40px', width: '100px', background: '#a46efa', borderRadius: '20px', display: 'flex', justifyContent: 'center', alignItems: 'center', margin: '10px' }}>
            <button style={{ height: '40px', width: '40px', background: '#a46efa', border: 'none', display: 'flex', justifyContent: 'center', alignItems: 'center', cursor: "pointer" }}>
              <img src="img" style={{ height: 'auto', width: '100%', maxWidth: '100%', maxHeight: '100%', borderRadius: '50%' }} alt="bot" />
              <span>Chat Bot</span>
            </button>
          </div>
        )
      }

      return chatUser ? (
        <div>
          <CometChatMessageList
            user={chatUser}
            footerview={getFooterView()}
          />
        </div>
      ) : null;
    }
    ```
  </Tab>
</Tabs>

***

#### ErrorStateView

You can set a custom `errorStateView` to match the error view of your app.

```javascript theme={null}
 errorStateView={getErrorStateView()}
```

**Example**

**Default**

<Frame>
  <img src="https://mintcdn.com/cometchat-22654f5b-docs-rn-guide-message-privately/fxK75AS6FzDL1Oqo/images/b467b83b-message_list_error_state_view_default_web_screens-596863138ca369fad1a5de30df1e8875.png?fit=max&auto=format&n=fxK75AS6FzDL1Oqo&q=85&s=e561beaf59db70b29029b09d4bc997fe" width="3600" height="2400" data-path="images/b467b83b-message_list_error_state_view_default_web_screens-596863138ca369fad1a5de30df1e8875.png" />
</Frame>

**Custom**

<Frame>
  <img src="https://mintcdn.com/cometchat-22654f5b-docs-rn-guide-message-privately/JSRiWiPGBHsJZFCg/images/9f017892-message_list_error_state_view_custom_web_screens-5ed0628411f70405e63c493dd9276f0f.png?fit=max&auto=format&n=JSRiWiPGBHsJZFCg&q=85&s=74e78c82325de34254032684133a0fc7" width="3600" height="2400" data-path="images/9f017892-message_list_error_state_view_custom_web_screens-5ed0628411f70405e63c493dd9276f0f.png" />
</Frame>

<Tabs>
  <Tab title="TypeScript">
    MessageListDemo.tsx

    ```typescript theme={null}

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

      export function MessageListDemo() {
        const [chatUser, setChatUser] = React.useState<CometChat.User>()
        React.useEffect(() => {
            CometChat.getUser("uid").then((user) => {
                setChatUser(user);
            })
        }, [])
        const getErrorStateView = () => {
          return(
            <div style={{height:"100vh", width:"100vw"}}>
              <img src="custom image" alt="error icon" style=  {{height:"100px", width:"100px", marginTop:"250px", justifyContent:"center"}}></img>
            </div>
          );
        };

        return chatUser ? (
          <div>
            <CometChatMessageList
              user={chatUser}
              errorStateView={getErrorStateView()}
            />
          </div>
        ) : null;
      }
    ```
  </Tab>

  <Tab title="JavaScript">
    MessageListDemo.jsx

    ```javascript theme={null}

    import React, { useState, useEffect } from "react";
    import { CometChat } from "@cometchat/chat-sdk-javascript";
    import { CometChatMessageList } from "@cometchat/chat-uikit-react";

    export function MessageListDemo() {
      const [chatUser, setChatUser] = useState(null);

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

      const getErrorStateView = () => {
        return (
          <div style={{ height: "100vh", width: "100vw" }}>
            <img
              src="custom image"
              alt="error icon"
              style={{
                height: "100px",
                width: "100px",
                marginTop: "250px",
                justifyContent: "center",
              }}
            ></img>
          </div>
        );
      };

      return chatUser ? (
        <div>
          <CometChatMessageList
            user={chatUser}
            errorStateView={getErrorStateView()}
          />
        </div>
      ) : null;
    }
    ```
  </Tab>
</Tabs>

***

#### EmptyStateView

The `emptyStateView` method provides the ability to set a custom empty state view in your app. An empty state view is displayed when there are no messages for a particular user.

```javascript theme={null}
 emptyStateView={getEmptyStateView()}
```

**Example**

<Frame>
  <img src="https://mintcdn.com/cometchat-22654f5b-docs-rn-guide-message-privately/7emVxEQ5MCxvzC60/images/1e414d61-message_list_empty_state_view_custom_web_screens-2624ab04ba62d5d7d4bb968638b3f673.png?fit=max&auto=format&n=7emVxEQ5MCxvzC60&q=85&s=8cf0655e3cfc4a7a25c0db24b17d1e1c" width="3600" height="2400" data-path="images/1e414d61-message_list_empty_state_view_custom_web_screens-2624ab04ba62d5d7d4bb968638b3f673.png" />
</Frame>

<Tabs>
  <Tab title="TypeScript">
    MessageListDemo.tsx

    ```typescript theme={null}
    import React from "react";
    import { CometChat } from "@cometchat/chat-sdk-javascript";
    import { CometChatMessageList } from "@cometchat/chat-uikit-react";

      export function MessageListDemo() {
        const [chatUser, setChatUser] = React.useState<CometChat.User>()
        React.useEffect(() => {
            CometChat.getUser("uid").then((user) => {
                setChatUser(user);
            })
        }, [])
        const getEmptyStateView = () => {

        return(
          <div>
            Your Custom Empty State
          </div>
        );
      };

        return chatUser ? (
          <div>
            <CometChatMessageList
              user={chatUser}
              emptyStateView={getEmptyStateView()}
            />
          </div>
        ) : null;
      }
    ```
  </Tab>

  <Tab title="JavaScript">
    MessageListDemo.jsx

    ```javascript theme={null}

    import React, { useState, useEffect } from "react";
    import { CometChat } from "@cometchat/chat-sdk-javascript";
    import { CometChatMessageList } from "@cometchat/chat-uikit-react";

    export function MessageListDemo() {
      const [chatUser, setChatUser] = useState(null);

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

      const getEmptyStateView = () => {
        return (
          <div>
            Your Custom Empty State
          </div>
        );
      };

      return chatUser ? (
        <div>
          <CometChatMessageList
            user={chatUser}
            emptyStateView={getEmptyStateView()}
          />
        </div>
      ) : null;
    }
    ```
  </Tab>
</Tabs>

***

#### LoadingStateView

The `loadingStateView` property allows you to set a custom loading view in your app. This feature enables you to maintain a consistent look and feel throughout your application,

```javascript theme={null}
loadingStateView={getLoadingStateView()}
```

**Example**

**Default**

<Frame>
  <img src="https://mintcdn.com/cometchat-22654f5b-docs-rn-guide-message-privately/mq8rEbFfi0JjKmkM/images/6584da4a-message_list_loading_state_view_default_web_screens-7f0b5cb658a6b342d7ab2b3516584631.png?fit=max&auto=format&n=mq8rEbFfi0JjKmkM&q=85&s=14f907291d7509a4c354518b66fd0ed7" width="3600" height="2400" data-path="images/6584da4a-message_list_loading_state_view_default_web_screens-7f0b5cb658a6b342d7ab2b3516584631.png" />
</Frame>

**Custom**

<Frame>
  <img src="https://mintcdn.com/cometchat-22654f5b-docs-rn-guide-message-privately/OOBJyP9hM0C-rAe_/images/da4fcd99-message_list_loading_state_view_custom_web_screens-98a7487c664739e7d810f728a3564d06.png?fit=max&auto=format&n=OOBJyP9hM0C-rAe_&q=85&s=67e25449c95a44ff82ff39b31a3ed49c" width="3600" height="2400" data-path="images/da4fcd99-message_list_loading_state_view_custom_web_screens-98a7487c664739e7d810f728a3564d06.png" />
</Frame>

<Tabs>
  <Tab title="TypeScript">
    MessageListDemo.tsx

    ```typescript theme={null}

    import React from "react";
    import { CometChat } from "@cometchat/chat-sdk-javascript";
    import { CometChatMessageList, LoaderStyle } from "@cometchat/chat-uikit-react";

      export function MessageListDemo() {
        const [chatUser, setChatUser] = React.useState<CometChat.User>()
        React.useEffect(() => {
            CometChat.getUser("uid").then((user) => {
                setChatUser(user);
            })
        }, [])
      const getLoadingStateView = () => {
        const getLoaderStyle = new LoaderStyle({
          iconTint: "#890aff",
          background:"transparent",
          height: "100vh",
          width: "100vw",
          border: "none",
          borderRadius: "0",
        });
        return(
          <cometchat-loader
          iconURL="your custom icon url"
          loaderStyle={JSON.stringify(getLoaderStyle)}
          ></cometchat-loader>
        );
      };


        return chatUser ? (
          <div>
            <CometChatMessageList
              user={chatUser}
              loadingStateView={getLoadingStateView()}
            />
          </div>
        ) : null;
      }
    ```
  </Tab>

  <Tab title="JavaScript">
    MessageListDemo.jsx

    ```javascript theme={null}

    import React, { useState, useEffect } from "react";
    import { CometChat } from "@cometchat/chat-sdk-javascript";
    import { CometChatMessageList, LoaderStyle } from "@cometchat/chat-uikit-react";

    export function MessageListDemo() {
      const [chatUser, setChatUser] = useState(null);

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

      const getLoadingStateView = () => {
        const loaderStyle = new LoaderStyle({
          iconTint: "#890aff",
          background: "transparent",
          height: "100vh",
          width: "100vw",
          border: "none",
          borderRadius: "0",
        });

        return (
          <cometchat-loader
            iconURL="your custom icon url"
            loaderStyle={JSON.stringify(loaderStyle)}
          ></cometchat-loader>
        );
      };

      return chatUser ? (
        <div>
          <CometChatMessageList
            user={chatUser}
            loadingStateView={getLoadingStateView()}
          />
        </div>
      ) : null;
    }
    ```
  </Tab>
</Tabs>

***

#### TextFormatters

Assigns the list of text formatters. If the provided list is not null, it sets the list. Otherwise, it assigns the default text formatters retrieved from the data source. To configure the existing Mentions look and feel check out [CometChatMentionsFormatter](/ui-kit/react/v4/mentions-formatter-guide)

<Tabs>
  <Tab title="ShortCutFormatter.ts">
    ```typescript theme={null}
    import { CometChatTextFormatter } from "@cometchat/chat-uikit-react";
    import DialogHelper from "./Dialog";
    import { CometChat } from "@cometchat/chat-sdk-javascript";

    class ShortcutFormatter extends CometChatTextFormatter {
      private shortcuts: { [key: string]: string } = {};
      private dialogIsOpen: boolean = false;
      private dialogHelper = new DialogHelper();
      private currentShortcut: string | null = null; // Track the currently open shortcut

      constructor() {
        super();
        this.setTrackingCharacter("!");
        CometChat.callExtension("message-shortcuts", "GET", "v1/fetch", undefined)
          .then((data: any) => {
            if (data && data.shortcuts) {
              this.shortcuts = data.shortcuts;
            }
          })
          .catch((error) => console.log("error fetching shortcuts", error));
      }

      onKeyDown(event: KeyboardEvent) {
        const caretPosition =
          this.currentCaretPosition instanceof Selection
            ? this.currentCaretPosition.anchorOffset
            : 0;
        const textBeforeCaret = this.getTextBeforeCaret(caretPosition);

        const match = textBeforeCaret.match(/!([a-zA-Z]+)$/);
        if (match) {
          const shortcut = match[0];
          const replacement = this.shortcuts[shortcut];
          if (replacement) {
            // Close the currently open dialog, if any
            if (this.dialogIsOpen && this.currentShortcut !== shortcut) {
              this.closeDialog();
            }
            this.openDialog(replacement, shortcut);
          }
        }
      }

      getCaretPosition() {
        if (!this.currentCaretPosition?.rangeCount) return { x: 0, y: 0 };
        const range = this.currentCaretPosition?.getRangeAt(0);
        const rect = range.getBoundingClientRect();
        return {
          x: rect.left,
          y: rect.top,
        };
      }

      openDialog(buttonText: string, shortcut: string) {
        this.dialogHelper.createDialog(
          () => this.handleButtonClick(buttonText),
          buttonText
        );
        this.dialogIsOpen = true;
        this.currentShortcut = shortcut;
      }

      closeDialog() {
        this.dialogHelper.closeDialog(); // Use DialogHelper to close the dialog
        this.dialogIsOpen = false;
        this.currentShortcut = null;
      }

      handleButtonClick = (buttonText: string) => {
        if (this.currentCaretPosition && this.currentRange) {
          // Inserting the replacement text corresponding to the shortcut
          const shortcut = Object.keys(this.shortcuts).find(
            (key) => this.shortcuts[key] === buttonText
          );
          if (shortcut) {
            const replacement = this.shortcuts[shortcut];
            this.addAtCaretPosition(
              replacement,
              this.currentCaretPosition,
              this.currentRange
            );
          }
        }
        if (this.dialogIsOpen) {
          this.closeDialog();
        }
      };

      getFormattedText(text: string): string {
        return text;
      }

      private getTextBeforeCaret(caretPosition: number): string {
        if (
          this.currentRange &&
          this.currentRange.startContainer &&
          typeof this.currentRange.startContainer.textContent === "string"
        ) {
          const textContent = this.currentRange.startContainer.textContent;
          if (textContent.length >= caretPosition) {
            return textContent.substring(0, caretPosition);
          }
        }
        return "";
      }
    }

    export default ShortcutFormatter;
    ```
  </Tab>

  <Tab title="Dialog.tsx">
    ```typescript theme={null}
    import React from "react";
    import ReactDOM from "react-dom";

    interface DialogProps {
      onClick: () => void;
      buttonText: string;
    }

    const Dialog: React.FC<DialogProps> = ({ onClick, buttonText }) => {
      console.log("buttonText", buttonText);

      return (
        <div
          style={{
            position: "fixed",
            left: "300px",
            top: "664px",
            width: "800px",
            height: "45px",
          }}
        >
          <button
            style={{
              width: "800px",
              height: "100%",
              cursor: "pointer",
              backgroundColor: "#f2e6ff",
              border: "2px solid #9b42f5",
              borderRadius: "12px",
              textAlign: "left",
              paddingLeft: "20px",
              font: "600 15px sans-serif, Inter",
            }}
            onClick={onClick}
          >
            {buttonText}
          </button>
        </div>
      );
    };

    export default class DialogHelper {
      private dialogContainer: HTMLDivElement | null = null;

      createDialog(onClick: () => void, buttonText: string) {
        this.dialogContainer = document.createElement("div");
        document.body.appendChild(this.dialogContainer);

        ReactDOM.render(
          <Dialog onClick={onClick} buttonText={buttonText} />,
          this.dialogContainer
        );
      }

      closeDialog() {
        if (this.dialogContainer) {
          ReactDOM.unmountComponentAtNode(this.dialogContainer);
          this.dialogContainer.remove();
          this.dialogContainer = null;
        }
      }
    }
    ```
  </Tab>

  <Tab title="MessageListDemo.tsx">
    ```typescript theme={null}
    import React from "react";
    import { CometChat } from "@cometchat/chat-sdk-javascript";
    import { CometChatMessageList } from "@cometchat/chat-uikit-react";
    import ShortcutFormatter from "./ShortCutFormatter";

    export function MessageListDemo() {
      const [chatUser, setChatUser] = React.useState<CometChat.User>();
      React.useEffect(() => {
        CometChat.getUser("uid").then((user) => {
          setChatUser(user);
        });
      }, []);

      return chatUser ? (
        <div>
          <CometChatMessageList
            user={chatUser}
            textFormatters={[new ShortcutFormatter()]}
          />
        </div>
      ) : null;
    }
    ```
  </Tab>
</Tabs>

***

## Configuration

[Configurations](/ui-kit/react/v4/components-overview#configurations) offer the ability to customize the properties of each component within a Composite Component.

### MessageInformation

From the MessageList, you can navigate to the [MesssageInformation](/ui-kit/react/v4/message-information) component as shown in the image.

<Frame>
  <img src="https://mintcdn.com/cometchat-22654f5b-docs-rn-guide-message-privately/ugckbRl5Q-H7t8X2/images/e56d245b-message_list_message_information_option_web_screens-9da12131fd0f5fc7b7a07ec647c9c63b.png?fit=max&auto=format&n=ugckbRl5Q-H7t8X2&q=85&s=9bd110277f444564d8255de67bbee574" width="3600" height="2400" data-path="images/e56d245b-message_list_message_information_option_web_screens-9da12131fd0f5fc7b7a07ec647c9c63b.png" />
</Frame>

If you wish to modify the properties of the [MesssageInformation](/ui-kit/react/v4/message-information) Component, you can use the `MessageInformationConfiguration` object.

<Tabs>
  <Tab title="TypeScript">
    MessageListDemo.tsx

    ```typescript theme={null}
    import React from "react";
    import { CometChat } from "@cometchat/chat-sdk-javascript";
    import { CometChatMessageList, MessageInformationStyle } from "@cometchat/chat-uikit-react";

      export function MessageListDemo() {
        const [chatUser, setChatUser] = React.useState<CometChat.User>()
        React.useEffect(() => {
            CometChat.getUser("uid").then((user) => {
                setChatUser(user);
            })
        }, [])
      const messageInformationStyle = new MessageInformationStyle({
        background:"#f7f2fa",
        border:"2px solid #d895fc",
        borderRadius:"20px",
        captionTextColor:"#8629e3",
        titleTextColor:"#908deb",
      })

        return chatUser ? (
          <div>
            <CometChatMessageList
              user={chatUser}
              messageInformationConfiguration={new MessageInformationConfiguration({
              messageInformationStyle: messageInformationStyle
              })}
            />
          </div>
        ) : null;
      }
    ```
  </Tab>

  <Tab title="JavaScript">
    MessageListDemo.jsx

    ```javascript theme={null}
    import React, { useState, useEffect } from "react";
    import { CometChat } from "@cometchat/chat-sdk-javascript";
    import { CometChatMessageList, MessageInformationStyle, MessageInformationConfiguration } from "@cometchat/chat-uikit-react";

    export function MessageListDemo() {
      const [chatUser, setChatUser] = useState(null);

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

      const messageInformationStyle = new MessageInformationStyle({
        background: "#f7f2fa",
        border: "2px solid #d895fc",
        borderRadius: "20px",
        captionTextColor: "#8629e3",
        titleTextColor: "#908deb",
      });

      return chatUser ? (
        <div>
          <CometChatMessageList
            user={chatUser}
            messageInformationConfiguration={new MessageInformationConfiguration({
              messageInformationStyle: messageInformationStyle,
            })}
          />
        </div>
      ) : null;
    }
    ```
  </Tab>
</Tabs>

The `MessageInformationConfiguration` indeed provides access to all the [Action](/ui-kit/react/v4/message-information#actions), [Filters](/ui-kit/react/v4/message-information#filters), [Styles](/ui-kit/react/v4/message-information#style), [Functionality](/ui-kit/react/v4/message-information#functionality), and [Advanced](/ui-kit/react/v4/message-information#functionality) properties of the [MesssageInformation](/ui-kit/react/v4/message-information) component.

Please note that the properties marked with the [report]() symbol are not accessible within the Configuration Object.

**Example**

**Default**

<Frame>
  <img src="https://mintcdn.com/cometchat-22654f5b-docs-rn-guide-message-privately/3EDM5JvI4mnAULac/images/782c8c0a-message_list_message_information_default_web_screens-5133c3d9125f770a8c72638ecac292ae.png?fit=max&auto=format&n=3EDM5JvI4mnAULac&q=85&s=bed0334e23fb26d359ef3b9b708151a8" width="3600" height="2400" data-path="images/782c8c0a-message_list_message_information_default_web_screens-5133c3d9125f770a8c72638ecac292ae.png" />
</Frame>

**Custom**

<Frame>
  <img src="https://mintcdn.com/cometchat-22654f5b-docs-rn-guide-message-privately/G6Puyz_3Zlaowa9R/images/c80d19a0-message_list_message_information_custom_web_screens-7ed412e8fd064838333b54fa72d03388.png?fit=max&auto=format&n=G6Puyz_3Zlaowa9R&q=85&s=6b2c691eb6906531ae81c75775a2c0f5" width="3600" height="2400" data-path="images/c80d19a0-message_list_message_information_custom_web_screens-7ed412e8fd064838333b54fa72d03388.png" />
</Frame>

In the above example, we are styling a few properties of the [MesssageInformation](/ui-kit/react/v4/message-information) component using `MessageInformationConfiguration`.

### Reaction

If you wish to modify the properties of the [Reaction](/ui-kit/react/v4/reaction) Component, you can use the `reactionsConfiguration` object.

<Frame>
  <img src="https://mintcdn.com/cometchat-22654f5b-docs-rn-guide-message-privately/ugckbRl5Q-H7t8X2/images/e56d245b-message_list_message_information_option_web_screens-9da12131fd0f5fc7b7a07ec647c9c63b.png?fit=max&auto=format&n=ugckbRl5Q-H7t8X2&q=85&s=9bd110277f444564d8255de67bbee574" width="3600" height="2400" data-path="images/e56d245b-message_list_message_information_option_web_screens-9da12131fd0f5fc7b7a07ec647c9c63b.png" />
</Frame>

<Tabs>
  <Tab title="TypeScript">
    MessageListDemo.tsx

    ```typescript theme={null}
    import React from "react";
    import { CometChat } from "@cometchat/chat-sdk-javascript";
    import { CometChatMessageList, ReactionsStyle, ReactionsConfiguration } from "@cometchat/chat-uikit-react";

      export function MessageListDemo() {
        const [chatUser, setChatUser] = React.useState<CometChat.User>()
        React.useEffect(() => {
            CometChat.getUser("uid").then((user) => {
                setChatUser(user);
            })
        }, [])
      const reactionsStyle = new ReactionsStyle({
        border:'2px solid #8742f5',
        activeReactionBackground:'#b88cff',
        background:'#7b34ed',
        baseReactionBackground:'#ebe3ff',
        borderRadius:'20px'
      })

        return chatUser ? (
          <div>
            <CometChatMessageList
              user={chatUser}
              reactionsConfiguration={new ReactionsConfiguration({
              reactionsStyle: reactionsStyle
              //properties of reactions
            })}
            />
          </div>
        ) : null;
      }
    ```
  </Tab>

  <Tab title="JavaScript">
    MessageListDemo.jsx

    ```javascript theme={null}
    import React, { useState, useEffect } from "react";
    import { CometChat } from "@cometchat/chat-sdk-javascript";
    import { CometChatMessageList, ReactionsStyle, ReactionsConfiguration } from "@cometchat/chat-uikit-react";

    export function MessageListDemo() {
      const [chatUser, setChatUser] = useState(null);

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

      const reactionsStyle = new ReactionsStyle({
        border:'2px solid #8742f5',
        activeReactionBackground:'#b88cff',
        background:'#7b34ed',
        baseReactionBackground:'#ebe3ff',
        borderRadius:'20px'
      })

      return chatUser ? (
        <div>
          <CometChatMessageList
            user={chatUser}
            reactionsConfiguration={new ReactionsConfiguration({
              reactionsStyle: reactionsStyle
              //properties of reactions
            })}
          />
        </div>
      ) : null;
    }
    ```
  </Tab>
</Tabs>