Call Logs

CometChat Calling SDK v5 - Beta Release - 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.

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

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:

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:

const callLogRequest = new CometChat.CallLogRequestBuilder()
  .setLimit(30)
  .setUid('user_uid')
  .build();

Filter by Group

Get call logs for a specific group:

const callLogRequest = new CometChat.CallLogRequestBuilder()
  .setLimit(30)
  .setGuid('group_guid')
  .build();

Pagination

Fetch call logs in pages:

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

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 - Access call recordings
• Ringing - Implement call notifications