Custom Control Panel - CometChat Docs

Build a custom control panel to replace or extend the default call controls. Hide the default layout and implement your own UI using the SDK’s action methods.

Hide Default Layout

Disable the default control panel to use your own:

import { CometChatCalls } from '@cometchat/calls-sdk-react-native';

const sessionSettings = {
  hideControlPanel: true,
};

Available Actions

Use these methods to control the call from your custom UI:

Action	Method	Description
Mute Audio	`CometChatCalls.muteAudio()`	Mute local microphone
Unmute Audio	`CometChatCalls.unmuteAudio()`	Unmute local microphone
Pause Video	`CometChatCalls.pauseVideo()`	Stop sending video
Resume Video	`CometChatCalls.resumeVideo()`	Resume sending video
Switch Camera	`CometChatCalls.switchCamera()`	Toggle front/rear camera
Leave Session	`CometChatCalls.leaveSession()`	End the call
Raise Hand	`CometChatCalls.raiseHand()`	Raise hand
Lower Hand	`CometChatCalls.lowerHand()`	Lower hand
Set Layout	`CometChatCalls.setLayout(layout)`	Change call layout
Start Recording	`CometChatCalls.startRecording()`	Start recording
Stop Recording	`CometChatCalls.stopRecording()`	Stop recording
Enable PiP	`CometChatCalls.enablePictureInPictureLayout()`	Enter PiP mode
Disable PiP	`CometChatCalls.disablePictureInPictureLayout()`	Exit PiP mode

Complete Example

import React, { useState, useEffect } from 'react';
import { View, TouchableOpacity, Text, StyleSheet, SafeAreaView } from 'react-native';
import { CometChatCalls } from '@cometchat/calls-sdk-react-native';

interface CustomControlPanelProps {
  isAudioOnly?: boolean;
}

function CustomControlPanel({ isAudioOnly = false }: CustomControlPanelProps) {
  const [isAudioMuted, setIsAudioMuted] = useState(false);
  const [isVideoMuted, setIsVideoMuted] = useState(false);
  const [isHandRaised, setIsHandRaised] = useState(false);
  const [isRecording, setIsRecording] = useState(false);
  const [currentLayout, setCurrentLayout] = useState<'TILE' | 'SIDEBAR' | 'SPOTLIGHT'>('TILE');

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

    // Listen for media events
    CometChatCalls.addEventListener(
      'onAudioMuted',
      () => setIsAudioMuted(true),
      { signal }
    );

    CometChatCalls.addEventListener(
      'onAudioUnMuted',
      () => setIsAudioMuted(false),
      { signal }
    );

    CometChatCalls.addEventListener(
      'onVideoPaused',
      () => setIsVideoMuted(true),
      { signal }
    );

    CometChatCalls.addEventListener(
      'onVideoResumed',
      () => setIsVideoMuted(false),
      { signal }
    );

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

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

    CometChatCalls.addEventListener(
      'onCallLayoutChanged',
      (layout: 'TILE' | 'SIDEBAR' | 'SPOTLIGHT') => setCurrentLayout(layout),
      { signal }
    );

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

  const toggleAudio = () => {
    if (isAudioMuted) {
      CometChatCalls.unmuteAudio();
    } else {
      CometChatCalls.muteAudio();
    }
  };

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

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

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

  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);
  };

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

  return (
    <SafeAreaView style={styles.container}>
      <View style={styles.controlRow}>
        {/* Audio Toggle */}
        <TouchableOpacity
          style={[styles.controlButton, isAudioMuted && styles.activeButton]}
          onPress={toggleAudio}
        >
          <Text style={styles.buttonIcon}>{isAudioMuted ? '🔇' : '🎤'}</Text>
          <Text style={styles.buttonLabel}>
            {isAudioMuted ? 'Unmute' : 'Mute'}
          </Text>
        </TouchableOpacity>

        {/* Video Toggle (only for video calls) */}
        {!isAudioOnly && (
          <TouchableOpacity
            style={[styles.controlButton, isVideoMuted && styles.activeButton]}
            onPress={toggleVideo}
          >
            <Text style={styles.buttonIcon}>{isVideoMuted ? '📷' : '🎥'}</Text>
            <Text style={styles.buttonLabel}>
              {isVideoMuted ? 'Show' : 'Hide'}
            </Text>
          </TouchableOpacity>
        )}

        {/* Switch Camera (only for video calls) */}
        {!isAudioOnly && (
          <TouchableOpacity
            style={styles.controlButton}
            onPress={() => CometChatCalls.switchCamera()}
          >
            <Text style={styles.buttonIcon}>🔄</Text>
            <Text style={styles.buttonLabel}>Flip</Text>
          </TouchableOpacity>
        )}

        {/* Raise Hand */}
        <TouchableOpacity
          style={[styles.controlButton, isHandRaised && styles.handRaisedButton]}
          onPress={toggleHand}
        >
          <Text style={styles.buttonIcon}>{isHandRaised ? '✋' : '🤚'}</Text>
          <Text style={styles.buttonLabel}>
            {isHandRaised ? 'Lower' : 'Raise'}
          </Text>
        </TouchableOpacity>
      </View>

      <View style={styles.controlRow}>
        {/* Layout Toggle */}
        <TouchableOpacity style={styles.controlButton} onPress={cycleLayout}>
          <Text style={styles.buttonIcon}>📐</Text>
          <Text style={styles.buttonLabel}>{currentLayout}</Text>
        </TouchableOpacity>

        {/* Recording */}
        <TouchableOpacity
          style={[styles.controlButton, isRecording && styles.recordingButton]}
          onPress={toggleRecording}
        >
          <Text style={styles.buttonIcon}>{isRecording ? '⏹️' : '⏺️'}</Text>
          <Text style={styles.buttonLabel}>
            {isRecording ? 'Stop' : 'Record'}
          </Text>
        </TouchableOpacity>

        {/* End Call */}
        <TouchableOpacity
          style={[styles.controlButton, styles.endCallButton]}
          onPress={handleEndCall}
        >
          <Text style={styles.buttonIcon}>📞</Text>
          <Text style={styles.buttonLabel}>End</Text>
        </TouchableOpacity>
      </View>
    </SafeAreaView>
  );
}

