> ## Documentation Index
> Fetch the complete documentation index at: https://cometchat-22654f5b-feature-react-native-sdk-quotedmessage-a.mintlify.site/llms.txt
> Use this file to discover all available pages before exploring further.

# Message List

## Overview

`MessageList` is a [Composite Component](/ui-kit/react-native/components-overview#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-native/message-bubble-styling#message-bubbles). 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-feature-react-native-sdk-quotedmessage-a/494NzpIb6o8839I0/images/7c6476ad-message_list-f571abbea715b343416ff5ca1cbc8c9b.png?fit=max&auto=format&n=494NzpIb6o8839I0&q=85&s=888cef345699b15d86e4b5607ea42fe9" width="1280" height="800" data-path="images/7c6476ad-message_list-f571abbea715b343416ff5ca1cbc8c9b.png" />
</Frame>

## Usage

### Integration

The following code snippet illustrates how you can directly incorporate the `CometChatMessageList` component into your app.

<Tabs>
  <Tab title="App.tsx">
    ```tsx theme={null}
    import { CometChatMessageList } from "@cometchat/chat-uikit-react-native";
    //code
    return <CometChatMessageList group={group}/>;
    ```
  </Tab>
</Tabs>

<Warning>
  Simply adding the `CometChatMessageList` component to the layout will result in an error. To fetch messages, you need to supplement it with `user` or `group` prop.
</Warning>

***

### Actions

[Actions](/ui-kit/react-native/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. onThreadRepliesPress

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

<Tabs>
  <Tab title="App.tsx">
    ```tsx theme={null}
    import { CometChatMessageList } from "@cometchat/chat-uikit-react-native";
    import { CometChat } from "@cometchat/chat-sdk-react-native";
    //code
    const threadRepliesCallback = (
      msg: CometChat.BaseMessage,
      messageBubbleView: () => JSX.Element | null
    ) => {
      //handle thread
    };

    return (
      <CometChatMessageList
        group={group}
        onThreadRepliesPress={threadRepliesCallback}
      />
    );
    ```
  </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="App.tsx">
    ```tsx theme={null}
    import { CometChatMessageList } from "@cometchat/chat-uikit-react-native";
    import { CometChat } from "@cometchat/chat-sdk-react-native";
    //code
    const errorHandler = (e: CometChat.CometChatException) => {
      //handle error
    };

    return (
      <CometChatMessageList
        group={group}
        onError={errorHandler}
      />
    );
    ```
  </Tab>
</Tabs>

***

##### onReactionLongPress

Function triggered when a user long presses on a reaction pill, allowing developers to override the default behavior.

<Tabs>
  <Tab title="App.tsx">
    ```tsx theme={null}
    import { CometChatMessageList } from "@cometchat/chat-uikit-react-native";
    import { CometChat } from "@cometchat/chat-sdk-react-native";
    //code
    const onReactionLongPress = (
      reaction: CometChat.ReactionCount,
      messageObject: CometChat.BaseMessage
    ) => {};

    return (
      <CometChatMessageList
        group={group}
        onReactionLongPress={onReactionLongPress}
      />
    );
    ```
  </Tab>
</Tabs>

##### onAddReactionPress

Function triggered when a user clicks on the 'Add More Reactions' button, allowing developers to handle this action.

<Tabs>
  <Tab title="App.tsx">
    ```tsx theme={null}
    import { CometChatMessageList } from "@cometchat/chat-uikit-react-native";
    import { CometChat } from "@cometchat/chat-sdk-react-native";
    //code
    const onAddReactionPress = () => {};

    return (
      <CometChatMessageList
        group={group}
        onAddReactionPress={onAddReactionPress}
      />
    );
    ```
  </Tab>
</Tabs>

##### onReactionPress

Function triggered when a reaction is clicked, enabling developers to customize reaction interactions.

<Tabs>
  <Tab title="App.tsx">
    ```tsx theme={null}
    import { CometChatMessageList } from "@cometchat/chat-uikit-react-native";
    import { CometChat } from "@cometchat/chat-sdk-react-native";
    //code
    const onReactionPress = (
      reaction: CometChat.ReactionCount,
      messageObject: CometChat.BaseMessage
    ) => {};

    return (
      <CometChatMessageList
        group={group}
        onReactionPress={onReactionPress}
      />
    );
    ```
  </Tab>
</Tabs>

##### onReactionListItemPress

Function triggered when a reaction list item is clicked, allowing developers to override its behavior in CometChatReactionsList.

<Tabs>
  <Tab title="App.tsx">
    ```tsx theme={null}
    import { CometChatMessageList } from "@cometchat/chat-uikit-react-native";
    import { CometChat } from "@cometchat/chat-sdk-react-native";
    //code
    const onReactionListItemPress = (
      reaction: CometChat.Reaction,
      messageObject: CometChat.BaseMessage
    ) => {};

    return (
      <CometChatMessageList
        group={group}
        onReactionListItemPress={onReactionListItemPress}
      />
    );
    ```
  </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/react-native/additional-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="App.tsx">
    ```tsx theme={null}

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

    function App(): React.JSX.Element {
        const [chatUser, setChatUser] = React.useState<CometChat.User| undefined>();

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

        const messageRequestBuilder = new CometChat.MessagesRequestBuilder().setLimit(5);

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

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

  1. UID
  2. GUID
  3. types
  4. categories
</Note>

***

### Events

[Events](/ui-kit/react-native/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                                                                                                                       |
| ----------------------- | --------------------------------------------------------------------------------------------------------------------------------- |
| **openChat**            | 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 two states such as: inProgress & sent |
| **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.                                                                              |
| **ccMessageDelivered**  | Triggers whenever messages are marked as delivered for the loggedIn user                                                          |

Adding `CometChatMessageEvents` Listener's

<Tabs>
  <Tab title="JavaScript">
    ```js theme={null}
    import { CometChatUIEventHandler } from "@cometchat/chat-uikit-react-native";

    CometChatUIEventHandler.addUIListener("UI_LISTENER_ID", {
      openChat: ({ user, group }) => {
        //code
      },
    });

    CometChatUIEventHandler.addMessageListener("MESSAGE_LISTENER_ID", {
      ccMessageEdited: ({ message }) => {
        //code
      },
    });

    CometChatUIEventHandler.addMessageListener("MESSAGE_LISTENER_ID", {
      ccMessageDeleted: ({ message }) => {
        //code
      },
    });

    CometChatUIEventHandler.addMessageListener("MESSAGE_LISTENER_ID", {
      ccMessageDelivered: ({ message }) => {
        //code
      },
    });

    CometChatUIEventHandler.addMessageListener("MESSAGE_LISTENER_ID", {
      ccMessageRead: ({ message }) => {
        //code
      },
    });

    CometChatUIEventHandler.addMessageListener("MESSAGE_LISTENER_ID", {
      addMessageListener: ({ message, user, group, theme, parentMessageId }) => {
        //code
      },
    });
    ```
  </Tab>
</Tabs>

***

Removing Listeners

<Tabs>
  <Tab title="JavaScript">
    ```js theme={null}
    import { CometChatUIEventHandler } from "@cometchat/chat-uikit-react-native";

    CometChatUIEventHandler.removeUIListener("UI_LISTENER_ID");
    CometChatUIEventHandler.removeMessageListener("MESSAGE_LISTENER_ID");
    ```
  </Tab>
</Tabs>

***

## Customization

To fit your app's design requirements, you can customize the appearance of the conversation component. We provide exposed methods 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.

<Frame>
  <img src="https://mintcdn.com/cometchat-22654f5b-feature-react-native-sdk-quotedmessage-a/FOPcIvXNMzgmVa9j/images/03a08ce8-message_list_styling-ebbb6bea74da1c21078f037fb50d8bff.png?fit=max&auto=format&n=FOPcIvXNMzgmVa9j&q=85&s=115e7cad6575d64830b2a8bd426c9773" width="1280" height="800" data-path="images/03a08ce8-message_list_styling-ebbb6bea74da1c21078f037fb50d8bff.png" />
</Frame>

<Tabs>
  <Tab title="App.tsx">
    ```tsx theme={null}
    import { CometChatMessageList } from "@cometchat/chat-uikit-react-native";
    import { CometChat } from "@cometchat/chat-sdk-react-native";
    //code

    return (
      <CometChatMessageList
        group={group}
        style={{
          containerStyle: {
            backgroundColor: "#FEEDE1",
          },
          outgoingMessageBubbleStyles: {
            containerStyle: {
              backgroundColor: "#F76808",
            },
          },
        }}
      />
    );
    ```
  </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.

Below is a list of customizations along with corresponding code snippets

<Frame>
  <img src="https://mintcdn.com/cometchat-22654f5b-feature-react-native-sdk-quotedmessage-a/494NzpIb6o8839I0/images/7c6476ad-message_list-f571abbea715b343416ff5ca1cbc8c9b.png?fit=max&auto=format&n=494NzpIb6o8839I0&q=85&s=888cef345699b15d86e4b5607ea42fe9" width="1280" height="800" data-path="images/7c6476ad-message_list-f571abbea715b343416ff5ca1cbc8c9b.png" />
</Frame>

| Property                       | Description                                                                                                                                        | Code                                                      |
| ------------------------------ | -------------------------------------------------------------------------------------------------------------------------------------------------- | --------------------------------------------------------- |
| **user**                       | Used to pass user object of which header specific details will be shown                                                                            | `user={chatUser}`                                         |
| **group**                      | 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 **leftAligned** or **standard**. Type: **MessageListAlignmentType** | `alignment={"standard"}`                                  |
| **disableSoundForMessages**    | used to enable/disable sound for incoming/outgoing messages , default false                                                                        | `disableSoundForMessages={true}`                          |
| **customSoundForMessages**     | used to set custom sound for outgoing message                                                                                                      | `customSoundForMessages="your custom sound for messages"` |
| **avatarVisibility**           | used to toggle visibility for avatar                                                                                                               | `avatarVisibility={true}`                                 |
| **scrollToBottomOnNewMessage** | should scroll to bottom on new message? , by default false                                                                                         | `scrollToBottomOnNewMessages={true}`                      |
| **receiptsVisibility**         | Used to control the visibility of read receipts without affecting the functionality of marking messages as read and delivered.                     | `receiptsVisibility={true}`                               |
| **hideError**                  | used to toggle visibility of error state in MessageList                                                                                            | `hideError={true}`                                        |
| **quickReactionList**          | The list of quick reactions to be set.This list will replace the predefined set of reactions                                                       | `quickReactionList=["👻","😈","🙀","🤡","❤️"];`           |
| **hideReplyInThreadOption**    | used to toggle visibility of Reply in thread option in MessageList                                                                                 | `hideReplyInThreadOption={true}`                          |
| **hideShareMessageOption**     | used to toggle visibility of share message option in MessageList                                                                                   | `hideShareMessageOption={true}`                           |
| **hideEditMessageOption**      | used to toggle visibility of hide edit message option in MessageList                                                                               | `hideEditMessageOption={true}`                            |
| **hideTranslateMessageOption** | used to toggle visibility of translate message option in MessageList                                                                               | `hideTranslateMessageOption={true}`                       |
| **hideDeleteMessageOption**    | used to toggle visibility of Delete message option in MessageList                                                                                  | `hideDeleteMessageOption={true}`                          |
| **hideMessagePrivatelyOption** | used to toggle visibility of hide message privately option in MessageList                                                                          | `hideMessagePrivatelyOption={true}`                       |
| **hideCopyMessageOption**      | used to toggle visibility of hide copy message option in MessageList                                                                               | `hideCopyMessageOption={true}`                            |
| **hideMessageInfoOption**      | used to toggle visibility of hide message info option in MessageList                                                                               | `hideMessageInfoOption={true}`                            |
| **hideGroupActionMessages**    | used to toggle visibility of hide group action info option in MessageList                                                                          | `hideGroupActionMessages={true}`                          |
| **hideTimestamp**              | used to toggle visibility of hide timestamp in MessageList                                                                                         | `hideTimestamp={true}`                                    |

***

### 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-native/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-native/message-template).

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

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

    function App(): React.JSX.Element {
        const [chatUser, setChatUser] = React.useState<CometChat.User| undefined>();

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

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

        return (
         <>
             { chatUser && <CometChatMessageList
                  user={chatUser}
                  templates={getTemplates()}
               />
              }
         </>
       );
    }
    ```
  </Tab>
</Tabs>

#### DateSeperatorPattern

Specifies a custom format for displaying sticky date separators in the chat.

Use Cases:

* Customize date formats to match regional preferences.
* Use relative formats like "Yesterday" instead of full dates.
* Highlight weekend conversations with different styles.

<Tabs>
  <Tab title="App.tsx">
    ```tsx theme={null}
    import React from "react";
    import { CometChat } from '@cometchat/chat-sdk-react-native';
    import { CometChatMessageList, BorderStyleInterface, AvatarStyleInterface } from '@cometchat/chat-uikit-react-native';

    function App(): React.JSX.Element {
        const [chatUser, setChatUser] = React.useState<CometChat.User| undefined>();

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

        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'); // Months are 0-indexed
           const year = timeStampInSeconds.getUTCFullYear();

           const hours = String(timeStampInSeconds.getUTCHours()).padStart(2, '0');
           const minutes = String(timeStampInSeconds.getUTCMinutes()).padStart(2, '0');

           return `${day}/${month}/${year}, ${hours}:${minutes}`;
        }

        return (
         <>
             { chatUser && <CometChatMessageList
                  user={chatUser}
                  dateSeperatorPattern = {customDateSeparatorPattern}
               />
              }
         </>
       );
    }
    ```
  </Tab>
</Tabs>

***

#### DatePattern

Defines the format in which time appears for each message bubble.

Use Cases:

* Use 12-hour or 24-hour formats based on user preference.
* Display relative time ("Just now", "5 min ago").
* Add AM/PM indicators for clarity.

<Tabs>
  <Tab title="App.tsx">
    ```tsx theme={null}
    import React from "react";
    import { CometChat } from '@cometchat/chat-sdk-react-native';
    import { CometChatMessageList, BorderStyleInterface, AvatarStyleInterface } from '@cometchat/chat-uikit-react-native';

    function App(): React.JSX.Element {
        const [chatUser, setChatUser] = React.useState<CometChat.User| undefined>();

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

        const generateDateString = (message: CometChat.BaseMessage) : any => {
           const days = [
             'Sunday',
             'Monday',
             'Tuesday',
             'Wednesday',
             'Thursday',
             'Friday',
             'Saturday',
           ];
          const timeStamp = message['sentAt'];
          if(timeStamp) {
             const timeStampInSeconds = new Date(timeStamp * 1000);
             const day = days[timeStampInSeconds.getUTCDay()].substring(0, 3);
             const hours = timeStampInSeconds.getUTCHours();
             const minutes = String(timeStampInSeconds.getUTCMinutes()).padStart(2, '0');

             return `${day}, ${hours}:${minutes}`;
          }

          return `---, --:--`;
        };

        return (
         <>
             { chatUser && <CometChatMessageList
              user={chatUser}
              datePattern={generateDateString}
               />
              }
         </>
       );
    }
    ```
  </Tab>
</Tabs>

***

#### LoadingView

Customizes the loading indicator when messages are being fetched.

Use Cases:

* Show a spinner or skeleton loader for smooth UX.
* Display a "Fetching messages..." text.

<Tabs>
  <Tab title="App.tsx">
    ```tsx theme={null}
    import { CometChatMessageList } from "@cometchat/chat-uikit-react-native";
    import { CometChat } from "@cometchat/chat-sdk-react-native";
    //code

    const getLoadingView = (): JSX.Element => {
      //return jsx;
    };

    return (
      <CometChatMessageList
        group={group}
        LoadingView={getLoadingView}
      />
    );
    ```
  </Tab>
</Tabs>

***

#### EmptyView

Defines a custom view to be displayed when no messages are available.

Use Cases:

* Show a friendly message like "No messages yet. Start the conversation!".

<Tabs>
  <Tab title="App.tsx">
    ```tsx theme={null}
    import { CometChatMessageList } from "@cometchat/chat-uikit-react-native";
    import { CometChat } from "@cometchat/chat-sdk-react-native";
    //code

    const getEmptyView = (): JSX.Element => {
      //return jsx;
    };

    return (
      <CometChatMessageList
        group={group}
        EmptyView={getEmptyView}
      />
    );
    ```
  </Tab>
</Tabs>

***

#### ErrorView

Custom error state view displayed when fetching messages fails.

Use Cases:

* Show a retry button when an error occurs.
* Display a friendly message like "Couldn't load messages. Check your connection.

<Tabs>
  <Tab title="App.tsx">
    ```tsx theme={null}
    import { CometChatMessageList } from "@cometchat/chat-uikit-react-native";
    import { CometChat } from "@cometchat/chat-sdk-react-native";
    //code

    const getErrorView = (): JSX.Element => {
      //return jsx;
    };

    return (
      <CometChatMessageList
        group={group}
        ErrorView={getErrorView}
      />
    );
    ```
  </Tab>
</Tabs>

***

#### emptyChatGreetingView

Custom empty state view displayed in case of chats with AI Assistants.

Use Cases:

* Show an empty state view for chats with AI Assistants.
* Display a friendly message like "Hey, I am your AI Assistant".

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

    const getAIGreetingView = () => {
      return (
        <View style={{ padding: 20, alignItems: 'center' }}>
          <Text style={{ fontSize: 18, fontWeight: 'bold' }}>
            Hey, I am your AI Assistant
          </Text>
          <Text style={{ fontSize: 14, color: '#666', marginTop: 8 }}>
            How can I help you today?
          </Text>
        </View>
      );
    };

    return (
      <CometChatMessageList
        user={user}
        emptyChatGreetingView={getAIGreetingView()}
      />
    );
    ```
  </Tab>
</Tabs>

***

#### suggestedMessages

Sets the list of suggested messages for AI Assistant chats, allowing you to define which predefined queries or prompts are displayed to users.

Use Cases:

* Display a list of suggested messages for users to interact with the AI Assistant.
* Provide quick prompts or queries to help users start a conversation with the AI.

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

    const aiSuggestedMessages = [
      "How can I help you today?",
      "Tell me more about your issue.",
      "Can you provide more details?",
      "What would you like to achieve?"
    ];

    const handleSuggestedMessageClick = (suggestion: string) => {
      console.log('Suggested message clicked:', suggestion);
      // Handle the suggested message click
    };

    return (
      <CometChatMessageList
        user={user}
        suggestedMessages={aiSuggestedMessages}
        onSuggestedMessageClick={handleSuggestedMessageClick}
      />
    );
    ```
  </Tab>
</Tabs>

***

#### aiAssistantTools

Sets the available tools for the AI assistant by accepting a `CometChatAIAssistantTools` object that contains tool actions. This allows you to define and manage the tools that the AI assistant can utilize during interactions.

Use Cases:

* Dynamically update UI elements based on tool actions.
* Enable contextual actions based on user interactions with AI tools.

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

    const aiTools = new CometChatAIAssistantTools({
      getCurrentWeather: (args: any) => {
        console.log('Weather tool called with:', args);
        // Handle weather tool action
      },
      getLocationInfo: (args: any) => {
        console.log('Location tool called with:', args);
        // Handle location tool action
      },
      sendEmail: (args: any) => {
        console.log('Email tool called with:', args);
        // Handle email tool action
      }
    });

    return (
      <CometChatMessageList
        user={user}
        aiAssistantTools={aiTools}
      />
    );
    ```
  </Tab>
</Tabs>

***

#### streamingSpeed

Sets the streaming speed for AI Assistant responses in milliseconds, allowing you to control how quickly the AI's replies are displayed to the user.

Use Cases:

* Manipulate the speed of AI responses to enhance user experience.

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

    return (
      <CometChatMessageList
        user={user}
        streamingSpeed={100} // 100ms delay between each character
      />
    );
    ```
  </Tab>
</Tabs>

***

#### hideSuggestedMessages

Flag to hide suggested messages in AI agent empty view (only applies to @agentic users).

Use Cases:

* Hide suggested messages when you want to show a clean empty state.

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

    return (
      <CometChatMessageList
        user={user}
        hideSuggestedMessages={true}
      />
    );
    ```
  </Tab>
</Tabs>

***

#### emptyChatIntroMessageView

Custom AI agent intro message view (only applies to @agentic users).

Use Cases:

* Display a custom introduction message for AI assistants.

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

    const getAIIntroView = () => {
      return (
        <View style={{ padding: 16 }}>
          <Text style={{ fontSize: 16, textAlign: 'center' }}>
            Welcome! I'm here to assist you with any questions or tasks you might have.
          </Text>
        </View>
      );
    };

    return (
      <CometChatMessageList
        user={user}
        emptyChatIntroMessageView={getAIIntroView()}
      />
    );
    ```
  </Tab>
</Tabs>

***

#### emptyChatImageView

Custom AI agent image/avatar view (only applies to @agentic users).

Use Cases:

* Display a custom avatar or image for AI assistants.

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

    const getAIImageView = () => {
      return (
        <View style={{ alignItems: 'center', marginBottom: 16 }}>
          <Image 
            source={{ uri: 'https://example.com/ai-avatar.png' }}
            style={{ width: 80, height: 80, borderRadius: 40 }}
          />
        </View>
      );
    };

    return (
      <CometChatMessageList
        user={user}
        emptyChatImageView={getAIImageView()}
      />
    );
    ```
  </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 [MentionsFormatter Guide](/ui-kit/react-native/mentions-formatter-guide)

<Tabs>
  <Tab title="App.tsx">
    ```tsx theme={null}
    import { CometChatMessageList } from "@cometchat/chat-uikit-react-native";
    import { CometChat } from "@cometchat/chat-sdk-react-native";
    //code

    const getTextFomatters = () => {
      const textFormatters: CometChatTextFormatter[] = [];
      const customMentionsFormatter = new CustomMentionsFormatter();
      textFormatters.push(customMentionsFormatter);
      return textFormatters;
    };

    return (
      <CometChatMessageList
        group={group}
        textFormatters={getTextFomatters()}
      />
    );
    ```
  </Tab>

  <Tab title="CustomMentionsFormatter.ts">
    ```ts theme={null}
    import {
      CometChatMentionsFormatter,
      CometChatTheme,
      CometChatUIKit,
    } from "@cometchat/chat-uikit-react-native";

    /**
     * Represents the CometChatMentionsFormatter class.
     * This class extends the CometChatTextFormatter class and provides methods for handling mentions in text.
     * @extends CometChatTextFormatter
     */
    export class CustomMentionsFormatter extends CometChatMentionsFormatter {
      /**
       * Sets the mentions style.
       *
       * @param {CometChatTheme["mentionsStyle"]} mentionsStyle - The mentions style to be set.
       */
      setMentionsStyle(mentionsStyle: CometChatTheme["mentionsStyle"]) {
        if (mentionsStyle) {
          this.mentionsStyle = mentionsStyle;
          return;
        }
        if (!this.messageObject) {
          return;
        }
        const isMessageSentByLoggedInUser =
          this.messageObject.getSender().getUid() ===
          CometChatUIKit.loggedInUser!.getUid();
        if (isMessageSentByLoggedInUser) {
          this.mentionsStyle = {
            selfTextStyle: {
              color: "#30A46C",
            },
            textStyle: {
              color: "#FFFFFF",
            },
          };
        } else {
          this.mentionsStyle = {
            selfTextStyle: {
              color: "#30A46C",
            },
            textStyle: {
              color: "#D6409F",
            },
          };
        }
      }
    }
    ```
  </Tab>
</Tabs>

**Example**

<Frame>
  <img src="https://mintcdn.com/cometchat-22654f5b-feature-react-native-sdk-quotedmessage-a/bEkkKJAcvd9ivm_A/images/e2732868-mentions_message_bubble-fccf9cbdd63a54c2f734803e4480418a.png?fit=max&auto=format&n=bEkkKJAcvd9ivm_A&q=85&s=254a737eb956d69cfec671e2ca350c39" width="1280" height="800" data-path="images/e2732868-mentions_message_bubble-fccf9cbdd63a54c2f734803e4480418a.png" />
</Frame>

#### HeaderView

This method allows you to set a custom header view for the message list. By providing a View object, you can customize the appearance and content of the header displayed at the top of the message list.

Use Cases:

* Add a custom branding/logo to the chat.
* Display chat status ("John is typing...").
* Show last seen status.

<Tabs>
  <Tab title="App.tsx">
    ```tsx theme={null}
    import { CometChatMessageList } from "@cometchat/chat-uikit-react-native";
    import { CometChat } from "@cometchat/chat-sdk-react-native";
    //code

    const getMessageListHeaderView = ({
      user,
      group,
      id,
    }: {
      user?: CometChat.User;
      group?: CometChat.Group;
      id?: {
        uid?: string;
        guid?: string;
        parentMessageId?: string;
      };
    }) => {
      //return jsx;
    };

    return (
      <CometChatMessageList
        group={group}
        HeaderView={getMessageListHeaderView}
      />
    );
    ```
  </Tab>
</Tabs>

**Example**

<Frame>
  <img src="https://mintcdn.com/cometchat-22654f5b-feature-react-native-sdk-quotedmessage-a/cL0h7qQ6VW0ex7sa/images/ce4ca595-message_list_header_veiw-886f367b48234ddad6bdff6871a7d5fb.png?fit=max&auto=format&n=cL0h7qQ6VW0ex7sa&q=85&s=cb854522d9d626e6a2b90577180e7722" width="1280" height="800" data-path="images/ce4ca595-message_list_header_veiw-886f367b48234ddad6bdff6871a7d5fb.png" />
</Frame>

***

#### FooterView

This method allows you to set a custom footer view for the message list. By providing a View object, you can customize the appearance and content of the footer displayed at the bottom of the message list.

Use Cases:

* Add quick reply buttons.
* Display typing indicators ("John is typing...").
* Show a disclaimer or privacy notice.

<Tabs>
  <Tab title="App.tsx">
    ```tsx theme={null}
    import { CometChatMessageList } from "@cometchat/chat-uikit-react-native";
    import { CometChat } from "@cometchat/chat-sdk-react-native";
    //code

    const getMessageListFooterView = ({
      user,
      group,
      id,
    }: {
      user?: CometChat.User;
      group?: CometChat.Group;
      id?: {
        uid?: string;
        guid?: string;
        parentMessageId?: string;
      };
    }) => {
      //return jsx;
    };

    return (
      <CometChatMessageList
        group={group}
        FooterView={getMessageListFooterView}
      />
    );
    ```
  </Tab>
</Tabs>

**Example**

<Frame>
  <img src="https://mintcdn.com/cometchat-22654f5b-feature-react-native-sdk-quotedmessage-a/P03UjDxM6EbWn5rE/images/53d4119c-message_list_footer_view-7210ad9b52c7d141691091518bd6e4e3.png?fit=max&auto=format&n=P03UjDxM6EbWn5rE&q=85&s=80113909e6f496049ab29a83bb2bc625" width="1280" height="800" data-path="images/53d4119c-message_list_footer_view-7210ad9b52c7d141691091518bd6e4e3.png" />
</Frame>