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

# Threaded Messages

> Threaded Messages — CometChat documentation.

## Overview

ThreadedMessages is a [Composite Component](/ui-kit/react-native/v4/components-overview#composite-components) that displays all replies made to a particular message in a conversation. By default, the parent message will be displayed at the top, the message composer will be at the bottom and between them a message list will contain all replies.

<Tabs>
  <Tab title="iOS">
    <img src="https://mintcdn.com/cometchat-22654f5b-docs-rn-guide-message-privately/ubfBSdV1t6rmjxeA/images/890bdc7f-threaded_message_overview_cometchat_screens-b30f1b30b61e6a2f2de60937b023c058.png?fit=max&auto=format&n=ubfBSdV1t6rmjxeA&q=85&s=ad54f9ceabc40f80674be0d2f7673704" alt="Image" width="4498" height="3120" data-path="images/890bdc7f-threaded_message_overview_cometchat_screens-b30f1b30b61e6a2f2de60937b023c058.png" />
  </Tab>

  <Tab title="Android">
    <img src="https://mintcdn.com/cometchat-22654f5b-docs-rn-guide-message-privately/le8ibYc8lBJsShSE/images/565a6996-threaded_message_overview_cometchat_screens-7d9db871828f1cac0d29a153af4f7d10.png?fit=max&auto=format&n=le8ibYc8lBJsShSE&q=85&s=17bf539018ee53a0f0bb7494b0e3d895" alt="Image" width="4498" height="3120" data-path="images/565a6996-threaded_message_overview_cometchat_screens-7d9db871828f1cac0d29a153af4f7d10.png" />
  </Tab>
</Tabs>

ThreadedMessages is composed of the following components:

| Component                                                   | Description                                                                                                        |
| ----------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------ |
| [MessageList](/ui-kit/react-native/v4/message-list)         | CometChatMessageList is a component that displays a list of Messages                                               |
| [MessageComposer](/ui-kit/react-native/v4/message-composer) | CometChatMessageComposer is a component that helps in writing and editing of messages and also sending attachments |

## Usage

### Integration

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

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

    function App(): React.JSX.Element {

        const [chatUser, setChatUser] = React.useState<CometChat.User>();
        const [message, setMessage] = React.useState<CometChat.TextMessage | undefined>(undefined);

        React.useEffect(() => {
              //after login
              CometChat.getUser("alice-uid").then((user) => {
                  setChatUser(user);
              })
              CometChat.getMessageDetails(614).then((message: any) => {
                  setMessage(message);
              })

        }, []);

        const listItemStyle : ListItemStyleInterface = {
          width: "500",
          height: "100%",
          borderRadius: 12,
          titleColor:"#ffffff",
          backgroundColor:"#6851D6",
        };

        const customBubbleView = () => {
           return(
             <CometChatListItem id="info" title ={(message as CometChat.TextMessage).getText()}
             listItemStyle={listItemStyle} />
           )
        };

        const threadedMessagesStyle : ThreadedMessagesStyleInterface = {
           titleStyle: {
             fontFamily: 'Arial',
             fontWeight: 'bold',
             fontSize: 15,
           },
           background: "#ebdeff",
           width: "100%",
           height: "600px",
           closeIconTint: "#6851D6"
        };



        return (
          <>
             {  chatUser && message &&
                <CometChatThreadedMessages
                parentMessage={message}
                BubbleView={customBubbleView}
                title={`Thread ${chatUser?.getName()}`}
                threadedMessagesStyle={threadedMessagesStyle}
               ></CometChatThreadedMessages> }
          </>
        );
    }
    ```
  </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.

ThreadedMessages does not have its own actions. However, you can override the behavior of the ThreadedMessages component by using the actions of its Components, with the help of [Configurations](/ui-kit/react-native/v4/components-overview#configurations).

**Example**

In this example, we are overriding the `onClose` callback.

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

    function App(): React.JSX.Element {

        const [chatUser, setChatUser] = React.useState<CometChat.User>();
        const [message, setMessage] = React.useState<CometChat.TextMessage | undefined>(undefined);

        React.useEffect(() => {
              //after login
              CometChat.getUser("alice-uid").then((user) => {
                  setChatUser(user);
              })
              CometChat.getMessageDetails(614).then((message: any) => {
                  setMessage(message);
              })

        }, []);

        const listItemStyle : ListItemStyleInterface = {
          width: "500",
          height: "100%",
          borderRadius: 12,
          titleColor:"#ffffff",
          backgroundColor:"#6851D6",
        };

        const customBubbleView = () => {
           return(
             <CometChatListItem id="info" title ={(message as CometChat.TextMessage).getText()}
             listItemStyle={listItemStyle} />
           )
        };

        const threadedMessagesStyle : ThreadedMessagesStyleInterface = {
           titleStyle: {
             fontFamily: 'Arial',
             fontWeight: 'bold',
             fontSize: 15,
           },
           background: "#ebdeff",
           width: "100%",
           height: "600px",
           closeIconTint: "#6851D6"
        };

        const onCloseHandler = () => {
          //code
        }

        return (
          <>
             {  chatUser && message &&
                <CometChatThreadedMessages
                parentMessage={message}
                BubbleView={customBubbleView}
                title={`Thread ${chatUser?.getName()}`}
                threadedMessagesStyle={threadedMessagesStyle}
                onClose={onCloseHandler}
               ></CometChatThreadedMessages> }
          </>
        );
    }
    ```
  </Tab>
</Tabs>

***

### Filters

**Filters** allow you to customize the data displayed in a list within a Component. You can filter the list based on your specific criteria, allowing for a more customized. Filters can be applied using RequestBuilders of Chat SDK.

ThreadedMessages does not have its own Filters. However, you can filter the messages list in ThreadedMessages Component using [MessageListConfiguration](#configuration).

**Example**

In this example, we are filtering messages based on the ParentMessageID and searching for messages that contain the keyword "hi".

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

    function App(): React.JSX.Element {

        const [chatUser, setChatUser] = React.useState<CometChat.User>();
        const [message, setMessage] = React.useState<CometChat.TextMessage | undefined>(undefined);

        React.useEffect(() => {
              //after login
              CometChat.getUser("alice-uid").then((user) => {
                  setChatUser(user);
              })
              CometChat.getMessageDetails(614).then((message: any) => {
                  setMessage(message);
              })

        }, []);

        const listItemStyle : ListItemStyleInterface = {
          width: "500",
          height: "100%",
          borderRadius: 12,
          titleColor:"#ffffff",
          backgroundColor:"#6851D6",
        };

        const customBubbleView = () => {
           return(
             <CometChatListItem id="info" title ={(message as CometChat.TextMessage).getText()}
             listItemStyle={listItemStyle} />
           )
        };

        const threadedMessagesStyle : ThreadedMessagesStyleInterface = {
           titleStyle: {
             fontFamily: 'Arial',
             fontWeight: 'bold',
             fontSize: 15,
           },
           background: "#ebdeff",
           width: "100%",
           height: "600px",
           closeIconTint: "#6851D6"
        };

        const messageRequestBuilder : CometChat.MessagesRequestBuilder = new CometChat.MessagesRequestBuilder()
                                                                    .setLimit(2).setSearchKeyword('keyword');


        const messageListConfiguration : MessageListConfigurationInterface = {
           messageRequestBuilder: messageRequestBuilder
        }

        return (
          <>
             {  chatUser && message &&
                <CometChatThreadedMessages
                parentMessage={message}
                BubbleView={customBubbleView}
                title={`Thread ${chatUser?.getName()}`}
                threadedMessagesStyle={threadedMessagesStyle}
                messageListConfiguration={messageListConfiguration}
               ></CometChatThreadedMessages> }
          </>
        );
    }
    ```
  </Tab>
</Tabs>

***

### 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 ThreadedMessages Component does not emit any events of its own.

***

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

To modify the styling, you can apply the ThreadedMessageStyle to the ThreadedMessage Component using the `threadedMessagesStyle` property.

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

    function App(): React.JSX.Element {

        const [chatUser, setChatUser] = React.useState<CometChat.User>();
        const [message, setMessage] = React.useState<CometChat.TextMessage | undefined>(undefined);

        React.useEffect(() => {
              //after login
              CometChat.getUser("alice-uid").then((user) => {
                  setChatUser(user);
              })
              CometChat.getMessageDetails(614).then((message: any) => {
                  setMessage(message);
              })

        }, []);

        const listItemStyle : ListItemStyleInterface = {
          width: "500",
          height: "100%",
          borderRadius: 12,
          titleColor:"#ffffff",
          backgroundColor:"#6851D6",
        };

        const customBubbleView = () => {
           return(
             <CometChatListItem id="info" title ={(message as CometChat.TextMessage).getText()}
             listItemStyle={listItemStyle} />
           )
        };

        const threadedMessagesStyle : ThreadedMessagesStyleInterface = {
           titleStyle: {
             fontFamily: 'Arial',
             fontWeight: 'bold',
             fontSize: 15,
           },
           background: "#ebdeff",
           width: "100%",
           height: "600px",
           closeIconTint: "#6851D6"
        };



        return (
          <>
             {  chatUser && message &&
                <CometChatThreadedMessages
                parentMessage={message}
                BubbleView={customBubbleView}
                threadedMessagesStyle={threadedMessagesStyle}
               ></CometChatThreadedMessages> }
          </>
        );
    }
    ```
  </Tab>
</Tabs>

The following properties are exposed by `ThreadedMessagesStyle`:

| Methods           | Description                                            | Type                               |           |
| ----------------- | ------------------------------------------------------ | ---------------------------------- | --------- |
| **border**        | Used to set border                                     | `border?: BorderStyleInterface,`   |           |
| **borderRadius**  | Used to set border radius                              | `borderRadius?: string;`           |           |
| **background**    | Used to set background colour                          | \`background?: number              | string;\` |
| **height**        | Used to set height                                     | \`height?: number                  | string;\` |
| **width**         | Used to set width                                      | \`width?: number                   | string;\` |
| **titleStyle**    | used to customise the font of the title in the app bar | `titleStyle?: FontStyleInterface;` |           |
| **closeIconTint** | used to set the color of the close icon in the app bar | `closeIconTint?: string;`          |           |

***

### 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 { CometChatThreadedMessages, ThreadedMessagesStyleInterface } from '@cometchat/chat-uikit-react-native';
    import CloseIcon from './close-icon.png';

    function App(): React.JSX.Element {

        const [chatUser, setChatUser] = React.useState<CometChat.User>();
        const [message, setMessage] = React.useState<CometChat.TextMessage | undefined>(undefined);

        React.useEffect(() => {
              //after login
              CometChat.getUser("alice-uid").then((user) => {
                  setChatUser(user);
              })
              CometChat.getMessageDetails(614).then((message: any) => {
                  setMessage(message);
              })

        }, []);

        const listItemStyle : ListItemStyleInterface = {
          width: "500",
          height: "100%",
          borderRadius: 12,
          titleColor:"#ffffff",
          backgroundColor:"#6851D6",
        };

        const customBubbleView = () => {
           return(
             <CometChatListItem id="info" title ={(message as CometChat.TextMessage).getText()}
             listItemStyle={listItemStyle} />
           )
        };

        const threadedMessagesStyle : ThreadedMessagesStyleInterface = {
           titleStyle: {
             fontFamily: 'Arial',
             fontWeight: 'bold',
             fontSize: 15,
           },
           background: "#ebdeff",
           width: "100%",
           height: "600px",
           closeIconTint: "#6851D6"
        };



        return (
          <>
             {  chatUser && message &&
                <CometChatThreadedMessages
                parentMessage={message}
                BubbleView={customBubbleView}
                title={`Thread ${chatUser?.getName()}`}
                threadedMessagesStyle={threadedMessagesStyle}
                closeIcon={CloseIcon}
                hideMessageComposer={true}
               ></CometChatThreadedMessages> }
          </>
        );
    }
    ```
  </Tab>
</Tabs>

Below is a list of customizations along with corresponding code snippets

| Property                                                    | Description                                                         | Code                                                                                                                     |
| ----------------------------------------------------------- | ------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------ |
| **parentMessage** <Tooltip tip="Not available">🛑</Tooltip> | Used to to set the message for which the replies need to be fetched | `parentMessage={parentMessage}`                                                                                          |
| **title**                                                   | Used to set title in the app bar                                    | `title={getTitle()}`                                                                                                     |
| **closeIcon**                                               | Used to set the icon to exit the widget                             | `closeIcon={{uri: <image url>}}` OR `import customCloseIcon from "./customCloseIcon.svg"; ``closeIcon={customCloseIcon}` |
| **hideMessageComposer**                                     | This will hide/show the message composer                            | `hideMessageComposer={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.

#### BubbleView

By using `bubbleView`, You can set parent message bubble view inside ThreadedMessage Component.

**Example**

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

  <Tab title="Android">
    <img src="https://mintcdn.com/cometchat-22654f5b-docs-rn-guide-message-privately/le8ibYc8lBJsShSE/images/502eac5a-threaded_message_bubble_cometchat_screens-0970ad959a2301c75279aecba87c1471.png?fit=max&auto=format&n=le8ibYc8lBJsShSE&q=85&s=ffcbf01e44b9e4416f7f631b1d1d0c98" alt="Image" width="4498" height="3120" data-path="images/502eac5a-threaded_message_bubble_cometchat_screens-0970ad959a2301c75279aecba87c1471.png" />
  </Tab>
</Tabs>

In this example, we will set parent message bubble view using `bubbleView` and apply custom styles on it.

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

    function App(): React.JSX.Element {

        const [chatUser, setChatUser] = React.useState<CometChat.User>();
        const [message, setMessage] = React.useState<CometChat.TextMessage | undefined>(undefined);

        React.useEffect(() => {
              //after login
              CometChat.getUser("alice-uid").then((user) => {
                  setChatUser(user);
              })
              CometChat.getMessageDetails(614).then((message: any) => {
                  setMessage(message);
              })

        }, []);

        const listItemStyle : ListItemStyleInterface = {
          width: "500",
          height: "100%",
          borderRadius: 12,
          titleColor:"#ffffff",
          backgroundColor:"#6851D6",
        };

        const customBubbleView = () => {
           return(
             <CometChatListItem id="info" title ={(message as CometChat.TextMessage).getText()}
             listItemStyle={listItemStyle} />
           )
        };


        return (
          <>
             {  chatUser && message &&
                <CometChatThreadedMessages
                parentMessage={message}
                BubbleView={customBubbleView}
               ></CometChatThreadedMessages> }
          </>
        );
    }
    ```
  </Tab>
</Tabs>

#### MessageActionView

By utilizing the `MessageActionView` method, you can assign custom actions to the parent message bubble view inside the ThreadedMessage Component.

**Example**

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

  <Tab title="Android">
    <img src="https://mintcdn.com/cometchat-22654f5b-docs-rn-guide-message-privately/7a4hqm7gLVRmX34O/images/002d6c9b-threaded_message_action_cometchat_screens-2772566f55ce1767593e2b1ba664ae3f.png?fit=max&auto=format&n=7a4hqm7gLVRmX34O&q=85&s=0ece5cc363499e14b9b62938f42a6267" alt="Image" width="4498" height="3120" data-path="images/002d6c9b-threaded_message_action_cometchat_screens-2772566f55ce1767593e2b1ba664ae3f.png" />
  </Tab>
</Tabs>

In this example, we are setting mock `Load More Replies` as message action view in ThreadedMessages Component.

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

    function App(): React.JSX.Element {

        const [chatUser, setChatUser] = React.useState<CometChat.User>();
        const [message, setMessage] = React.useState<CometChat.TextMessage | undefined>(undefined);

        React.useEffect(() => {
              //after login
              CometChat.getUser("alice-uid").then((user) => {
                  setChatUser(user);
              })
              CometChat.getMessageDetails(614).then((message: any) => {
                  setMessage(message);
              })

        }, []);

        const listItemStyle : ListItemStyleInterface = {
          width: "500",
          height: "100%",
          borderRadius: 12,
          titleColor:"#ffffff",
          backgroundColor:"#6851D6",
        };

        const customBubbleView = () => {
           return(
             <CometChatListItem id="info" title ={(message as CometChat.TextMessage).getText()}
             listItemStyle={listItemStyle} />
           )
        };

        const viewStyle: StyleProp<ViewStyle> = {
          flexDirection: 'row',
          alignItems: 'flex-start',
          justifyContent: 'center',
          padding: 5,
          borderColor: 'black',
          borderWidth: 1,
          backgroundColor: 'white',
          borderRadius: 10,
          margin: 2,
          marginLeft: 7.4,
          height: 30,
          width: '95.5%',
        };

        const customMessageActionView  = () : JSX.Element => {
          return <View style={viewStyle}>
                   <Text style={{color: "#6851D6", fontWeight: "bold"}}>Load More Replies</Text>
                </View>
        };

        return (
          <>
             {  chatUser && message &&
                <CometChatThreadedMessages
                parentMessage={message}
                BubbleView={customBubbleView}
                MessageActionView={customMessageActionView}
               ></CometChatThreadedMessages> }
          </>
        );
    }
    ```
  </Tab>
</Tabs>

#### MessageComposerView

By utilizing the `MessageComposerView` method, you can override the default CometChatMessageComposer.

**Example**

<Tabs>
  <Tab title="iOS">
    <img src="https://mintcdn.com/cometchat-22654f5b-docs-rn-guide-message-privately/le8ibYc8lBJsShSE/images/56d9a8c8-threaded_message_composerview_cometchat_screens-bceeaf993814f506b957c84016adbe7b.png?fit=max&auto=format&n=le8ibYc8lBJsShSE&q=85&s=e3dfb438b27efb9c6a089d96c4ae2699" alt="Image" width="4498" height="3120" data-path="images/56d9a8c8-threaded_message_composerview_cometchat_screens-bceeaf993814f506b957c84016adbe7b.png" />
  </Tab>

  <Tab title="Android">
    <img src="https://mintcdn.com/cometchat-22654f5b-docs-rn-guide-message-privately/_MYSdWhXnUkTkjEH/images/46fac4a2-threaded_message_composerview_cometchat_screens-da8a6a48a9153855aae5d5a1e4a3254b.png?fit=max&auto=format&n=_MYSdWhXnUkTkjEH&q=85&s=da0cc22df92b41d66fb59e36ed7424cb" alt="Image" width="4498" height="3120" data-path="images/46fac4a2-threaded_message_composerview_cometchat_screens-da8a6a48a9153855aae5d5a1e4a3254b.png" />
  </Tab>
</Tabs>

In this example, we are setting a custom MessageComposerView.

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

    function App(): React.JSX.Element {

        const [chatUser, setChatUser] = React.useState<CometChat.User>();
        const [message, setMessage] = React.useState<CometChat.TextMessage | undefined>(undefined);

        React.useEffect(() => {
              //after login
              CometChat.getUser("alice-uid").then((user) => {
                  setChatUser(user);
              })
              CometChat.getMessageDetails(614).then((message: any) => {
                  setMessage(message);
              })

        }, []);

        const listItemStyle : ListItemStyleInterface = {
          width: "500",
          height: "100%",
          borderRadius: 12,
          titleColor:"#ffffff",
          backgroundColor:"#6851D6",
        };

        const customBubbleView = () => {
           return(
             <CometChatListItem id="info" title ={(message as CometChat.TextMessage).getText()}
             listItemStyle={listItemStyle} />
           )
        };

        const CustomMessageComposer = ({ user, group, parentMessage }: {
            user?: CometChat.User | undefined;
            group?: CometChat.Group | undefined;
            parentMessage: CometChat.BaseMessage;
        }) => {
            return <TextInput style={{
                padding: 10, margin: 10,
                borderRadius: 10,
                borderWidth: 1, borderColor: "lightgray",
            }} placeholder="Type a message" />
        };

        const viewStyle: StyleProp<ViewStyle> = {
          flexDirection: 'row',
          alignItems: 'flex-start',
          justifyContent: 'center',
          padding: 5,
          borderColor: 'black',
          borderWidth: 1,
          backgroundColor: 'white',
          borderRadius: 10,
          margin: 2,
          marginLeft: 7.4,
          height: 30,
          width: '95.5%',
        };

        const customMessageActionView  = () : JSX.Element => {
          return <View style={viewStyle}>
                   <Text style={{color: "#6851D6", fontWeight: "bold"}}>Load More Replies</Text>
                </View>
        };

        return (
          <>
             {  chatUser && message &&
                <CometChatThreadedMessages
                parentMessage={message}
                BubbleView={customBubbleView}
                MessageActionView={customMessageActionView}
                MessageComposerView={CustomMessageComposer}
               ></CometChatThreadedMessages> }
          </>
        );
    }
    ```
  </Tab>
</Tabs>

#### MessageListView

By utilizing the `MessageListView` method, you can override the default CometChatMessageList.

**Example**

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

  <Tab title="Android">
    <img src="https://mintcdn.com/cometchat-22654f5b-docs-rn-guide-message-privately/le8ibYc8lBJsShSE/images/57e88a18-threaded_message_listview_cometchat_screens-0eaf1ee060f7a311ef3013522bbd7abe.png?fit=max&auto=format&n=le8ibYc8lBJsShSE&q=85&s=bb90182957ec812d0baa0d53d5642ddb" alt="Image" width="4498" height="3120" data-path="images/57e88a18-threaded_message_listview_cometchat_screens-0eaf1ee060f7a311ef3013522bbd7abe.png" />
  </Tab>
</Tabs>

In this example, we are setting a custom MessageListView.

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

    function App(): React.JSX.Element {

        const [chatUser, setChatUser] = React.useState<CometChat.User>();
        const [message, setMessage] = React.useState<CometChat.TextMessage | undefined>(undefined);

        React.useEffect(() => {
              //after login
              CometChat.getUser("alice-uid").then((user) => {
                  setChatUser(user);
              })
              CometChat.getMessageDetails(614).then((message: any) => {
                  setMessage(message);
              })

        }, []);

        const listItemStyle : ListItemStyleInterface = {
          width: "500",
          height: "100%",
          borderRadius: 12,
          titleColor:"#ffffff",
          backgroundColor:"#6851D6",
        };

        const customBubbleView = () => {
           return(
             <CometChatListItem id="info" title ={(message as CometChat.TextMessage).getText()}
             listItemStyle={listItemStyle} />
           )
        };

        const CustomMessageComposer = ({ user, group, parentMessage }: {
            user?: CometChat.User | undefined;
            group?: CometChat.Group | undefined;
            parentMessage: CometChat.BaseMessage;
        }) => {
            return <TextInput style={{
                padding: 10, margin: 10,
                borderRadius: 10,
                borderWidth: 1, borderColor: "lightgray",
            }} placeholder="Type a message" />
        };

        const CustomMessagesListView = ({ user, group, parentMessage }: {
            user?: CometChat.User | undefined;
            group?: CometChat.Group | undefined;
            parentMessage: CometChat.BaseMessage;
        }) => {
            let name = user?.getName() || group?.getName();
            return <View style={{
                    flex: 1,
                    alignItems: 'center',
                    justifyContent: 'center',
                    backgroundColor: 'cyan'
                }}>
                    <Text style={{ color: "#000" }}>Custom Message List: {name}</Text>
                </View>
        };

        const viewStyle: StyleProp<ViewStyle> = {
          flexDirection: 'row',
          alignItems: 'flex-start',
          justifyContent: 'center',
          padding: 5,
          borderColor: 'black',
          borderWidth: 1,
          backgroundColor: 'white',
          borderRadius: 10,
          margin: 2,
          marginLeft: 7.4,
          height: 30,
          width: '95.5%',
        };

        const customMessageActionView  = () : JSX.Element => {
          return <View style={viewStyle}>
                   <Text style={{color: "#6851D6", fontWeight: "bold"}}>Load More Replies</Text>
                </View>
        };

        return (
          <>
             {  chatUser && message &&
                <CometChatThreadedMessages
                parentMessage={message}
                BubbleView={customBubbleView}
                MessageActionView={customMessageActionView}
                MessageComposerView={CustomMessageComposer}
               ></CometChatThreadedMessages> }
          </>
        );
    }
    ```
  </Tab>
</Tabs>

***

## Configuration

Configurations offer the ability to customize the properties of each individual component within a Composite Component.

The ThreadedMessages is a Composite Component, and it has a distinct set of configurations for each of its components as follows.

### MessageList

If you want to customize the properties of the [MessageList](/ui-kit/react-native/v4/message-list) Component inside ThreadedMessages Component, you need use the `MessageListConfiguration` object.

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

    function App(): React.JSX.Element {

        const [chatUser, setChatUser] = React.useState<CometChat.User>();
        const [message, setMessage] = React.useState<CometChat.TextMessage | undefined>(undefined);

        React.useEffect(() => {
              //after login
              CometChat.getUser("alice-uid").then((user) => {
                  setChatUser(user);
              })
              CometChat.getMessageDetails(614).then((message: any) => {
                  setMessage(message);
              })

        }, []);

        const listItemStyle : ListItemStyleInterface = {
          width: "500",
          height: "100%",
          borderRadius: 12,
          titleColor:"#ffffff",
          backgroundColor:"#6851D6",
        };

        const customBubbleView = () => {
           return(
             <CometChatListItem id="info" title ={(message as CometChat.TextMessage).getText()}
             listItemStyle={listItemStyle} />
           )
        };

       const messageRequestBuilder : CometChat.MessagesRequestBuilder = new CometChat.MessagesRequestBuilder()
                                                                    .setLimit(2).setSearchKeyword('check');


       const messageListConfiguration : MessageListConfigurationInterface = {
           //config
           messageRequestBuilder: messageRequestBuilder
       }



        return (
          <>
             {  chatUser && message &&
                <CometChatThreadedMessages
                parentMessage={message}
                BubbleView={customBubbleView}
                messageListConfiguration={messageListConfiguration}
               ></CometChatThreadedMessages> }
          </>
        );
    }
    ```
  </Tab>
</Tabs>

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

<Note>
  info

  Please note that the 🛑 symbol are not accessible within the Configuration Object.
</Note>

**Example**

<Tabs>
  <Tab title="iOS">
    <img src="https://mintcdn.com/cometchat-22654f5b-docs-rn-guide-message-privately/xIG5VBdyNJ5cYSqE/images/d5521470-threaded_message_list_cometchat_screens-80937495b4e6692754b58858981ba088.png?fit=max&auto=format&n=xIG5VBdyNJ5cYSqE&q=85&s=fbbd231a30fbdd8795d80df3c0fa617d" alt="Image" width="4498" height="3120" data-path="images/d5521470-threaded_message_list_cometchat_screens-80937495b4e6692754b58858981ba088.png" />
  </Tab>

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

In this example, we will be changing the list alignment and modifying the message list styles in the [MessageList](/ui-kit/react-native/v4/message-list) component using `MessageListConfiguration`.

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

    function App(): React.JSX.Element {

        const [chatUser, setChatUser] = React.useState<CometChat.User>();
        const [message, setMessage] = React.useState<CometChat.TextMessage | undefined>(undefined);

        React.useEffect(() => {
              //after login
              CometChat.getUser("alice-uid").then((user) => {
                  setChatUser(user);
              })
              CometChat.getMessageDetails(614).then((message: any) => {
                  setMessage(message);
              })

        }, []);

        const listItemStyle : ListItemStyleInterface = {
          width: "500",
          height: "100%",
          borderRadius: 12,
          titleColor:"#ffffff",
          backgroundColor:"#6851D6",
        };

        const customBubbleView = () => {
           return(
             <CometChatListItem id="info" title ={(message as CometChat.TextMessage).getText()}
             listItemStyle={listItemStyle} />
           )
        };

        const messageListStyle : MessageListStyleInterface = {
           backgroundColor:"#e7e3fc",
           loadingIconTint:"#e7e3fc"
        };

        const messageRequestBuilder : CometChat.MessagesRequestBuilder = new CometChat.MessagesRequestBuilder()
                                                                    .setLimit(2).setSearchKeyword('check');

        const alignment : CometChatUiKitConstants.MessageListAlignmentType = "leftAligned";

        const messageListConfiguration : MessageListConfigurationInterface = {
           messageRequestBuilder: messageRequestBuilder,
           alignment: alignment,
           messageListStyle: messageListStyle
        }

        return (
          <>
             {  chatUser && message &&
                <CometChatThreadedMessages
                parentMessage={message}
                BubbleView={customBubbleView}
                messageListConfiguration={messageListConfiguration}
               ></CometChatThreadedMessages> }
          </>
        );
    }
    ```
  </Tab>
</Tabs>

***

### MessageComposer

If you want to customize the properties of the [MessageComposer](/ui-kit/react-native/v4/message-composer) Component inside ThreadedMessages Component, you need use the `MessageComposerConfiguration` object.

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

    function App(): React.JSX.Element {

        const [chatUser, setChatUser] = React.useState<CometChat.User>();
        const [message, setMessage] = React.useState<CometChat.TextMessage | undefined>(undefined);

        React.useEffect(() => {
              //after login
              CometChat.getUser("alice-uid").then((user) => {
                  setChatUser(user);
              })
              CometChat.getMessageDetails(614).then((message: any) => {
                  setMessage(message);
              })

        }, []);

        const listItemStyle : ListItemStyleInterface = {
          width: "500",
          height: "100%",
          borderRadius: 12,
          titleColor:"#ffffff",
          backgroundColor:"#6851D6",
        };

        const customBubbleView = () => {
           return(
             <CometChatListItem id="info" title ={(message as CometChat.TextMessage).getText()}
             listItemStyle={listItemStyle} />
           )
        };

        const messageComposerConfiguration : CometChatMessageComposerInterface = {
           //config
        }

        return (
          <>
             {  chatUser && message &&
                <CometChatThreadedMessages
                parentMessage={message}
                BubbleView={customBubbleView}
                messageComposerConfiguration={messageComposerConfiguration}
               ></CometChatThreadedMessages> }
          </>
        );
    }
    ```
  </Tab>
</Tabs>

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

<Note>
  info

  Please note that the 🛑 symbol are not accessible within the Configuration Object.
</Note>

**Example**

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

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

In this example, we'll be adding a custom header view and customizing some properties of the [MessageComposer](/ui-kit/react-native/v4/message-composer) component using `MessageComposerConfiguration`.

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

    function App(): React.JSX.Element {

        const [chatUser, setChatUser] = React.useState<CometChat.User>();
        const [message, setMessage] = React.useState<CometChat.TextMessage | undefined>(undefined);

        React.useEffect(() => {
              //after login
              CometChat.getUser("alice-uid").then((user) => {
                  setChatUser(user);
              })
              CometChat.getMessageDetails(614).then((message: any) => {
                  setMessage(message);
              })

        }, []);

        const listItemStyle : ListItemStyleInterface = {
          width: "500",
          height: "100%",
          borderRadius: 12,
          titleColor:"#ffffff",
          backgroundColor:"#6851D6",
        };

        const customBubbleView = () => {
           return(
             <CometChatListItem id="info" title ={(message as CometChat.TextMessage).getText()}
             listItemStyle={listItemStyle} />
           )
        };

        const viewStyleComposerHeader: StyleProp<ViewStyle> = {
          flexDirection: 'row',
          alignItems: 'flex-start',
          justifyContent: 'center',
          padding: 5,
          borderColor: 'black',
          borderWidth: 1,
          backgroundColor: 'white',
          borderRadius: 10,
          margin: 2,
          marginLeft: 7.4,
          height: 30,
          width: '95.5%',
        };


        const customHeaderViewForComposer = () => {
           return <View style={viewStyleComposerHeader}>
                     <Text style={{color: "#6851D6", fontWeight: "bold"}}>Chat Bot</Text>
                  </View>
        }

        const messageComposerStyle : MessageComposerStyleInterface = {
          sendIconTint: "red",
          inputBackground: "#e7e3fc",
          borderRadius: 20,
          textColor:"red",
        }

        const messageComposerConfiguration : CometChatMessageComposerInterface = {
           HeaderView: customHeaderViewForComposer,
           messageComposerStyle: messageComposerStyle,
        }

        return (
          <>
             {  chatUser && message &&
                <CometChatThreadedMessages
                parentMessage={message}
                BubbleView={customBubbleView}
                messageComposerConfiguration={messageComposerConfiguration}
               ></CometChatThreadedMessages> }
          </>
        );
    }
    ```
  </Tab>
</Tabs>