const styles = StyleSheet.create({
  container: {
    position: 'absolute',
    bottom: 0,
    left: 0,
    right: 0,
    backgroundColor: 'rgba(0, 0, 0, 0.8)',
    paddingVertical: 16,
    paddingHorizontal: 8,
  },
  controlRow: {
    flexDirection: 'row',
    justifyContent: 'center',
    marginBottom: 12,
    gap: 12,
  },
  controlButton: {
    alignItems: 'center',
    justifyContent: 'center',
    backgroundColor: '#333',
    width: 64,
    height: 64,
    borderRadius: 32,
  },
  activeButton: {
    backgroundColor: '#6851D6',
  },
  handRaisedButton: {
    backgroundColor: '#f59e0b',
  },
  recordingButton: {
    backgroundColor: '#ef4444',
  },
  endCallButton: {
    backgroundColor: '#dc2626',
  },
  buttonIcon: {
    fontSize: 24,
  },
  buttonLabel: {
    color: '#fff',
    fontSize: 10,
    marginTop: 4,
  },
});

export default CustomControlPanel;

Using with Call Component

Combine the custom control panel with the call component:

import React from 'react';
import { View, StyleSheet } from 'react-native';
import { CometChatCalls } from '@cometchat/calls-sdk-react-native';
import CustomControlPanel from './CustomControlPanel';

interface CallScreenProps {
  callToken: string;
  isAudioOnly?: boolean;
}

function CallScreen({ callToken, isAudioOnly = false }: CallScreenProps) {
  const sessionSettings = {
    hideControlPanel: true, // Hide default controls
    sessionType: isAudioOnly ? 'VOICE' : 'VIDEO',
  };

  return (
    <View style={styles.container}>
      <CometChatCalls.Component
        callToken={callToken}
        sessionSettings={sessionSettings}
      />
      <CustomControlPanel isAudioOnly={isAudioOnly} />
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#000',
  },
});

export default CallScreen;

Actions - All available call actions
Events - Listen for call events
Session Settings - Configure call settings

​Hide Default Layout

​Available Actions

​Complete Example

​Using with Call Component

​Related Documentation

Hide Default Layout

Available Actions

Complete Example

Using with Call Component

Related Documentation