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

# Call Logs

> Display and manage the list of call history with CometChatCallLogs component in React Native UI Kit, including missed, received, and outgoing calls.

<Accordion title="AI Integration Quick Reference">
  ```json theme={null}
  {
    "component": "CometChatCallLogs",
    "package": "@cometchat/chat-uikit-react-native",
    "import": "import { CometChatCallLogs } from \"@cometchat/chat-uikit-react-native\";",
    "description": "Scrollable list of call history showing missed, received, and outgoing calls.",
    "props": {
      "data": {
        "callLogRequestBuilder": {
          "type": "CallLogRequestBuilder",
          "note": "Pass the builder, not the result of .build()"
        },
        "datePattern": {
          "type": "DatePattern",
          "note": "Custom date format for call timestamps"
        }
      },
      "callbacks": {
        "onItemPress": "(call: any) => void",
        "onItemLongPress": "(prop: { call: any }) => void",
        "onCallIconPress": "(item: any) => void",
        "onBack": "() => void",
        "onError": "(error: CometChat.CometChatException) => void",
        "onLoad": "(list: any[]) => void",
        "onEmpty": "() => void"
      },
      "visibility": {
        "showBackButton": { "type": "boolean", "default": true },
        "hideError": { "type": "boolean", "default": false },
        "hideHeader": { "type": "boolean", "default": false },
        "hideLoadingState": { "type": "boolean", "default": false }
      },
      "viewSlots": {
        "ItemView": "(call: any) => JSX.Element",
        "LeadingView": "(call: any) => JSX.Element",
        "TitleView": "(call: any) => JSX.Element",
        "SubtitleView": "(call: any) => JSX.Element",
        "TrailingView": "(call: any, defaultOnPress?: (call: any) => void) => JSX.Element",
        "LoadingView": "() => JSX.Element",
        "EmptyView": "() => JSX.Element",
        "ErrorView": "(e: CometChat.CometChatException) => JSX.Element",
        "AppBarOptions": "() => JSX.Element"
      }
    },
    "compositionExample": {
      "description": "Call history list with call-back functionality",
      "components": [
        "CometChatCallLogs",
        "CometChatOutgoingCall"
      ],
      "flow": "onItemPress initiates call to participant, onCallIconPress triggers call-back"
    }
  }
  ```
</Accordion>

## Where It Fits

`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-docs-rn-guide-message-privately/Gp90C5sdVtuRR4t7/images/7fe2a6db-call_logs-7b4f502153923374898f3887441ab8d2.png?fit=max&auto=format&n=Gp90C5sdVtuRR4t7&q=85&s=14435b9084f986487b17304c759a86a2" width="1280" height="800" data-path="images/7fe2a6db-call_logs-7b4f502153923374898f3887441ab8d2.png" />
</Frame>

***

## Minimal Render

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

function CallLogsDemo() {
  return <CometChatCallLogs />;
}
```

***

## Filtering Call Logs

Pass a `CallLogRequestBuilder` to `callLogRequestBuilder`. Pass the builder instance — not the result of `.build()`.

```tsx lines theme={null}
import { CometChatCallLogs } from "@cometchat/chat-uikit-react-native";
import { CallLogRequestBuilder } from "@cometchat/chat-sdk-react-native";

function FilteredCallLogs() {
  const callLogRequestBuilder = new CallLogRequestBuilder()
    .setLimit(20)
    .setCallStatus("cancelled")
    .setAuthToken(loggedInUser.getAuthToken());

  return (
    <CometChatCallLogs
      callLogRequestBuilder={callLogRequestBuilder}
    />
  );
}
```

### Filter Recipes

| Recipe                | Code                                                       |
| --------------------- | ---------------------------------------------------------- |
| Limit to 20 per page  | `new CallLogRequestBuilder().setLimit(20)`                 |
| Only cancelled calls  | `new CallLogRequestBuilder().setCallStatus("cancelled")`   |
| Only incoming calls   | `new CallLogRequestBuilder().setCallDirection("incoming")` |
| Only outgoing calls   | `new CallLogRequestBuilder().setCallDirection("outgoing")` |
| Calls with recordings | `new CallLogRequestBuilder().setHasRecording(true)`        |
| Filter by user UID    | `new CallLogRequestBuilder().setUid("user_uid")`           |

