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

# Recording

> Use CometChat Calls SDK v5 recording on React Native to start, stop, access, and manage recordings for supported call sessions.

The CometChat Calls SDK supports recording call sessions. Recordings can be started manually or automatically when the call begins.

## Enable Recording Button

Show the recording button in the call UI:

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

const sessionSettings = {
  hideRecordingButton: false,
};
```

## Auto-Start Recording

Start recording automatically when the call begins:

```tsx theme={null}
const sessionSettings = {
  hideRecordingButton: false,
  autoStartRecording: true,
};
```

## Start Recording Programmatically

Start recording during an active call:

```tsx theme={null}
CometChatCalls.startRecording();
```

## Stop Recording

Stop an active recording:

```tsx theme={null}
CometChatCalls.stopRecording();
```

## Recording Events

Listen for recording state changes:

### Using addEventListener

```tsx theme={null}
const controller = new AbortController();

CometChatCalls.addEventListener(
  'onRecordingStarted',
  () => {
    console.log('Recording started');
  },
  { signal: controller.signal }
);

CometChatCalls.addEventListener(
  'onRecordingStopped',
  () => {
    console.log('Recording stopped');
  },
  { signal: controller.signal }
);

// Cleanup — removes all listeners at once
controller.abort();
```

### Participant Recording Events

Listen when other participants start or stop recording:

```tsx theme={null}
CometChatCalls.addEventListener('onParticipantStartedRecording', (participant) => {
  console.log(`${participant.name} started recording`);
});

CometChatCalls.addEventListener('onParticipantStoppedRecording', (participant) => {
  console.log(`${participant.name} stopped recording`);
});
```

## Recording Button Click Event

Listen for when the recording button is clicked:

```tsx theme={null}
CometChatCalls.addEventListener('onRecordingToggleButtonClicked', () => {
  console.log('Recording button clicked');
});
```

## Access Recordings

Recordings are available through the call logs after the call ends. Use the Chat SDK to retrieve recordings:

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

async function getCallRecordings(sessionId: string) {
  const callLogRequest = new CometChat.CallLogRequestBuilder()
    .setLimit(1)
    .build();

  try {
    const callLogs = await callLogRequest.fetchNext();
    const callLog = callLogs.find((log) => log.sessionId === sessionId);
    
    if (callLog && callLog.recordings) {
      console.log('Recordings:', callLog.recordings);
      return callLog.recordings;
    }
    return [];
  } catch (error) {
    console.error('Error fetching recordings:', error);
    throw error;
  }
}
```

## Recording Object

Each recording contains:

| Property       | Type   | Description                   |
| -------------- | ------ | ----------------------------- |
| `rid`          | string | Recording ID                  |
| `recordingUrl` | string | URL to download the recording |
| `startTime`    | number | Recording start timestamp     |
| `endTime`      | number | Recording end timestamp       |
| `duration`     | number | Recording duration in seconds |

## Complete Example

```tsx theme={null}
import React, { useState, useEffect } from 'react';
import { View, TouchableOpacity, Text, StyleSheet } from 'react-native';
import { CometChatCalls } from '@cometchat/calls-sdk-react-native';

function RecordingControls() {
  const [isRecording, setIsRecording] = useState(false);

  useEffect(() => {
    const controller = new AbortController();
    const { signal } = controller;

    CometChatCalls.addEventListener(
      'onRecordingStarted',
      () => {
        setIsRecording(true);
      },
      { signal }
    );

    CometChatCalls.addEventListener(
      'onRecordingStopped',
      () => {
        setIsRecording(false);
      },
      { signal }
    );

    return () => controller.abort();
  }, []);

  const toggleRecording = () => {
    if (isRecording) {
      CometChatCalls.stopRecording();
    } else {
      CometChatCalls.startRecording();
    }
  };

  return (
    <TouchableOpacity
      style={[styles.button, isRecording && styles.recordingButton]}
      onPress={toggleRecording}
    >
      <View style={[styles.indicator, isRecording && styles.recordingIndicator]} />
      <Text style={styles.buttonText}>
        {isRecording ? 'Stop Recording' : 'Start Recording'}
      </Text>
    </TouchableOpacity>
  );
}

const styles = StyleSheet.create({
  button: {
    flexDirection: 'row',
    alignItems: 'center',
    backgroundColor: '#333',
    paddingHorizontal: 16,
    paddingVertical: 12,
    borderRadius: 8,
    gap: 8,
  },
  recordingButton: {
    backgroundColor: '#ff4444',
  },
  indicator: {
    width: 12,
    height: 12,
    borderRadius: 6,
    backgroundColor: '#666',
  },
  recordingIndicator: {
    backgroundColor: '#fff',
  },
  buttonText: {
    color: '#fff',
    fontSize: 14,
    fontWeight: '600',
  },
});

export default RecordingControls;
```

## Related Documentation

* [Call Logs](/calls/react-native/call-logs) - Access call history and recordings
* [Session Settings](/calls/react-native/session-settings) - Configure recording options
* [Events](/calls/react-native/events) - Handle recording events