> ## 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-native/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-native/v4/message-bubble). The MessageBubble Component is utilized to create different types of chat bubbles depending on the message type.

<Tabs>
  <Tab title="iOS">
    <img src="https://mintcdn.com/cometchat-22654f5b-docs-rn-guide-message-privately/2SVOPiSpm0QEqRoz/images/f05d52b9-message_list_overview_cometchat_screens-f22ba9dbb7f414c10f8ab774ebb27b88.png?fit=max&auto=format&n=2SVOPiSpm0QEqRoz&q=85&s=39998cab36fe35c0c2c491e5c07d28cb" alt="Image" width="4498" height="3120" data-path="images/f05d52b9-message_list_overview_cometchat_screens-f22ba9dbb7f414c10f8ab774ebb27b88.png" />
  </Tab>

  <Tab title="Android">
    <img src="https://mintcdn.com/cometchat-22654f5b-docs-rn-guide-message-privately/fxK75AS6FzDL1Oqo/images/b34dcca8-message_list_overview_cometchat_screens-3e40cf46a9411d5f637ac02cc2b19883.png?fit=max&auto=format&n=fxK75AS6FzDL1Oqo&q=85&s=2f012f491e82425ed37ac520431ee569" alt="Image" width="4498" height="3120" data-path="images/b34dcca8-message_list_overview_cometchat_screens-3e40cf46a9411d5f637ac02cc2b19883.png" />
  </Tab>
</Tabs>

***

## Usage

### Integration

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

<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);
        });
      }, []);

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

***

### Actions

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

`onThreadRepliesPress` is triggered when you click 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 { 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 onThreadRepliesPressHandler = (messageObject: CometChat.BaseMessage, messageBubbleView: () => JSX.Element) => {
         //code
       }

       return (
         <>
             { chatUser && <CometChatMessageList
                  user={chatUser}
                  onThreadRepliesPress={onThreadRepliesPressHandler}
               />
              }
         </>
       );
    }
    ```
  </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 { 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 onErrorHandler = (error: CometChat.CometChatException) => {
         //code
       }

       return (
         <>
             { chatUser && <CometChatMessageList
                  user={chatUser}
                  onError={onErrorHandler}
               />
              }
         </>
       );
    }
    ```
  </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>
  info

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

  1. UID
  2. GUID
</Note>

### Events

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

##### 1. MessageList Style

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

<Tabs>
  <Tab title="App.tsx">
    ```tsx theme={null}

    import { CometChat } from '@cometchat/chat-sdk-react-native';
    import { CometChatMessageList, MessageListStyleInterface, FontStyleInterface } 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 fontStyle: FontStyleInterface = {
          fontFamily: 'Arial',
          fontWeight: 'bold',
          fontSize: 15,
        }

        const messageListStyle : MessageListStyleInterface = {
          backgroundColor: "#fff5fd",
          nameTextColor: "#0532e8",
          nameTextFont: fontStyle
        }


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

List of properties exposed by MessageListStyle

| Property                  | Type                 | Description                                               |
| ------------------------- | -------------------- | --------------------------------------------------------- |
| height                    | number \| string     | Sets the height for message list                          |
| width                     | number \| string     | Sets the width colour for message list                    |
| backgroundColor           | string               | Sets the background colour for message list               |
| border                    | BorderStyleInterface | Sets the corner radius for message list                   |
| borderRadius              | number               | Sets the border radius for message list                   |
| nameTextColor             | string               | Sets sender/receiver name text color on a message bubble. |
| nameTextFont              | FontStyleInterface   | Sets sender/receiver name text font on a message bubble   |
| emptyStateTextColor       | string               | Sets the empty text colour for message list               |
| emptyStateTextFont        | FontStyleInterface   | Sets the empty text font for message list                 |
| errorStateTextColor       | string               | Sets the error text colour for message list               |
| errorStateTextFont        | FontStyleInterface   | Sets the error text font for message list                 |
| timestampTextFont         | FontStyleInterface   | Sets the timestamp text font for message list             |
| timestampTextColor        | string               | Sets the timestamp text colour for message list           |
| threadReplyTextColor      | string               | Sets the thread reply text colour for message list        |
| threadReplyTextFont       | FontStyleInterface   | Sets the thread reply text font for message list          |
| threadReplySeparatorColor | string               | Sets the thread reply saperator colour for message list   |
| threadReplyIconTint       | string               | Sets thread reply icon tint                               |
| loadingIconTint           | string               | Sets the loading icon tint for message list               |

##### 2. Avatar Style

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

<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 borderStyle : BorderStyleInterface =  {
           borderWidth: 1,
           borderStyle: 'solid',
           borderColor: 'red',
        }

        const avatarStyle : AvatarStyleInterface = {
          border: borderStyle
        }


        return (
         <>
             { chatUser && <CometChatMessageList
                  user={chatUser}
                  avatarStyle={avatarStyle}
               />
              }
         </>
       );
    }
    ```
  </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="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);
            })
        }, []);

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