***

## Actions and Events

### Callback Props

#### onItemPress

Fires when a call log row is tapped. By default initiates a call to the participant.

```tsx lines theme={null}
onItemPress?: (call: any) => void
```

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

function CallLogsWithPress() {
  const handleItemPress = (call: any) => {
    console.log("Selected call:", call);
  };

  return <CometChatCallLogs onItemPress={handleItemPress} />;
}
```

#### onItemLongPress

Fires when a call log item is long-pressed, allowing additional actions like delete or select.

```tsx lines theme={null}
onItemLongPress?: (prop: { call: any }) => void
```

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

function CallLogsWithLongPress() {
  const handleLongPress = (prop: { call: any }) => {
    console.log("Long pressed:", prop.call);
  };

  return <CometChatCallLogs onItemLongPress={handleLongPress} />;
}
```

#### onCallIconPress

Fires when the call icon is pressed.

```tsx lines theme={null}
onCallIconPress?: (item: any) => void
```

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

function CallLogsWithCallIcon() {
  const handleCallIconPress = (call: any) => {
    console.log("Call icon pressed:", call);
  };

  return <CometChatCallLogs onCallIconPress={handleCallIconPress} />;
}
```

#### onBack

Fires when the back button in the app bar is pressed.

```tsx lines theme={null}
onBack?: () => void
```

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

function CallLogsWithBack() {
  return (
    <CometChatCallLogs
      showBackButton={true}
      onBack={() => {
        console.log("Back pressed");
      }}
    />
  );
}
```

#### onError

Fires on internal errors (network failure, auth issue, SDK exception).

```tsx lines theme={null}
onError?: (e: CometChat.CometChatException) => void
```

```tsx lines theme={null}
import { CometChatCallLogs } from "@cometchat/chat-uikit-react-native";
import { CometChat } from "@cometchat/chat-sdk-react-native";

function CallLogsWithError() {
  return (
    <CometChatCallLogs
      onError={(error: CometChat.CometChatException) => {
        console.error("CallLogs error:", error);
      }}
    />
  );
}
```

#### onLoad

Fires when the list is successfully fetched and loaded.

```tsx lines theme={null}
onLoad?: (list: any[]) => void
```

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

function CallLogsWithLoad() {
  const handleLoad = (list: any[]) => {
    console.log("Call logs loaded:", list.length);
  };

  return <CometChatCallLogs onLoad={handleLoad} />;
}
```

#### onEmpty

Fires when the call log list is empty.

```tsx lines theme={null}
onEmpty?: () => void
```

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

function CallLogsWithEmpty() {
  return (
    <CometChatCallLogs
      onEmpty={() => {
        console.log("No call logs available");
      }}
    />
  );
}
```

***

## Custom View Slots

Each slot replaces a section of the default UI. Slots that accept a call parameter receive the call log object for that row.

| Slot            | Signature                                          | Replaces                 |
| --------------- | -------------------------------------------------- | ------------------------ |
| `ItemView`      | `(call: any) => JSX.Element`                       | Entire list item row     |
| `LeadingView`   | `(call: any) => JSX.Element`                       | Avatar / left section    |
| `TitleView`     | `(call: any) => JSX.Element`                       | Caller name / title text |
| `SubtitleView`  | `(call: any) => JSX.Element`                       | Call type / details      |
| `TrailingView`  | `(call: any, defaultOnPress?) => JSX.Element`      | Duration / right section |
| `LoadingView`   | `() => JSX.Element`                                | Loading spinner          |
| `EmptyView`     | `() => JSX.Element`                                | Empty state              |
| `ErrorView`     | `(e: CometChat.CometChatException) => JSX.Element` | Error state              |
| `AppBarOptions` | `() => JSX.Element`                                | Header bar options       |

### LoadingView

Custom view displayed when data is being fetched.

```tsx lines theme={null}
LoadingView?: () => JSX.Element
```

