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

# Actions

> CometChat Calling SDK v5 - Actions for React Native

Control the active call session programmatically using the static methods on `CometChatCalls`. These methods allow you to manage audio, video, screen sharing, and other call features.

## Audio Controls

### Mute Audio

Mute the local user's microphone:

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

### Unmute Audio

Unmute the local user's microphone:

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

## Video Controls

### Pause Video

Stop sending the local user's video:

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

### Resume Video

Resume sending the local user's video:

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

### Switch Camera

Toggle between front and rear cameras:

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

## Session Control

### Leave Session

End the call and leave the session:

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

<Note>
  The `leaveSession()` method ends the call for the local user. Other participants will remain in the call unless they also leave.
</Note>

## Screen Sharing

### Start Screen Sharing

Begin sharing your screen with other participants:

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

### Stop Screen Sharing

Stop sharing your screen:

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

<Note>
  Screen sharing requires additional platform-specific configuration. See [Screen Sharing](/calls/react-native/screen-sharing) for setup instructions.
</Note>

## Raise Hand

### Raise Hand

Signal to other participants that you want attention:

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

### Lower Hand

Lower your raised hand:

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

## Layout Control

### Set Layout

Change the call layout programmatically:

```tsx theme={null}
// Available layouts: 'TILE', 'SIDEBAR', 'SPOTLIGHT'
CometChatCalls.setLayout('TILE');
CometChatCalls.setLayout('SIDEBAR');
CometChatCalls.setLayout('SPOTLIGHT');
```

| Layout      | Description                                    |
| ----------- | ---------------------------------------------- |
| `TILE`      | Grid layout showing all participants equally   |
| `SIDEBAR`   | Main video with participants in a sidebar      |
| `SPOTLIGHT` | Focus on one participant with others minimized |

## Picture-in-Picture

### Enable Picture-in-Picture

Enable PiP mode to continue the call in a floating window:

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

### Disable Picture-in-Picture

Exit PiP mode and return to full-screen:

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

## Participant Management

### Pin Participant

Pin a participant to the main view:

```tsx theme={null}
const participantId = 'participant_pid';
const type = 'human'; // 'human' or 'screen-share'

CometChatCalls.pinParticipant(participantId, type);
```

| Parameter       | Type   | Description                                                 |
| --------------- | ------ | ----------------------------------------------------------- |
| `participantId` | string | The participant's ID                                        |
| `type`          | string | `'human'` for user video, `'screen-share'` for screen share |

### Unpin Participant

Remove the pinned participant:

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

### Mute Participant

Mute another participant's audio (requires moderator permissions):

```tsx theme={null}
const participantId = 'participant_pid';
CometChatCalls.muteParticipant(participantId);
```

### Pause Participant Video

Pause another participant's video (requires moderator permissions):

```tsx theme={null}
const participantId = 'participant_pid';
CometChatCalls.pauseParticipantVideo(participantId);
```

## Chat Integration

### Set Chat Button Unread Count

Update the unread message count on the chat button:

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

## Complete Example

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

function CallControls() {
  const [isAudioMuted, setIsAudioMuted] = useState(false);
  const [isVideoMuted, setIsVideoMuted] = useState(false);
  const [isHandRaised, setIsHandRaised] = useState(false);
  const [currentLayout, setCurrentLayout] = useState<'TILE' | 'SIDEBAR' | 'SPOTLIGHT'>('TILE');

  const toggleAudio = () => {
    if (isAudioMuted) {
      CometChatCalls.unMuteAudio();
    } else {
      CometChatCalls.muteAudio();
    }
    setIsAudioMuted(!isAudioMuted);
  };

  const toggleVideo = () => {
    if (isVideoMuted) {
      CometChatCalls.resumeVideo();
    } else {
      CometChatCalls.pauseVideo();
    }
    setIsVideoMuted(!isVideoMuted);
  };

  const toggleHand = () => {
    if (isHandRaised) {
      CometChatCalls.lowerHand();
    } else {
      CometChatCalls.raiseHand();
    }
    setIsHandRaised(!isHandRaised);
  };

  const cycleLayout = () => {
    const layouts: Array<'TILE' | 'SIDEBAR' | 'SPOTLIGHT'> = ['TILE', 'SIDEBAR', 'SPOTLIGHT'];
    const currentIndex = layouts.indexOf(currentLayout);
    const nextLayout = layouts[(currentIndex + 1) % layouts.length];
    CometChatCalls.setLayout(nextLayout);
    setCurrentLayout(nextLayout);
  };

  const handleSwitchCamera = () => {
    CometChatCalls.switchCamera();
  };

  const handleEndCall = () => {
    CometChatCalls.leaveSession();
  };

  return (
    <View style={styles.container}>
      <TouchableOpacity style={styles.button} onPress={toggleAudio}>
        <Text style={styles.buttonText}>
          {isAudioMuted ? 'Unmute' : 'Mute'}
        </Text>
      </TouchableOpacity>

      <TouchableOpacity style={styles.button} onPress={toggleVideo}>
        <Text style={styles.buttonText}>
          {isVideoMuted ? 'Show Video' : 'Hide Video'}
        </Text>
      </TouchableOpacity>

      <TouchableOpacity style={styles.button} onPress={handleSwitchCamera}>
        <Text style={styles.buttonText}>Switch Camera</Text>
      </TouchableOpacity>

      <TouchableOpacity style={styles.button} onPress={toggleHand}>
        <Text style={styles.buttonText}>
          {isHandRaised ? 'Lower Hand' : 'Raise Hand'}
        </Text>
      </TouchableOpacity>

      <TouchableOpacity style={styles.button} onPress={cycleLayout}>
        <Text style={styles.buttonText}>Layout: {currentLayout}</Text>
      </TouchableOpacity>

      <TouchableOpacity style={[styles.button, styles.endButton]} onPress={handleEndCall}>
        <Text style={styles.buttonText}>End Call</Text>
      </TouchableOpacity>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flexDirection: 'row',
    flexWrap: 'wrap',
    justifyContent: 'center',
    padding: 16,
    gap: 8,
  },
  button: {
    backgroundColor: '#333',
    paddingHorizontal: 16,
    paddingVertical: 12,
    borderRadius: 8,
  },
  endButton: {
    backgroundColor: '#ff4444',
  },
  buttonText: {
    color: '#fff',
    fontSize: 14,
    fontWeight: '600',
  },
});

export default CallControls;
```

## Legacy Methods

These methods are deprecated but still available for backward compatibility:

| Deprecated Method    | Replacement            |
| -------------------- | ---------------------- |
| `startScreenShare()` | `startScreenSharing()` |
| `stopScreenShare()`  | `stopScreenSharing()`  |
| `endSession()`       | `leaveSession()`       |

## Related Documentation

* [Events](/calls/react-native/events) - Listen for call events
* [Participant Management](/calls/react-native/participant-management) - Manage participants
* [Call Layouts](/calls/react-native/call-layouts) - Layout options