***

Below is a list of customizations along with corresponding code snippets

| Property                                                              | Description                                                                                                                                                                                                                                     | Code                                                                                                                                         |
| --------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------- |
| **user** <Tooltip tip="Not available">🛑</Tooltip>                    | Used to pass user object of which header specific details will be shown                                                                                                                                                                         | `user={chatUser}`                                                                                                                            |
| **group** <Tooltip tip="Not available">🛑</Tooltip>                   | 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"}`                                                                                                                     |
| **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"`                                                                                              |
| **disableSoundForMessages** <Tooltip tip="Not available">🛑</Tooltip> | used to enable/disable sound for incoming/outgoing messages , default false                                                                                                                                                                     | `disableSoundForMessages={true}`                                                                                                             |
| **customSoundForMessages** <Tooltip tip="Not available">🛑</Tooltip>  | 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. Type: **ImageType**                                                                                                                                                                       | `readIcon={{uri: <image url>}}` OR `import customReadIcon from "./customReadIcon.svg"; ``readIcon={customReadIcon}`                          |
| **deliveredIcon**                                                     | used to set custom delivered icon visible at read receipt. Type: **ImageType**                                                                                                                                                                  | `deliveredIcon={{uri: <image url>}}` OR `import customDeliveredIcon from "./customDeliveredIcon.svg"; ``deliveredIcon={customDeliveredIcon}` |
| **sentIcon**                                                          | used to set custom sent icon visible at read receipt. Type: **ImageType**                                                                                                                                                                       | `sentIcon={{uri: <image url>}}` OR `import customSentIcon from "./customSentIcon.svg"; ``sentIcon={customSentIcon}`                          |
| **waitIcon**                                                          | used to set custom wait icon visible at read receipt. Type: **ImageType**                                                                                                                                                                       | `waitIcon={{uri: <image url>}}` OR `import customWaitIcon from "./customWaitIcon.svg"; ``waitIcon={customWaitIcon}`                          |
| **showAvatar**                                                        | used to toggle visibility for avatar                                                                                                                                                                                                            | `showAvatar={true}`                                                                                                                          |
| **hideActionSheetHeader**                                             | used to hides the header of the action sheet                                                                                                                                                                                                    | `hideActionSheetHeader={true}`                                                                                                               |
| **timestampAlignment**                                                | used to set receipt's time stamp alignment. It can be either **top** or **bottom**. Type: MessageTimeAlignmentType                                                                                                                              | `timestampAlignment={"top"}`                                                                                                                 |
| **newMessageIndicatorText** <Tooltip tip="Not available">🛑</Tooltip> | used to set new message indicator text                                                                                                                                                                                                          | `newMessageIndicatorText="Custom Indicator text"`                                                                                            |
| **scrollToBottomOnNewMessage**                                        | should scroll to bottom on new message? , by default false                                                                                                                                                                                      | `scrollToBottomOnNewMessages={true}`                                                                                                         |
| **disableMentions**                                                   | 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}`                                                                                                                     |
| **hideReceipt**                                                       | Used to control the visibility of read receipts without affecting the functionality of marking messages as read and delivered.                                                                                                                  | `hideReceipt={true}`                                                                                                                         |
| **disableReactions**                                                  | Used to disable Reactions                                                                                                                                                                                                                       | `disableReactions={true}`                                                                                                                    |

***

### Advanced

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/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-native/v4/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

You can customize the date pattern of the message list separator using the `DateSeparatorPattern` prop. Pass a custom function to use your own pattern.

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

**Example**

<Tabs>
  <Tab title="iOS">
    <img src="https://mintcdn.com/cometchat-22654f5b-docs-rn-guide-message-privately/Gp90C5sdVtuRR4t7/images/860e5d48-message_list_set_date_separator_pattern_cometchat_screens-aff569cc08dcab7f9593e0ece23d9bfa.png?fit=max&auto=format&n=Gp90C5sdVtuRR4t7&q=85&s=92a87d79cf0f8cbd47f91b5c6cb4f3fe" alt="Image" width="4498" height="3120" data-path="images/860e5d48-message_list_set_date_separator_pattern_cometchat_screens-aff569cc08dcab7f9593e0ece23d9bfa.png" />
  </Tab>

  <Tab title="Android">
    <img src="https://mintcdn.com/cometchat-22654f5b-docs-rn-guide-message-privately/TO10Bmu50bb5qPTI/images/2fe3bcff-message_list_set_date_separator_pattern_cometchat_screens-e3e4a45f37ba52ee89472f2d5f0b6518.png?fit=max&auto=format&n=TO10Bmu50bb5qPTI&q=85&s=95820390a6728ab4fa6fd6a2279e55c5" alt="Image" width="4498" height="3120" data-path="images/2fe3bcff-message_list_set_date_separator_pattern_cometchat_screens-e3e4a45f37ba52ee89472f2d5f0b6518.png" />
  </Tab>
</Tabs>

#### DatePattern

You can modify the date pattern to your requirement using the `datePattern` prop. Pass a custom function to use your own pattern.

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

***

#### HeaderView

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

<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';
    import { StyleProp } from 'react-native';
    import bot from './bot.png';

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

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

      const headerViewStyle: StyleProp<ViewStyle> = {
        flexDirection: 'row',
        alignItems: 'center',
        justifyContent: 'center',
        paddingVertical: 5,
        backgroundColor: 'white',
        height: 50,
        width: '120%',
        left:-25,
        borderBottomWidth:2,
        borderBottomColor:'#6851D6'
      };

      const getHeaderView = () => {
        return (
          <View style={headerViewStyle}>
            <Text style={{ color: "#6851D6", fontWeight: "bold", marginRight: 10 }}>
              Chat Bot
            </Text>
            <Image
              style={{ tintColor: "#6851D6", height: 30, width: 30 }}
              source={bot}
            />
          </View>
        );
      };

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

**Example**

<Tabs>
  <Tab title="iOS">
    <img src="https://mintcdn.com/cometchat-22654f5b-docs-rn-guide-message-privately/3EDM5JvI4mnAULac/images/7ca0f2bd-message_list_headerview_cometchat_screens-5fdc3799242b915a04218b333fa02ed1.png?fit=max&auto=format&n=3EDM5JvI4mnAULac&q=85&s=3e8b611504977659fd29c77d5fe88825" alt="Image" width="4498" height="3120" data-path="images/7ca0f2bd-message_list_headerview_cometchat_screens-5fdc3799242b915a04218b333fa02ed1.png" />
  </Tab>

  <Tab title="Android">
    <img src="https://mintcdn.com/cometchat-22654f5b-docs-rn-guide-message-privately/xIG5VBdyNJ5cYSqE/images/d3657a4a-message_list_headerview_cometchat_screens-372654ca1a3553cf0378b1f9b2b5292a.png?fit=max&auto=format&n=xIG5VBdyNJ5cYSqE&q=85&s=9bdc31a2c1c9f0adb3e49d4264c70a98" alt="Image" width="4408" height="3120" data-path="images/d3657a4a-message_list_headerview_cometchat_screens-372654ca1a3553cf0378b1f9b2b5292a.png" />
  </Tab>
</Tabs>

***

#### FooterView

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

<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';
    import { StyleProp } from 'react-native';
    import bot from './bot.png';

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

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

      const footerViewStyle: StyleProp<ViewStyle> = {
        flexDirection: 'row',
        alignItems: 'center',
        justifyContent: 'center',
        paddingVertical: 5,
        backgroundColor: 'white',
        height: 50,
        width: '120%',
        left:-25,
        borderBottomWidth:2,
        borderBottomColor:'#6851D6'
      };

      const getFooterView = () => {
        return (
          <View style={footerViewStyle}>
            <Text style={{ color: "#6851D6", fontWeight: "bold", marginRight: 10 }}>
              Chat Bot
            </Text>
            <Image
              style={{ tintColor: "#6851D6", height: 30, width: 30 }}
              source={bot}
            />
          </View>
        );
      };

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

**Example**

<Tabs>
  <Tab title="iOS">
    <img src="https://mintcdn.com/cometchat-22654f5b-docs-rn-guide-message-privately/PrOf0fpV33FkfOMB/images/1170d418-message_list_footerview_cometchat_screens-5d747ba1f0089ca9221b2142eabdbfde.png?fit=max&auto=format&n=PrOf0fpV33FkfOMB&q=85&s=2ca3a16dc7e66e6d97a4f1d8f8aadec0" alt="Image" width="4498" height="3120" data-path="images/1170d418-message_list_footerview_cometchat_screens-5d747ba1f0089ca9221b2142eabdbfde.png" />
  </Tab>

  <Tab title="Android">
    <img src="https://mintcdn.com/cometchat-22654f5b-docs-rn-guide-message-privately/_MYSdWhXnUkTkjEH/images/4b42681f-message_list_footerview_cometchat_screens-35dba192f96b48f76d8c637f027273b0.png?fit=max&auto=format&n=_MYSdWhXnUkTkjEH&q=85&s=36acf0dca2c1a15bebe728eec102a271" alt="Image" width="4408" height="3120" data-path="images/4b42681f-message_list_footerview_cometchat_screens-35dba192f96b48f76d8c637f027273b0.png" />
  </Tab>
</Tabs>

***

#### ErrorStateView

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

<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 errorViewStyle: StyleProp<ViewStyle> = {
           flex: 1,
           alignItems: 'center',
           justifyContent: 'center',
           padding: 10,
           borderColor: 'black',
           borderWidth: 1,
           backgroundColor: '#E8EAE9',
        };

        const getErrorStateView = () => {
          return (
            <View style={errorViewStyle}>
            <Text style={{fontSize: 80, color: "black"}}>Error</Text>
          </View>
          );
        };

        return (
         <>
             { chatUser && <CometChatMessageList
                user={chatUser}
                messageRequestBuilder={new CometChat.MessagesRequestBuilder().setLimit(1000)}
                ErrorStateView={getErrorStateView}
            />}
         </>
       );
      }
    ```
  </Tab>