```tsx lines theme={null}
import { CometChatCallLogs } from "@cometchat/chat-uikit-react-native";
import { Text } from "react-native";

function LoadingViewDemo() {
  const getLoadingView = (): JSX.Element => {
    return <Text>Loading call logs...</Text>;
  };

  return <CometChatCallLogs LoadingView={getLoadingView} />;
}
```

### EmptyView

Custom view displayed when there are no call logs.

```tsx lines theme={null}
EmptyView?: () => JSX.Element
```

```tsx lines theme={null}
import { CometChatCallLogs } from "@cometchat/chat-uikit-react-native";
import { Text } from "react-native";

function EmptyViewDemo() {
  const getEmptyView = (): JSX.Element => {
    return <Text>No calls yet. Make your first call!</Text>;
  };

  return <CometChatCallLogs EmptyView={getEmptyView} />;
}
```

### ErrorView

Custom view displayed when an error occurs.

```tsx lines theme={null}
ErrorView?: (e: CometChat.CometChatException) => JSX.Element
```

```tsx lines theme={null}
import { CometChatCallLogs } from "@cometchat/chat-uikit-react-native";
import { CometChat } from "@cometchat/chat-sdk-react-native";
import { Text } from "react-native";

function ErrorViewDemo() {
  const getErrorView = (e: CometChat.CometChatException): JSX.Element => {
    return <Text>Error loading calls. Please try again.</Text>;
  };

  return <CometChatCallLogs ErrorView={getErrorView} />;
}
```

### ItemView

Custom view for the entire list item row.

```tsx lines theme={null}
ItemView?: (call: any) => JSX.Element
```

<Frame>
  <img src="https://mintcdn.com/cometchat-22654f5b-docs-rn-guide-message-privately/Xgdtn9VZPDi47bm-/images/26e76652-calls_list_item_view-6ab3eea9c5769eac919d78b5a358ae7a.png?fit=max&auto=format&n=Xgdtn9VZPDi47bm-&q=85&s=d13874c5a43c4ecaf8da73d2cfcf8213" width="1280" height="800" data-path="images/26e76652-calls_list_item_view-6ab3eea9c5769eac919d78b5a358ae7a.png" />
</Frame>

```tsx lines theme={null}
import { CometChatCallLogs } from "@cometchat/chat-uikit-react-native";
import { View, Text } from "react-native";

function ItemViewDemo() {
  const getItemView = (call: any): JSX.Element => {
    return (
      <View style={{ padding: 16, flexDirection: 'row' }}>
        <Text style={{ flex: 1 }}>{call.getInitiator().getName()}</Text>
        <Text>{call.getStatus()}</Text>
      </View>
    );
  };

  return <CometChatCallLogs ItemView={getItemView} />;
}
```

### SubtitleView

Custom view for the call type / details.

```tsx lines theme={null}
SubtitleView?: (call: any) => JSX.Element
```

<Frame>
  <img src="https://mintcdn.com/cometchat-22654f5b-docs-rn-guide-message-privately/FGBCGWXGo5d9bVxR/images/c0c5e53a-calls_subtitle_view-23dbb0f58400e2d8e4b4b1112eb75757.png?fit=max&auto=format&n=FGBCGWXGo5d9bVxR&q=85&s=1f8fea540f5a05a434e300224a6ae102" width="1280" height="800" data-path="images/c0c5e53a-calls_subtitle_view-23dbb0f58400e2d8e4b4b1112eb75757.png" />
</Frame>

```tsx lines theme={null}
import { CometChatCallLogs } from "@cometchat/chat-uikit-react-native";
import { Text } from "react-native";

function SubtitleViewDemo() {
  const getSubtitleView = (call: any): JSX.Element => {
    return (
      <Text style={{ color: '#727272', fontSize: 12 }}>
        {call.getStatus()} • {call.getDuration()}s
      </Text>
    );
  };

  return <CometChatCallLogs SubtitleView={getSubtitleView} />;
}
```

### TrailingView

Custom view for the duration / right section.

```tsx lines theme={null}
TrailingView?: (call: any, defaultOnPress?: (call: any) => void) => JSX.Element
```

