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

# Conversations

> Conversations — CometChat documentation.

## Overview

The Conversations is a [Component](/ui-kit/react-native/v4/components-overview#components), That shows all conversations for the currently logged-in user,

<Tabs>
  <Tab title="iOS">
    <img src="https://mintcdn.com/cometchat-22654f5b-docs-rn-guide-message-privately/PrOf0fpV33FkfOMB/images/1069bf53-convo_overview-14182fc61505ee90fc0835ff52d471cc.png?fit=max&auto=format&n=PrOf0fpV33FkfOMB&q=85&s=6d873de0490d903007f073f27e8293a7" alt="Image" width="2293" height="3120" data-path="images/1069bf53-convo_overview-14182fc61505ee90fc0835ff52d471cc.png" />
  </Tab>

  <Tab title="Android">
    <img src="https://mintcdn.com/cometchat-22654f5b-docs-rn-guide-message-privately/7a4hqm7gLVRmX34O/images/042dd693-convo_overview-0618283fae90d73d7da097d54419838f.png?fit=max&auto=format&n=7a4hqm7gLVRmX34O&q=85&s=ac26d006bef857bc9b600cceb667530a" alt="Image" width="2507" height="3120" data-path="images/042dd693-convo_overview-0618283fae90d73d7da097d54419838f.png" />
  </Tab>
</Tabs>

## Usage

### Integration

To use Conversations in your component, use the following code snippet:

```tsx App.tsx theme={null}
import { CometChatConversations } from "@cometchat/chat-uikit-react-native";

return <CometChatConversations />;
```

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

`OnItemPress` is triggered when you press on a ListItem of the Conversations component. The `OnItemPress` 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 { CometChatConversations } from "@cometchat/chat-uikit-react-native";

    const onPressHandler = (conversationClicked: CometChat.Conversation) => {
      //code
    };

    return <CometChatConversations onItemPress={onPressHandler} />;
    ```
  </Tab>
</Tabs>

***

##### 2. onItemLongPress

`onItemLongPress` is triggered when you long press on a ListItem of the Conversations component. The `onItemLongPress` 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 { CometChatConversations } from "@cometchat/chat-uikit-react-native";

    const onLongPressHandler = (conversationClicked: CometChat.Conversation) => {
      //code
    };

    return <CometChatConversations onItemLongPress={onLongPressHandler} />;
    ```
  </Tab>
</Tabs>

***

##### 3. onSelection

The `onSelection` event is triggered upon the completion of a selection in `SelectionMode`. It does not have a default behavior. However, you can override its behavior using the following code snippet.

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

    const onSelectionHandler = (selection: Array<CometChat.Conversation>) => {
      //code
    };

    return (
      <CometChatConversations
        selectionMode={"single"}
        onSelection={onSelectionHandler}
      />
    );
    ```
  </Tab>
</Tabs>

***

##### 4. onBack

`onBack` is triggered when you press the back button in the app bar. It does not have a default behavior. However, you can override its behavior using the following code snippet.

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

    const onBackHandler = () => {
      //code
    };

    return <CometChatConversations showBackButton={true} onBack={onBackHandler} />;
    ```
  </Tab>
</Tabs>

***

##### 5. OnError

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

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

    const onErrorHandler = (error: CometChat.CometChatException) => {
      console.log("Error");
    };

    return <CometChatConversations onError={onErrorHandler} />;
    ```
  </Tab>
</Tabs>

***

***

### Filters

You can set `ConversationsRequestBuilder` in the Conversations Component to filter the conversation list. You can modify the builder as per your specific requirements with multiple options available to know more refer to [ConversationRequestBuilder](/sdk/react-native/retrieve-conversations).

You can set filters using the following parameters.

1. **Conversation Type:** Filters on type of Conversation, `User` or `Groups`
2. **Limit:** Number of conversations fetched in a single request.
3. **WithTags:** Filter on fetching conversations containing tags
4. **Tags:** Filters on specific `Tag`
5. **UserTags:** Filters on specific User `Tag`
6. **GroupTags:** Filters on specific Group `Tag`

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

    const conversationsRequestBuilder = new CometChat.ConversationsRequestBuilder();
    conversationsRequestBuilder.setLimit(30);

    return (
      <CometChatConversations
        conversationsRequestBuilder={conversationsRequestBuilder}
      />
    );
    ```
  </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.

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

    CometChatUIEventHandler.addConversationListener("SOME_UNIQUE_ID", {
      ccConversationDeleted: (conversation: CometChat.Conversation) => {
        //code
      },
    });

    return {
      /* your view*/
    };
    ```
  </Tab>
</Tabs>

***

<Tabs>
  <Tab title="Remove Listener">
    ```tsx theme={null}
    import { CometChatUIEventHandler } from "@cometchat/chat-uikit-react-native";
    CometChatUIEventHandler.removeListener("SOME_UNIQUE_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. Conversations Style

You can set the `ConversationsStyle` to the `Conversations` Component to customize the styling.

***

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

    const conversationsStyle: ConversationsStyleInterface = {
      width: "100%",
      height: "100%",
      backgroundColor: "green",
      titleColor: "red",
    };

    const listItemStyle: ListItemStyleInterface = {
      backgroundColor: "green",
    };

    return (
      <CometChatConversations
        conversationsStyle={conversationsStyle}
        listItemStyle={listItemStyle}
      />
    );
    ```
  </Tab>
</Tabs>

List of properties exposed by ConversationsStyle

| Name                     | Type                 | Description                                           |
| ------------------------ | -------------------- | ----------------------------------------------------- |
| backgroundColor          | string               | Sets the background colour for Conversations          |
| height                   | number \| string     | Sets the height for Conversations                     |
| borderRadius             | number               | Sets the border radius for Conversations              |
| width                    | number \| string     | Sets the width for Conversations                      |
| border                   | BorderStyleInterface | Sets the border colour for Conversations              |
| titleColor               | string               | Sets the title colour for Conversations               |
| titleFont                | FontStyleInterface   | Sets the title font for Conversations                 |
| backIconTint             | string               | Sets the back button tint colour for Conversations    |
| onlineStatusColor        | string               | Sets the online status colour for Conversations       |
| separatorColor           | string               | Sets the separator colour for Conversations           |
| loadingIconTint          | string               | Sets the loading icon colour for Conversations        |
| emptyTextColor           | string               | Sets the empty text colour for Conversations          |
| emptyTextFont            | FontStyle            | Sets the empty text font for Conversations            |
| errorTextColor           | string               | Sets the error text colour for Conversations          |
| errorTextFont            | FontStyle            | Sets the error text font for Conversations            |
| lastMessageTextColor     | string               | Sets the last message text text colour                |
| lastMessageTextFont      | FontStyle            | Sets the last message text font for Conversations     |
| typingIndictorTextColor  | string               | Sets the typing indicator colour for Conversations    |
| typingIndictorTextFont   | FontStyle            | Sets the typing indicator font for Conversations      |
| threadIndicatorTextFont  | FontStyle            | Sets the thread indicator text font for Conversations |
| threadIndicatorTextColor | string               | Sets the thread indicator text font for Conversations |

##### 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 {
      CometChatConversations,
      AvatarStyleInterface,
    } from "@cometchat/chat-uikit-react-native";

    const avatarStyle: AvatarStyleInterface = {
      border: {
        borderWidth: 2,
        borderStyle: "dotted",
        borderColor: "red",
      },
    };

    return <CometChatConversations avatarStyle={avatarStyle} />;
    ```
  </Tab>
</Tabs>

##### 3. StatusIndicator Style

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

***

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

    const statusIndicatorStyle: StatusIndicatorStyleInterface = {
      backgroundColor: "rgb(0, 200, 111)",
    };

    return <CometChatConversations statusIndicatorStyle={statusIndicatorStyle} />;
    ```
  </Tab>
</Tabs>

##### 4. Date Style

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

***

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

    const dateStyle: DateStyleInterface = {
      textColor: "red",
    };

    return <CometChatConversations dateStyle={dateStyle} />;
    ```
  </Tab>
</Tabs>

##### 5. Badge Style

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

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

    const badgeStyle: BadgeStyleInterface = {
      textColor: "red",
    };

    return <CometChatConversations badgeStyle={badgeStyle} />;
    ```
  </Tab>
</Tabs>

##### 6. Confirm Dialog Style

To apply customized styles to the `delete dialog` component in the `Conversations` Component, you can use the following code snippet.

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

    const confirmDialogStyle: CometChatConfirmDialogStyleInterface = {
      confirmBackground: "red",
    };

    return <CometChatConversations confirmDialogStyle={confirmDialogStyle} />;
    ```
  </Tab>
</Tabs>

##### 6. List Item Style

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

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

    const listItemStyle: ListItemStyleInterface = {
      backgroundColor: "green",
    };
    return <CometChatConversations listItemStyle={listItemStyle} />;
    ```
  </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 { CometChatConversations, ListItemStyleInterface } from '@cometchat/chat-uikit-react-native';

    return (
      <CometChatConversations
        title="Your Custom Title"
      />
    );
    ```
  </Tab>
</Tabs>

Below is a list of customizations along with corresponding code snippets

| Property                | Description                                                                                                                                                                                                                                     | Code                                                                                                                                                                  |
| ----------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| Title                   | Used to set custom title in the app bar.                                                                                                                                                                                                        | `title="Your Custom Title"`                                                                                                                                           |
| EmptyState Text         | Used to set a custom text response when fetching the conversations has returned an empty list                                                                                                                                                   | `emptyStateText="Your Custom Empty State text"`                                                                                                                       |
| Selection Mode          | Used to set a custom text response when fetching the conversations has returned an empty list                                                                                                                                                   | `selectionMode={SelectionMode.multiple}`                                                                                                                              |
| ProtectedGroup Icon     | Used to set icon shown in place of status indicator for password protected group                                                                                                                                                                | `protectedGroupIcon={{uri: <image url>}}` OR `import customProtectedGroupIcon from "./customProtectedGroupIcon.svg"; ``protectedGroupIcon={customProtectedGroupIcon}` |
| privateGroupIcon        | Used to set icon shown in place of status indicator for private group                                                                                                                                                                           | `privateGroupIcon={{uri: <image url>}}` OR `import customPrivateGroupIcon from "./customPrivateGroupIcon.svg";` `privateGroupIcon={customPrivateGroupIcon}`           |
| SentIcon                | Used to customize the receipt icon shown in the subtitle of the conversation item if hideReceipt is false and if the status of the last message in the conversation is sent                                                                     | `sentIcon={{uri: <image url>}}` OR `import customSentIcon from "./secustomSentIconntIcon.svg";` `sentIcon={customSentIcon}`                                           |
| Delivered Icon          | Used to customize the receipt icon shown in the subtitle of the conversation item if hideReceipt is false and if the status of the last message in the conversation is delivered                                                                | `deliveredIcon={{uri: <image url>}}` OR `import customDeliveredIcon from "./customDeliveredIcon.svg"; ``deliveredIcon={customDeliveredIcon}`                          |
| Read Icon               | Used to customize the receipt icon shown in the subtitle of the conversation item if hideReceipt is false and if the status of the last message in the conversation is read                                                                     | `readIcon={{uri: <image url>}}` OR `import customReadIcon from "./customReadIcon.svg";` `readIcon={customReadIcon}`                                                   |
| errorIcon               | Asset URL for the error state indicating that an error has occurred when the message was in transit.                                                                                                                                            | `errorIcon={{uri: <image url>}}` OR `import customErrorIcon from "./customErrorIcon.svg";` `errorIcon={customErrorIcon}`                                              |
| Hide Error              | Used to hide error on fetching conversations                                                                                                                                                                                                    | `hideError={true}`                                                                                                                                                    |
| Hide Separator          | Used to control visibility of Separators in the list view                                                                                                                                                                                       | `hideSeparator={true}`                                                                                                                                                |
| Disable UsersPresence   | Used to control visibility of status indicator shown if user is online                                                                                                                                                                          | `disableUsersPresence={true}`                                                                                                                                         |
| Hide Receipt            | Used to control the visibility of read receipts without affecting the functionality of marking messages as read and delivered                                                                                                                   | `hideReceipt={false}`                                                                                                                                                 |
| Disable Typing          | Used to toggle visibility of typing indicator                                                                                                                                                                                                   | `disableTyping={true}`                                                                                                                                                |
| disableSoundForMessages | When set to true, the component will not produce sound for all incoming messages.indicator                                                                                                                                                      | `disableSoundForMessages={true}`                                                                                                                                      |
| customSoundForMessages  | mp3 file asset of your choice.                                                                                                                                                                                                                  | `import customMessageSound from "./customMessageSound.wav";` `customSoundForMessages={customMessageSound}`                                                            |
| 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}`                                                                                                                                              |

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

***

#### ListItemView

With this function, you can assign a custom ListItem to the Conversations Component.

<Tabs>
  <Tab title="TypeScript">
    ```ts theme={null}
    import { CometChatConversations, ListItemStyleInterface } from '@cometchat/chat-uikit-react-native';

    const getListItemView = () => {
      //your custom list item view
    };

    return (
       <CometChatConversations
        listItemView={getListItemView} //custom listitem view
       />
    );
    ```
  </Tab>
</Tabs>

Demonstration

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

  <Tab title="Android">
    <img src="https://mintcdn.com/cometchat-22654f5b-docs-rn-guide-message-privately/ugckbRl5Q-H7t8X2/images/e35b315b-listItemView_cometchat_screens-e0333e8862b5433cea9a4b4a83af58e7.png?fit=max&auto=format&n=ugckbRl5Q-H7t8X2&q=85&s=d0e7930089fe09e9d06b5ea287d452e8" alt="Image" width="4498" height="3120" data-path="images/e35b315b-listItemView_cometchat_screens-e0333e8862b5433cea9a4b4a83af58e7.png" />
  </Tab>
</Tabs>

You can customize the appearance of each list item by modifying the `getListItemView` function as follows:

<Tabs>
  <Tab title="TypeScript">
    ```ts theme={null}
        const viewStyle: StyleProp<ViewStyle> = {
          flex: 1,
          flexDirection: 'row',
          alignItems: 'flex-start',
          padding: 10,
          borderColor: 'black',
          borderWidth: 1,
          backgroundColor: '#E8EAE9',
          borderRadius: 10,
          margin: 2
        }
        const getListItemView = (conversation: CometChat.Conversation) => {
          const conversationWith = conversation.getConversationWith();

          if (conversationWith instanceof CometChat.User) {
            return (
              <View style={viewStyle}>
                <CometChatAvatar
                  image={conversationWith.getAvatar() ? {uri: conversationWith.getAvatar()} : undefined}
                  name={conversationWith.getName()}
                />

                <View>
                  <Text style={{color: "black", fontWeight: 'bold'}}>
                    {conversationWith.getName()}
                  </Text>
                  <Text style={{color: '#667'}}>{conversationWith.getStatus()}</Text>
                </View>
              </View>
            );
          } else if (conversationWith instanceof CometChat.Group) {
            return (
              <View style={viewStyle}>
                <CometChatAvatar
                  image={conversationWith.getIcon() ? {uri: conversationWith.getIcon()} : undefined}
                  name={conversationWith.getName()}
                />
                <View>
                  <Text style={{color: "black", fontWeight: 'bold'}}>
                    {conversationWith.getName()}
                  </Text>
                  <Text style={{color: '#888'}}>
                    Members: {conversationWith.getMembersCount()}
                  </Text>
                </View>
              </View>
            );
          } else {
            return <Text>Unknown conversation type</Text>;
          }
        };
    ```
  </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 { CometChatConversations } 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 (
          <CometChatConversations
             textFormatters={[new ShortcutFormatter()]}
          />
       );
      }
    ```
  </Tab>
</Tabs>

***

#### AppBarOptions

You can set the Custom AppBar Options to add more options to the Conversations component.

<Tabs>
  <Tab title="TypeScript">
    ```ts theme={null}

        const getAppBarOptions = () =>{
           //custom app bar options
        }

        <CometChatConversations
          AppBarOption={getAppBarOptions}
        />;
    ```
  </Tab>
</Tabs>

Demonstration

<Tabs>
  <Tab title="iOS">
    <img src="https://mintcdn.com/cometchat-22654f5b-docs-rn-guide-message-privately/jpEUuHUk-hvu4tQT/images/a8743722-AppBarOptions_cometchat_screens-f7d5b04bc4dba8520bc765b06a469d87.png?fit=max&auto=format&n=jpEUuHUk-hvu4tQT&q=85&s=9611f8c9b3a293118368068bbc46c5d8" alt="Image" width="4498" height="3120" data-path="images/a8743722-AppBarOptions_cometchat_screens-f7d5b04bc4dba8520bc765b06a469d87.png" />
  </Tab>

  <Tab title="Android">
    <img src="https://mintcdn.com/cometchat-22654f5b-docs-rn-guide-message-privately/Xgdtn9VZPDi47bm-/images/28a4394d-AppBarOptions_cometchat_screens-bd549654e8a4525513b0718528e87496.png?fit=max&auto=format&n=Xgdtn9VZPDi47bm-&q=85&s=4b4342602865831ae80cff804cfad670" alt="Image" width="4498" height="3120" data-path="images/28a4394d-AppBarOptions_cometchat_screens-bd549654e8a4525513b0718528e87496.png" />
  </Tab>
</Tabs>

You can customize the menu by modifying the `getAppBarOptions` function as follows:

<Tabs>
  <Tab title="TypeScript">
    ```ts theme={null}

      import { CometChatConversations, CometChatCallLogsWithDetails, CallLogsConfiguration } from '@cometchat/chat-uikit-react-native';
      import Call from "./Call.png";

      const [showCallLogs, setShowCallLogs] = useState(false);
      const callLogsConfiguration = new CallLogsConfiguration({
        showBackButton: true,
        onBack: () => {
          setShowCallLogs(false);
        }
      }) ;


      function toggleShowCallLogs() {
        setShowCallLogs(true);
      }

      const getAppBarOptions = () => {
        return (
        <TouchableOpacity style={styles.button} onPress={toggleShowCallLogs}>
            <Image
            source={Call}
            style={styles.image}
            />
        </TouchableOpacity>
        );
      };

    return(
      <SafeAreaView style={{ flex: 1 }}>
          {!showCallLogs && <CometChatConversations
                  AppBarOption={getAppBarOptions}
              />
          }
         {showCallLogs && <CometChatCallLogsWithDetails CallLogsConfiguration={callLogsConfiguration} />}
       </SafeAreaView>
    );
    ```
  </Tab>
</Tabs>

***

#### DatePattern

You can modify the date pattern to your requirement using DatePattern. datePattern formats date and time values according to a predefined standard, enhancing consistency and clarity in their presentation.

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

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

       const generateDateString = (conversation: CometChat.Conversation) => {
          const lastMessage : any = CometChatConversationUtils.getLastMessage(conversation);
          const conversationWith :  any = conversation.getConversationWith();
          const days = ["Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday"];
          const timeStamp =  (lastMessage && lastMessage['updatedAt']) || conversationWith['createdAt'] || conversationWith['lastActiveAt'];
          let 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 (
         <CometChatConversations
          datePattern={generateDateString}
         />
       );
    ```
  </Tab>
</Tabs>

Demonstration

<Tabs>
  <Tab title="iOS">
    <img src="https://mintcdn.com/cometchat-22654f5b-docs-rn-guide-message-privately/21UBnagXOw-XG0Sv/images/ae9942a6-datePattern_cometchat_screens-04eda511b487e433042f3278b8caea21.png?fit=max&auto=format&n=21UBnagXOw-XG0Sv&q=85&s=a815daeb27dc28c41c2573c6b29728cb" alt="Image" width="4498" height="3120" data-path="images/ae9942a6-datePattern_cometchat_screens-04eda511b487e433042f3278b8caea21.png" />
  </Tab>

  <Tab title="Android">
    <img src="https://mintcdn.com/cometchat-22654f5b-docs-rn-guide-message-privately/2JiXkJ8lq6PmPGlJ/images/706e496e-datePattern_cometchat_screens-891aa823a6e43f5b0c667c493c50d287.png?fit=max&auto=format&n=2JiXkJ8lq6PmPGlJ&q=85&s=3742c890b735eb5db53a254b7efa2999" alt="Image" width="4498" height="3120" data-path="images/706e496e-datePattern_cometchat_screens-891aa823a6e43f5b0c667c493c50d287.png" />
  </Tab>
</Tabs>

#### Subtitle View

You can customize the subtitle view for each conversation item to meet your requirements

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

      const getSubtitleView = (conversation: CometChat.Conversation) =>{
      //custom subtitle view
      }

      return(
        <CometChatConversations
          SubtitleView={getSubtitleView}
        />
      )
    ```
  </Tab>
</Tabs>

Demonstration

<Tabs>
  <Tab title="iOS">
    <img src="https://mintcdn.com/cometchat-22654f5b-docs-rn-guide-message-privately/jpEUuHUk-hvu4tQT/images/a48172ba-subtitleView_cometchat_screens-235f7a267664d4e43043bea7d1f26989.png?fit=max&auto=format&n=jpEUuHUk-hvu4tQT&q=85&s=a82d562189cf322c2c440cc14ce8be10" alt="Image" width="4498" height="3120" data-path="images/a48172ba-subtitleView_cometchat_screens-235f7a267664d4e43043bea7d1f26989.png" />
  </Tab>

  <Tab title="Android">
    <img src="https://mintcdn.com/cometchat-22654f5b-docs-rn-guide-message-privately/19qJLi95IaEk2j9s/images/fff31318-subtitleView_cometchat_screens-1f5abf9140831de807eb73183822b8ff.png?fit=max&auto=format&n=19qJLi95IaEk2j9s&q=85&s=3b8d292d0a3d0a68c821073f65b98a9a" alt="Image" width="4498" height="3120" data-path="images/fff31318-subtitleView_cometchat_screens-1f5abf9140831de807eb73183822b8ff.png" />
  </Tab>
</Tabs>

You can customize the subtitle view by modifying the `getSubtitleView` function as follows:

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


      const getSubtitleView = (conversation: CometChat.Conversation) => {
        const conversationWith: any = conversation.getConversationWith();
        if (conversationWith instanceof CometChat.User) {
          return (
            <Text
              style={{
                fontSize: 12,
                color: currentTheme.palette.getAccent800(),
              }}>
              Last Active At:{' '}
              {conversationWith.getLastActiveAt()
                ? formatTime(conversationWith.getLastActiveAt())
                : '--'}
            </Text>
          );
        } else if (conversationWith instanceof CometChat.Group) {
          return (
            <Text
              style={{
                fontSize: 12,
                color: currentTheme.palette.getAccent800(),
              }}>
              Created At: {formatTime(conversationWith.getCreatedAt())}
            </Text>
          );
        } else {
          return (
            <Text
              style={{
                fontSize: 12,
                color: currentTheme.palette.getAccent800(),
              }}>
              Click To View Chat
            </Text>
          );
        }
      };
    ```
  </Tab>
</Tabs>

#### Swipe Options

This prop will add the array of options on swipe to perform actions on Conversation.

| Name     | Type                                                  | Description                                                                          |
| -------- | ----------------------------------------------------- | ------------------------------------------------------------------------------------ |
| options? | (item: CometChat.Conversation) => CometChatOptions\[] | This prop will add the array of options on swipe to perform actions on Conversation. |

##### Structure of CometChatOptions

| Name            | Type                      | Description                                                                                   |
| --------------- | ------------------------- | --------------------------------------------------------------------------------------------- |
| id              | String                    | Unique identifier for the option                                                              |
| title           | String                    | A text to display below the icon                                                              |
| icon            | ImageType                 | A image to display for the option                                                             |
| titleStyle      | CometChatOptionTitleStyle | Defines the style for the title containing color, fontWeight, fontSize, fontFamily properties |
| iconTint        | string                    | Defines the colour for the icon                                                               |
| backgroundColor | string                    | Defines the colour for the option                                                             |
| onPress         | Function                  | The action to perform when user clicks on option                                              |

Demonstration

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

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

<Tabs>
  <Tab title="TypeScript">
    ```ts theme={null}

      import { CometChatConversations} from '@cometchat/chat-uikit-react-native';
      import Call from './Call.png';

      <CometChatConversations
            options={(conversation: CometChat.Conversation) => {
              const customOptions = [
                {
                  id: "1",
                  //title: "Call",
                  icon: Call,
                  iconTint: "white",
                  backgroundColor: "#6851D6",
                  onPress: () => {
                    //code
                  },
                },
              ];
              return customOptions;
            }}
      />
    ```
  </Tab>
</Tabs>

***

#### Loading State View

You can set a custom loader view using `LoadingStateView` to match the loading view of your app.

<Tabs>
  <Tab title="TypeScript">
    ```ts theme={null}

      const getLoadingStateView = () =>{
        //your custom loading view
      }

      <CometChatConversations
        LoadingStateView={getLoadingStateView()}
      />
    ```
  </Tab>
</Tabs>

Demonstration

<Tabs>
  <Tab title="iOS">
    <img src="https://mintcdn.com/cometchat-22654f5b-docs-rn-guide-message-privately/JSRiWiPGBHsJZFCg/images/9ad8cd45-loadingView_cometchat_screens-4301ca6f32c0b25de9fe2bf2cb29d955.png?fit=max&auto=format&n=JSRiWiPGBHsJZFCg&q=85&s=6287732996335942f82688d5faa3cfc4" alt="Image" width="4498" height="3120" data-path="images/9ad8cd45-loadingView_cometchat_screens-4301ca6f32c0b25de9fe2bf2cb29d955.png" />
  </Tab>

  <Tab title="Android">
    <img src="https://mintcdn.com/cometchat-22654f5b-docs-rn-guide-message-privately/le8ibYc8lBJsShSE/images/540d19be-loadingView_cometchat_screens-7110588799dacdc5ea4e1d303937a2e0.png?fit=max&auto=format&n=le8ibYc8lBJsShSE&q=85&s=a379b8fc73c2ea69d38b5886f6735d10" alt="Image" width="4498" height="3120" data-path="images/540d19be-loadingView_cometchat_screens-7110588799dacdc5ea4e1d303937a2e0.png" />
  </Tab>
</Tabs>

You can customize the loading state view by modifying the `getLoadingStateView` function as follows:

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

      const loadingViewStyle: StyleProp<ViewStyle> = {
        flex: 1,
        alignItems: 'center',
        justifyContent: 'center',
        padding: 10,
        borderColor: 'black',
        borderWidth: 1,
        backgroundColor: '#E8EAE9',
      };

      const getLoadingStateView = () => {
        return (
          <View style= {loadingViewStyle}>
            <Text style={{fontSize: 20, color: "black"}}>Loading...</Text>
          </View>
        );
      };
    ```
  </Tab>
</Tabs>