</Tabs>

**Example**

<Tabs>
  <Tab title="iOS">
    <img src="https://mintcdn.com/cometchat-22654f5b-docs-rn-guide-message-privately/OOBJyP9hM0C-rAe_/images/de2c993e-message_list_set_error_state_cometchat_screens-0c86700d9d3c441a279143c96aa6e8e1.png?fit=max&auto=format&n=OOBJyP9hM0C-rAe_&q=85&s=c04c2fd3dc567eecb28831e80967ac34" alt="Image" width="4498" height="3120" data-path="images/de2c993e-message_list_set_error_state_cometchat_screens-0c86700d9d3c441a279143c96aa6e8e1.png" />
  </Tab>

  <Tab title="Android">
    <img src="https://mintcdn.com/cometchat-22654f5b-docs-rn-guide-message-privately/ugckbRl5Q-H7t8X2/images/e6806ab8-message_list_set_error_state_cometchat_screens-55aaed7bff7853801443f2b47c99b1ce.png?fit=max&auto=format&n=ugckbRl5Q-H7t8X2&q=85&s=9ba57cd7c3d9cadbe66acce4d2d16e92" alt="Image" width="4498" height="3120" data-path="images/e6806ab8-message_list_set_error_state_cometchat_screens-55aaed7bff7853801443f2b47c99b1ce.png" />
  </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.