<Frame>
  <img src="https://mintcdn.com/cometchat-22654f5b-docs-rn-guide-message-privately/fxK75AS6FzDL1Oqo/images/b471a86b-calls_tail_view-c2c6951de1fd0e56ac3a8b3038fea648.png?fit=max&auto=format&n=fxK75AS6FzDL1Oqo&q=85&s=9f4d8bacd54e4777cf2d69f737642e45" width="1280" height="800" data-path="images/b471a86b-calls_tail_view-c2c6951de1fd0e56ac3a8b3038fea648.png" />
</Frame>

```tsx lines theme={null}
import { CometChatCallLogs } from "@cometchat/chat-uikit-react-native";
import { TouchableOpacity, Text } from "react-native";

function TrailingViewDemo() {
  const getTrailingView = (call: any, defaultOnPress?: (call: any) => void): JSX.Element => {
    return (
      <TouchableOpacity onPress={() => defaultOnPress?.(call)}>
        <Text>📞 Call Back</Text>
      </TouchableOpacity>
    );
  };

  return <CometChatCallLogs TrailingView={getTrailingView} />;
}
```

### AppBarOptions

Custom view for the header bar options.

```tsx lines theme={null}
import { CometChatCallLogs } from "@cometchat/chat-uikit-react-native";
import { TouchableOpacity, Image } from "react-native";

function AppBarOptionsDemo() {
  return (
    <CometChatCallLogs
      AppBarOptions={() => {
        return (
          <TouchableOpacity onPress={() => console.log("Filter pressed")}>
            <Image source={FilterIcon} style={{ width: 24, height: 24 }} />
          </TouchableOpacity>
        );
      }}
    />
  );
}
```

***

## Styling

Using Style you can customize the look and feel of the component in your app. Pass a styling object as a prop to the `CometChatCallLogs` component.

<Frame>
  <img src="https://mintcdn.com/cometchat-22654f5b-docs-rn-guide-message-privately/xIG5VBdyNJ5cYSqE/images/d0eb378f-calls_styling-72e5f287e16313403492a56094660446.png?fit=max&auto=format&n=xIG5VBdyNJ5cYSqE&q=85&s=c9a98d867c580745a4a5dc651a2b5300" width="1280" height="800" data-path="images/d0eb378f-calls_styling-72e5f287e16313403492a56094660446.png" />
</Frame>

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

function StylingDemo() {
  return (
    <CometChatCallLogs
      hideBackButton={true}
      style={{
        titleSeparatorStyle: {
          borderBottomColor: "#F76808",
        },
        titleTextStyle: {
          color: "#F76808",
        },
        itemStyle: {
          avatarStyle: {
            containerStyle: {
              borderRadius: 8,
              backgroundColor: "#FBAA75",
            },
            imageStyle: {
              borderRadius: 8,
            },
          },
        },
      }}
    />
  );
}
```

### Visibility Props

| Property           | Description                                         | Code                         |
| ------------------ | --------------------------------------------------- | ---------------------------- |
| `showBackButton`   | Toggle visibility of the back button in the app bar | `showBackButton?: boolean`   |
| `hideError`        | Hide error state on fetching call logs              | `hideError?: boolean`        |
| `hideHeader`       | Toggle visibility for the toolbar/header bar        | `hideHeader?: boolean`       |
| `hideLoadingState` | Toggle visibility of loading state                  | `hideLoadingState?: boolean` |

### Outgoing Call Configuration

You can customize the properties of the OutGoing Call by making use of the `outgoingCallConfiguration` prop:

```tsx lines theme={null}
import { CometChatCallLogs } from "@cometchat/chat-uikit-react-native";
import { Text } from "react-native";

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

***

## Next Steps

<CardGroup cols={2}>
  <Card title="Incoming Call" icon="phone-arrow-down-left" href="/ui-kit/react-native/incoming-call">
    Display and handle incoming calls
  </Card>

  <Card title="Outgoing Call" icon="phone-arrow-up-right" href="/ui-kit/react-native/outgoing-call">
    Display and manage outgoing calls
  </Card>

  <Card title="Call Buttons" icon="phone" href="/ui-kit/react-native/call-buttons">
    Add voice and video call buttons to your UI
  </Card>

  <Card title="Call Features" icon="video" href="/ui-kit/react-native/call-features">
    Overview of all calling features
  </Card>
</CardGroup>