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

# Call Logs

## Overview

`CometChatCallLogs` is a [Component](/ui-kit/react-native/components-overview#components) that shows the list of Call Logs available. By default, names are shown for all listed users, along with their avatars if available.

<Frame>
  <img src="https://mintcdn.com/cometchat-22654f5b-feature-react-native-sdk-quotedmessage-a/9lHiRWz053XfUHU4/images/7fe2a6db-call_logs-7b4f502153923374898f3887441ab8d2.png?fit=max&auto=format&n=9lHiRWz053XfUHU4&q=85&s=35f5f2d4b3f7f46e25b16a97b28c02e0" width="1280" height="800" data-path="images/7fe2a6db-call_logs-7b4f502153923374898f3887441ab8d2.png" />
</Frame>

## Usage

### Integration

`CometChatCallLogs` being a wrapper component, offers versatility in its integration. It can be seamlessly launched via button clicks or any user-triggered action, enhancing the overall user experience and facilitating smoother interactions within the application.

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

### Actions

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

##### onItemPress

`onItemPress` is triggered when you click on a ListItem of the Call Logs component. By default it initiate a call to the participant associated with the respective ListItem. You can override this action using the following code snippet.

<Tabs>
  <Tab title="App.tsx">
    ```tsx theme={null}
    import { CometChatCallLogs } from "@cometchat/chat-uikit-react-native";
    //code
    const getItemPresshandler = (call: any) => {
      //code
    };
    return (
      <CometChatCallLogs onItemPress={getItemPresshandler} />
    );
    ```
  </Tab>
</Tabs>

***

##### onItemLongPress

Function executed when a callLog item is long-pressed, allowing additional actions like delete or select.

<Tabs>
  <Tab title="App.tsx">
    ```tsx theme={null}
    import { CometChatCallLogs } from "@cometchat/chat-uikit-react-native";
    import { CometChat } from "@cometchat/chat-sdk-react-native";
    //code
    const onItemLongPressHandler = (i: any) => {
      //handle long press
    };

    return <CometChatCallLogs onItemLongPress={onItemLongPressHandler} />;
    ```
  </Tab>
</Tabs>

***

##### onCallIconPress

<Tabs>
  <Tab title="App.tsx">
    ```tsx theme={null}
    import { CometChatCallLogs } from "@cometchat/chat-uikit-react-native";
    import { CometChat } from "@cometchat/chat-sdk-react-native";
    //code
    const getOnCallIconPressHandler = (call: any) => {
      //handle call icon press
    };

    return (
      <CometChatCallLogs
        onCallIconPress={getOnCallIconPressHandler}
      />
    );
    ```
  </Tab>
</Tabs>

***

##### onBack

`onBack` is triggered when you press the back button in the app bar. You can override this action using the following code snippet.

<Tabs>
  <Tab title="App.tsx">
    ```tsx theme={null}
    import { CometChatCallLogs } from "@cometchat/chat-uikit-react-native";
    //code
    const onBackHandler = () => {
      //handle back
    };

    return <CometChatCallLogs onBack={onBackHandler} />;
    ```
  </Tab>
</Tabs>

##### OnError

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

<Tabs>
  <Tab title="App.tsx">
    ```tsx theme={null}
    import { CometChatCallLogs } from "@cometchat/chat-uikit-react-native";
    import { CometChat } from "@cometchat/chat-sdk-react-native";
    //code
    const onErrorHandler = (e: CometChat.CometChatException) => {
      //handle back
    };

    return <CometChatCallLogs onError={onErrorHandler} />;
    ```
  </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.

##### CallLogRequestBuilder

The [CallLogRequestBuilder](/sdk/react-native/call-logs) enables you to filter and customize the Call Log based on available parameters in [CallLogRequestBuilder](/sdk/react-native/call-logs). This feature allows you to create more specific and targeted queries when fetching the call logs. The following are the parameters available in [CallLogRequestBuilder](/sdk/react-native/call-logs)

| Methods              | Type       | Description                                                  |
| -------------------- | ---------- | ------------------------------------------------------------ |
| **setLimit**         | number     | Specifies the number of call logs to fetch.                  |
| **setCallType**      | String     | Sets the type of calls to fetch (call or meet).              |
| **setCallStatus**    | callStatus | Sets the status of calls to fetch (initiated, ongoing, etc.) |
| **setHasRecording**  | boolean    | Sets whether to fetch calls that have recordings.            |
| **setCallCategory**  | string     | Sets the category of calls to fetch (call or meet).          |
| **setCallDirection** | string     | Sets the direction of calls to fetch (incoming or outgoing)  |
| **setUid**           | string     | Sets the UID of the user whose call logs to fetch.           |
| **setGuid**          | string     | Sets the GUID of the user whose call logs to fetch.          |
| **setAuthToken**     | string     | Sets the Auth token of the logged-in user.                   |

**Example**

In the example below, we're filtering Call Logs to show only canceled calls and setting the limit to five.

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

    function App(): React.JSX.Element {
      const [loggedInUser, setLoggedInUser] = useState<CometChat.User>();
      useEffect(() => {
        //code
        CometChatUIKit.login({ uid: "uid" })
          .then(async (user: CometChat.User) => {
            setLoggedInUser(user);
          })
          .catch((error: any) => {
            //handle error
          });
      }, []);

      return (
        <>
          {loggedInUser && (
            <CometChatCallLogs
              hideBackButton={true}
              callLogRequestBuilder={new CallLogRequestBuilder()
                .setLimit(5)
                .setCallStatus("cancelled")
                .setAuthToken(loggedInUser.getAuthToken())}
            />
          )}
        </>
      );
    }
    ```
  </Tab>
</Tabs>

***

### Events

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

The `CometChatCallLogs` component does not have any exposed events.

***

## Customization

To fit your app's design requirements, you can customize the appearance of the CallLog 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.

<Tabs>
  <Tab title="App.tsx">
    ```tsx theme={null}
    import { CometChatCallLogs } from "@cometchat/chat-uikit-react-native";
    //code
    return (
      <CometChatCallLogs
        hideBackButton={true}
        style={{
          titleSeparatorStyle: {
            borderBottomColor: "#F76808",
          },
          titleTextStyle: {
            color: "#F76808",
          },
          itemStyle: {
            avatarStyle: {
              containerStyle: {
                borderRadius: 8,
                backgroundColor: "#FBAA75",
              },
              imageStyle: {
                borderRadius: 8,
              },
            },
          },
        }}
      />
    );
    ```
  </Tab>
</Tabs>

<Frame>
  <img src="https://mintcdn.com/cometchat-22654f5b-feature-react-native-sdk-quotedmessage-a/Zp9d87qbHHZCI7d4/images/d0eb378f-calls_styling-72e5f287e16313403492a56094660446.png?fit=max&auto=format&n=Zp9d87qbHHZCI7d4&q=85&s=2f8530cf31eb36aff3ad1e4be331359d" width="1280" height="800" data-path="images/d0eb378f-calls_styling-72e5f287e16313403492a56094660446.png" />
</Frame>

***

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

| Property                      | Description                                          | Code                                                          |
| ----------------------------- | ---------------------------------------------------- | ------------------------------------------------------------- |
| **datePattern**               | Used to set custom date pattern                      | `datePattern?: DatePattern`                                   |
| **hideBackButton**            | Used to show/hide the back button                    | `hideBackButton?: boolean`                                    |
| **hideError**                 | Used to hide errors                                  | `hideError?: boolean`                                         |
| **outgoingCallConfiguration** | Sets the configurations for outgoing call component. | `outgoingCallConfiguration={outgoingCallConfigurationObject}` |
| **hideHeader**                | Used to toggle visibility of header                  | `hideHeader={true}`                                           |
| **hideLoadingState**          | Used to toggle visibility of Loading state           | `hideLoadingState={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.

#### LoadingView

Allows setting a custom loading view when fetching call logs.

Use Cases:

* Display a spinner animation while loading.
* Show a "Fetching Call History..." message.
* Use a shimmer effect for better UI experience.

<Tabs>
  <Tab title="App.tsx">
    ```tsx theme={null}
    import { CometChatCallLogs } from "@cometchat/chat-uikit-react-native";
    //code
    const getLoadingView = () => {
      //return jsx;
    };
    return <CometChatCallLogs LoadingView={getLoadingView} />;
    ```
  </Tab>
</Tabs>

#### EmptyView

Defines a custom view when no call logs are available.

Use Cases:

* Show a friendly message like "No calls yet!".
* Offer quick actions like "Make a Call".
* Display an illustration/image.

<Tabs>
  <Tab title="App.tsx">
    ```tsx theme={null}
    import { CometChatCallLogs } from "@cometchat/chat-uikit-react-native";
    //code
    const getEmptyView = () => {
      //return jsx;
    };
    return <CometChatCallLogs EmptyView={getEmptyView} />;
    ```
  </Tab>
</Tabs>

***

#### ErrorView

Allows setting a custom error state view when fetching call logs fails.

Use Cases:

* Display a retry button.
* Show a network issue message.
* Provide a troubleshooting guide.

<Tabs>
  <Tab title="App.tsx">
    ```tsx theme={null}
    import { CometChatCallLogs } from "@cometchat/chat-uikit-react-native";
    //code
    const getErrorView = (e: CometChat.CometChatException) => {
      //return jsx;
    };
    return <CometChatCallLogs ErrorView={getErrorView} />;
    ```
  </Tab>
</Tabs>

#### ItemView

Allows setting a custom layout for each call log item.

Use Cases:

* Customize the entire call log card.
* Display additional contact details.
* Use a two-column design for better readability.

<Tabs>
  <Tab title="App.tsx">
    ```tsx theme={null}
    import { CometChatCallLogs } from "@cometchat/chat-uikit-react-native";
    //code
    const getItemView = (call: any) => {
      //return jsx;
    };
    return <CometChatCallLogs ItemView={getItemView} />;
    ```
  </Tab>
</Tabs>

<Frame>
  <img src="https://mintcdn.com/cometchat-22654f5b-feature-react-native-sdk-quotedmessage-a/XXAUCbi4d9er5mBV/images/26e76652-calls_list_item_view-6ab3eea9c5769eac919d78b5a358ae7a.png?fit=max&auto=format&n=XXAUCbi4d9er5mBV&q=85&s=ec79314a0338cc91f61a2eebd070f59f" width="1280" height="800" data-path="images/26e76652-calls_list_item_view-6ab3eea9c5769eac919d78b5a358ae7a.png" />
</Frame>

#### TitleView

Allows setting a custom title view, typically used for the caller’s name or number.

Use Cases:

* Display caller’s full name.
* Show a business label for saved contacts.
* Use bold text for unknown numbers.

<Tabs>
  <Tab title="App.tsx">
    ```tsx theme={null}
    import { CometChatCallLogs } from "@cometchat/chat-uikit-react-native";
    //code
    const getTitleView = (call: any) => {
      //return jsx;
    };
    return <CometChatCallLogs TitleView={getTitleView} />;
    ```
  </Tab>
</Tabs>

#### LeadingView

Customizes the leading view, usually the caller’s avatar or profile picture.

Use Cases:

* Display a profile picture.
* Show a call type icon (missed, received, dialed).
* Indicate call status (e.g., missed calls in red).

<Tabs>
  <Tab title="App.tsx">
    ```tsx theme={null}
    import { CometChatCallLogs } from "@cometchat/chat-uikit-react-native";
    //code
    const getLeadingView = (call: any) => {
      //return jsx;
    };
    return <CometChatCallLogs LeadingView={getLeadingView} />;
    ```
  </Tab>
</Tabs>

#### SubtitleView

Enables customizing the subtitle view, usually used for additional call details.

Use Cases:

* Display call type (Missed, Received, Outgoing).
* Show network strength indicators.
* Include call duration in a more readable format.

<Tabs>
  <Tab title="App.tsx">
    ```tsx theme={null}
    import { CometChatCallLogs } from "@cometchat/chat-uikit-react-native";
    //code
    const getSubtitleView = (call: any) => {
      //return jsx;
    };
    return <CometChatCallLogs SubtitleView={getSubtitleView} />;
    ```
  </Tab>
</Tabs>

**Example**

<Frame>
  <img src="https://mintcdn.com/cometchat-22654f5b-feature-react-native-sdk-quotedmessage-a/c-F07JuWM49qOkUs/images/c0c5e53a-calls_subtitle_view-23dbb0f58400e2d8e4b4b1112eb75757.png?fit=max&auto=format&n=c-F07JuWM49qOkUs&q=85&s=6e6d1d528ad63551ede4512957816147" width="1280" height="800" data-path="images/c0c5e53a-calls_subtitle_view-23dbb0f58400e2d8e4b4b1112eb75757.png" />
</Frame>

***

#### TrailingView

Customizes the trailing section, typically for call duration or actions.

Use Cases:

* Display call duration.
* Add a "Call Again" button.
* Show call timestamps.

<Tabs>
  <Tab title="App.tsx">
    ```tsx theme={null}
    import { CometChatCallLogs } from "@cometchat/chat-uikit-react-native";
    //code
    const getTrailingView = (call: any) => {
      //return jsx;
    };
    return <CometChatCallLogs TrailingView={getTrailingView} />;
    ```
  </Tab>
</Tabs>

**Example**

<Frame>
  <img src="https://mintcdn.com/cometchat-22654f5b-feature-react-native-sdk-quotedmessage-a/zd9jYi4xvTDJ3vRH/images/b471a86b-calls_tail_view-c2c6951de1fd0e56ac3a8b3038fea648.png?fit=max&auto=format&n=zd9jYi4xvTDJ3vRH&q=85&s=e8ec0aba594fa4d7e3bfc26687ccf1ce" width="1280" height="800" data-path="images/b471a86b-calls_tail_view-c2c6951de1fd0e56ac3a8b3038fea648.png" />
</Frame>

#### AppBarOptions

You can set Custom `AppBarOptions` to the `CometChatConversations` widget.

Use Cases:

* Filter Call Logs

<Tabs>
  <Tab title="App.tsx">
    ```tsx theme={null}
    import { CometChatCallLogs } from "@cometchat/chat-uikit-react-native";
    //code
    const getAuxiliaryAppBarOptions = (): JSX.Element => {
      return (
        <TouchableOpacity
          style={styles.button}
          onPress={() => {
            /* code */
          }}
        >
          <Image source={FilterIcon} style={styles.image} />
        </TouchableOpacity>
      );
    };
    return (
      <CometChatCallLogs
        AppBarOptions={getAuxiliaryAppBarOptions}
      />
    );
    ```
  </Tab>
</Tabs>

#### options

Defines the available actions users can perform on a call log entry, such as deleting, marking as spam, or calling back.

Use Cases:

* Provide quick call-back options.
* Allow users to block a number.
* Enable deleting multiple call logs.

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

    const setMyOptions = (call: CometChat.Call) => {
        return [
          //options
        ];
      };


    return (
      <CometChatCallLogs
        options={setMyOptions}
      />
    );
    ```
  </Tab>
</Tabs>

#### addOptions

Adds custom actions to the existing call log options.

Use Cases:

* Add favorite/star call log option.
* Add favorite/star call log option.
* Provide an archive feature.

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

    const addOptions = (call: CometChat.Call) => {
        return [
          //options
        ];
      };


    return (
      <CometChatCallLogs
        addOptions={addOptions}
      />
    );
    ```
  </Tab>
</Tabs>

## Customization

Configurations offer the ability to customize the properties of each widget within a Composite Widget.

CometChatCallLogs has CometChatOutgoingCall widget. Hence, each of these widgets will have its individual \`Configuration\`\`.

* Configurations expose properties that are available in its individual widgets.

### Outgoing Call

You can customize the properties of the OutGoing Call by making use of the OutgoingCallConfiguration. You can accomplish this by employing the outgoingCallConfiguration props as demonstrated below:

```javascript theme={null}
import { CometChatCallLogs } from "@cometchat/chat-uikit-react-native";
//code

return (
  <CometChatCallLogs
    outgoingCallConfiguration={{
      SubtitleView: () => {
        return <Text style={{color: '#FFC0CB'}}>Outgoing Call</Text>;
      },
      style: {
        containerStyle: {
          backgroundColor: 'FFE4EBF5',
        },
      },
    }}
  />
);
```