> ## Documentation Index
> Fetch the complete documentation index at: https://www.cometchat.com/docs/llms.txt
> Use this file to discover all available pages before exploring further.

# Call Logs

> CometChat Calling SDK v5 - Call Logs for React Native

Call logs provide a history of calls made through your application. You can retrieve call logs using the CometChat Chat SDK's call log APIs.

<Note>
  Call logs are managed by the CometChat Chat SDK, not the Calls SDK. Ensure you have the Chat SDK integrated to access call history.
</Note>

## Prerequisites

To use call logs, you need:

1. CometChat Chat SDK integrated (`@cometchat/chat-sdk-react-native`)
2. User authenticated with the Chat SDK

## Retrieve Call Logs

Use the `CallLogRequestBuilder` from the Chat SDK to fetch call logs:

```tsx theme={null}
import { CometChat } from '@cometchat/chat-sdk-react-native';

async function fetchCallLogs() {
  const callLogRequest = new CometChat.CallLogRequestBuilder()
    .setLimit(30)
    .setCallStatus('all') // 'all', 'initiated', 'ongoing', 'ended', 'cancelled', 'rejected', 'busy', 'unanswered'
    .build();

  try {
    const callLogs = await callLogRequest.fetchNext();
    console.log('Call logs:', callLogs);
    return callLogs;
  } catch (error) {
    console.error('Error fetching call logs:', error);
    throw error;
  }
}
```

## CallLogRequestBuilder Options

| Method                      | Type   | Description                                             |
| --------------------------- | ------ | ------------------------------------------------------- |
| `setLimit(limit)`           | number | Maximum number of logs to fetch (default: 30, max: 100) |
| `setCallStatus(status)`     | string | Filter by call status                                   |
| `setCallType(type)`         | string | Filter by call type (`audio` or `video`)                |
| `setCallCategory(category)` | string | Filter by category (`call` for direct calls)            |
| `setAuthToken(token)`       | string | Auth token for the request                              |

### Call Status Values

| Status       | Description                      |
| ------------ | -------------------------------- |
| `all`        | All call logs                    |
| `initiated`  | Calls that were initiated        |
| `ongoing`    | Currently active calls           |
| `ended`      | Completed calls                  |
| `cancelled`  | Calls cancelled by the initiator |
| `rejected`   | Calls rejected by the receiver   |
| `busy`       | Calls where receiver was busy    |
| `unanswered` | Calls that weren't answered      |

## Call Log Object

Each call log contains:

| Property       | Type       | Description                       |
| -------------- | ---------- | --------------------------------- |
| `sessionId`    | string     | Unique session identifier         |
| `initiator`    | User       | User who initiated the call       |
| `receiver`     | User/Group | Call recipient                    |
| `callStatus`   | string     | Final status of the call          |
| `callType`     | string     | `audio` or `video`                |
| `initiatedAt`  | number     | Timestamp when call was initiated |
| `joinedAt`     | number     | Timestamp when call was joined    |
| `endedAt`      | number     | Timestamp when call ended         |
| `duration`     | number     | Call duration in seconds          |
| `participants` | array      | List of participants              |
| `recordings`   | array      | List of recordings (if any)       |

## Filter by User

Get call logs for a specific user:

```tsx theme={null}
const callLogRequest = new CometChat.CallLogRequestBuilder()
  .setLimit(30)
  .setUid('user_uid')
  .build();
```

## Filter by Group

Get call logs for a specific group:

```tsx theme={null}
const callLogRequest = new CometChat.CallLogRequestBuilder()
  .setLimit(30)
  .setGuid('group_guid')
  .build();
```

## Pagination

Fetch call logs in pages:

```tsx theme={null}
import { CometChat } from '@cometchat/chat-sdk-react-native';

class CallLogManager {
  private callLogRequest: CometChat.CallLogRequest;

  constructor() {
    this.callLogRequest = new CometChat.CallLogRequestBuilder()
      .setLimit(30)
      .build();
  }

  async fetchNextPage() {
    try {
      const callLogs = await this.callLogRequest.fetchNext();
      return callLogs;
    } catch (error) {
      console.error('Error fetching call logs:', error);
      throw error;
    }
  }
}

// Usage
const manager = new CallLogManager();

// First page
const page1 = await manager.fetchNextPage();

// Next page
const page2 = await manager.fetchNextPage();
```