<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 emptyViewStyle: StyleProp<ViewStyle> = {
           flex: 1,
           alignItems: 'center',
           justifyContent: 'center',
           padding: 10,
           borderColor: 'black',
           borderWidth: 1,
           backgroundColor: '#E8EAE9',
        };

        const getEmptyStateView = () => {
          return (
            <View style={emptyViewStyle}>
              <Text style={{fontSize: 80, color: "black"}}>Empty</Text>
            </View>
          );
        };

        return (
         <>
             { chatUser && <CometChatMessageList
                user={chatUser}
                messageRequestBuilder={new CometChat.MessagesRequestBuilder().setLimit(5)}
                EmptyStateView={getEmptyStateView}
            />}
         </>
       );
      }
    ```
  </Tab>
</Tabs>

**Example**

<Tabs>
  <Tab title="iOS">
    <img src="https://mintcdn.com/cometchat-22654f5b-docs-rn-guide-message-privately/Xgdtn9VZPDi47bm-/images/22932047-message_list_set_empty_state_cometchat_screens-77450520361ffa98eaddf3f5356e9f75.png?fit=max&auto=format&n=Xgdtn9VZPDi47bm-&q=85&s=c06fd368b3c79f338e21cbba4903edb1" alt="Image" width="4498" height="3120" data-path="images/22932047-message_list_set_empty_state_cometchat_screens-77450520361ffa98eaddf3f5356e9f75.png" />
  </Tab>

  <Tab title="Android">
    <img src="https://mintcdn.com/cometchat-22654f5b-docs-rn-guide-message-privately/21UBnagXOw-XG0Sv/images/acfe1c82-message_list_set_empty_state_cometchat_screens-3e79a0837d60a4515d311777297d0f44.png?fit=max&auto=format&n=21UBnagXOw-XG0Sv&q=85&s=c78dc1202bc550ab143d63178c3424ef" alt="Image" width="4498" height="3120" data-path="images/acfe1c82-message_list_set_empty_state_cometchat_screens-3e79a0837d60a4515d311777297d0f44.png" />
  </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-native/v4/mentions-formatter-guide)

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

    export class ShortCutFormatter extends CometChatTextFormatter {
      constructor() {
        super();
        this.trackCharacter = "!";
      }

      search = (searchKey: string) => {
        let data: Array<SuggestionItem> = [];

        CometChat.callExtension("message-shortcuts", "GET", "v1/fetch", undefined)
          .then((data: any) => {
            if (data && data?.shortcuts) {
              let suggestionData = Object.keys(data.shortcuts).map((key) => {
                return new SuggestionItem({
                  id: key,
                  name: data.shortcuts[key],
                  promptText: data.shortcuts[key],
                  trackingCharacter: "!",
                  underlyingText: data.shortcuts[key],
                });
              });
              this.setSearchData(suggestionData); // setting data in setSearchData();
            }
          })
          .catch((error) => {
            // Some error occured
          });

        this.setSearchData(data);
      };

      // return null in fetchNext, if there's no pagination.
      fetchNext = () => {
        return null;
      };
    }
    ```
  </Tab>

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

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

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

      const shortcutFormatter = new ShortCutFormatter();

      return <CometChatMessageList textFormatters={[new ShortcutFormatter()]} />;
    }
    ```
  </Tab>
</Tabs>

***

## Configuration

[Configurations](/ui-kit/react-native/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-native/v4/message-information) component as shown in the image.

<Tabs>
  <Tab title="iOS">
    <img src="https://mintcdn.com/cometchat-22654f5b-docs-rn-guide-message-privately/XgQ9DxAoWn0btB5m/images/5f2581aa-message_list_to_message_info_cometchat_screens-aec0bd42d39b1be3849462d2392be574.png?fit=max&auto=format&n=XgQ9DxAoWn0btB5m&q=85&s=83ad79edc990c3e1e6df1d7b0a790b4a" alt="Image" width="4498" height="3120" data-path="images/5f2581aa-message_list_to_message_info_cometchat_screens-aec0bd42d39b1be3849462d2392be574.png" />
  </Tab>

  <Tab title="Android">
    <img src="https://mintcdn.com/cometchat-22654f5b-docs-rn-guide-message-privately/xIG5VBdyNJ5cYSqE/images/d0b80a68-message_list_to_message_info_cometchat_screens-5a57476b93cfa7a0f82c55b53e7a8c86.png?fit=max&auto=format&n=xIG5VBdyNJ5cYSqE&q=85&s=9127346e51f159888131799ab478f03f" alt="Image" width="4498" height="3120" data-path="images/d0b80a68-message_list_to_message_info_cometchat_screens-5a57476b93cfa7a0f82c55b53e7a8c86.png" />
  </Tab>
</Tabs>

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

<Tabs>
  <Tab title="App.tsx">
    ```tsx theme={null}
    import React from "react";
    import { CometChat } from '@cometchat/chat-sdk-react-native';
    import { CometChatMessageList, MessageInformationStyleInterface, MessageInformationConfigurationInterface } 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 messageInformationStyle : MessageInformationStyleInterface = {
        titleTextColor: "#6851D6",
        subtitleTextColor: "red",
      }

      const messageInformationConfiguration : MessageInformationConfigurationInterface = {
        messageInformationStyle: messageInformationStyle
      }
        return (
         <>
             { chatUser && <CometChatMessageList
                user={chatUser}
                messageInformationConfiguration={messageInformationConfiguration}
            />}
         </>
       );
      }
    ```
  </Tab>
</Tabs>

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

Please note that the 🛑 symbol are not accessible within the Configuration Object.

**Example**

<Tabs>
  <Tab title="iOS">
    <img src="https://mintcdn.com/cometchat-22654f5b-docs-rn-guide-message-privately/FGBCGWXGo5d9bVxR/images/c54f5375-message_list_message_info_configuration_cometchat_screens-7f574962449767d5d10d87188589ad19.png?fit=max&auto=format&n=FGBCGWXGo5d9bVxR&q=85&s=7c1e61e2306dc8efaa3ea172410342eb" alt="Image" width="4498" height="3120" data-path="images/c54f5375-message_list_message_info_configuration_cometchat_screens-7f574962449767d5d10d87188589ad19.png" />
  </Tab>

  <Tab title="Android">
    <img src="https://mintcdn.com/cometchat-22654f5b-docs-rn-guide-message-privately/JSRiWiPGBHsJZFCg/images/9d899c4b-message_list_message_info_configuration_cometchat_screens-670e08910544fa4776ff127efa358158.png?fit=max&auto=format&n=JSRiWiPGBHsJZFCg&q=85&s=a82aae586a15130240eabb2a5bc597d6" alt="Image" width="4498" height="3120" data-path="images/9d899c4b-message_list_message_info_configuration_cometchat_screens-670e08910544fa4776ff127efa358158.png" />
  </Tab>
</Tabs>

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

### QuickReactions

From the MessageList, you can navigate to the [QuickReactions](/ui-kit/react-native/v4/quick-reactions) component as shown in the image.

If you wish to modify the properties of the [QuickReactions](/ui-kit/react-native/v4/quick-reactions) Component, you can use the [QuickReactionConfiguration](/ui-kit/react-native/v4/quick-reactions#functionality) object.