## Complete Example

```tsx theme={null}
import React, { useState, useEffect, useCallback } from 'react';
import { View, FlatList, Text, StyleSheet, ActivityIndicator } from 'react-native';
import { CometChat } from '@cometchat/chat-sdk-react-native';

interface CallLog {
  sessionId: string;
  initiator: { uid: string; name: string };
  receiver: { uid: string; name: string };
  callStatus: string;
  callType: string;
  initiatedAt: number;
  duration: number;
}

function CallLogsScreen() {
  const [callLogs, setCallLogs] = useState<CallLog[]>([]);
  const [loading, setLoading] = useState(true);
  const [loadingMore, setLoadingMore] = useState(false);
  const [callLogRequest, setCallLogRequest] = useState<CometChat.CallLogRequest | null>(null);

  useEffect(() => {
    const request = new CometChat.CallLogRequestBuilder()
      .setLimit(30)
      .build();
    setCallLogRequest(request);
    fetchCallLogs(request);
  }, []);

  const fetchCallLogs = async (request: CometChat.CallLogRequest) => {
    try {
      const logs = await request.fetchNext();
      setCallLogs(logs);
    } catch (error) {
      console.error('Error fetching call logs:', error);
    } finally {
      setLoading(false);
    }
  };

  const loadMore = useCallback(async () => {
    if (!callLogRequest || loadingMore) return;

    setLoadingMore(true);
    try {
      const moreLogs = await callLogRequest.fetchNext();
      setCallLogs((prev) => [...prev, ...moreLogs]);
    } catch (error) {
      console.error('Error loading more:', error);
    } finally {
      setLoadingMore(false);
    }
  }, [callLogRequest, loadingMore]);

  const formatDuration = (seconds: number) => {
    const mins = Math.floor(seconds / 60);
    const secs = seconds % 60;
    return `${mins}:${secs.toString().padStart(2, '0')}`;
  };

  const formatDate = (timestamp: number) => {
    return new Date(timestamp * 1000).toLocaleString();
  };

  const renderCallLog = ({ item }: { item: CallLog }) => (
    <View style={styles.callLogItem}>
      <View style={styles.callInfo}>
        <Text style={styles.participantName}>
          {item.initiator.name} → {item.receiver.name}
        </Text>
        <Text style={styles.callDetails}>
          {item.callType} • {item.callStatus}
        </Text>
        <Text style={styles.callTime}>{formatDate(item.initiatedAt)}</Text>
      </View>
      <Text style={styles.duration}>
        {item.duration > 0 ? formatDuration(item.duration) : '-'}
      </Text>
    </View>
  );

  if (loading) {
    return (
      <View style={styles.centered}>
        <ActivityIndicator size="large" />
      </View>
    );
  }

  return (
    <FlatList
      data={callLogs}
      keyExtractor={(item) => item.sessionId}
      renderItem={renderCallLog}
      onEndReached={loadMore}
      onEndReachedThreshold={0.5}
      ListFooterComponent={
        loadingMore ? <ActivityIndicator style={styles.footer} /> : null
      }
      ListEmptyComponent={
        <View style={styles.centered}>
          <Text style={styles.emptyText}>No call logs</Text>
        </View>
      }
    />
  );
}

const styles = StyleSheet.create({
  centered: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
  },
  callLogItem: {
    flexDirection: 'row',
    justifyContent: 'space-between',
    alignItems: 'center',
    padding: 16,
    borderBottomWidth: 1,
    borderBottomColor: '#eee',
  },
  callInfo: {
    flex: 1,
  },
  participantName: {
    fontSize: 16,
    fontWeight: '600',
  },
  callDetails: {
    fontSize: 14,
    color: '#666',
    marginTop: 4,
  },
  callTime: {
    fontSize: 12,
    color: '#999',
    marginTop: 4,
  },
  duration: {
    fontSize: 14,
    color: '#333',
  },
  footer: {
    padding: 16,
  },
  emptyText: {
    fontSize: 16,
    color: '#999',
  },
});

export default CallLogsScreen;
```

## Related Documentation

* [Recording](/calls/react-native/recording) - Access call recordings
* [Ringing](/calls/react-native/ringing) - Implement call notifications