Call Layouts

CometChat Calling SDK v5 - Beta Release - Call Layouts for React Native

The CometChat Calls SDK provides three layout modes for displaying participants during a call. You can set the initial layout in call settings or change it programmatically during the call.

Available Layouts

Tile Layout

The default grid layout that displays all participants equally sized in a grid pattern.

CometChatCalls.setLayout('TILE');

Sidebar Layout

Displays one main participant with other participants in a sidebar. Useful when focusing on a presenter or active speaker.

CometChatCalls.setLayout('SIDEBAR');

Spotlight Layout

Focuses on a single participant with minimal UI for others. Ideal for presentations or when one participant needs full attention.

CometChatCalls.setLayout('SPOTLIGHT');

Set Initial Layout

Configure the initial layout when creating call settings:

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

const callSettings = new CometChatCalls.CallSettingsBuilder()
  .setMode(CometChatCalls.CALL_MODE.DEFAULT) // or SPOTLIGHT
  .build();

Mode	Description
CometChatCalls.CALL_MODE.DEFAULT	Starts with Tile layout
CometChatCalls.CALL_MODE.SPOTLIGHT	Starts with Spotlight layout

Change Layout During Call

Change the layout programmatically at any time during the call:

// Switch to Tile layout
CometChatCalls.setLayout('TILE');

// Switch to Sidebar layout
CometChatCalls.setLayout('SIDEBAR');

// Switch to Spotlight layout
CometChatCalls.setLayout('SPOTLIGHT');

Listen for Layout Changes

Subscribe to layout change events:

const unsubscribe = CometChatCalls.addEventListener('onCallLayoutChanged', (layout) => {
  console.log('Layout changed to:', layout);
  // Update UI state if needed
});

// Cleanup
unsubscribe();

Spotlight Mode Options

When using Spotlight layout, you can configure video tile interactions:

const callSettings = new CometChatCalls.CallSettingsBuilder()
  .setMode(CometChatCalls.CALL_MODE.SPOTLIGHT)
  .enableVideoTileClick(true)  // Allow clicking tiles to spotlight
  .enableVideoTileDrag(true)   // Allow dragging tiles
  .build();

Option	Default	Description
enableVideoTileClick	true	Click a participant tile to spotlight them
enableVideoTileDrag	true	Drag tiles to reposition in Spotlight mode

Pin Participant

Pin a specific participant to the main view in Sidebar or Spotlight layouts:

// Pin a participant
const participantId = 'participant_pid';
CometChatCalls.pinParticipant(participantId, 'human');

// Pin a screen share
CometChatCalls.pinParticipant(participantId, 'screen-share');

// Unpin
CometChatCalls.unpinParticipant();

Automatic Layout Changes

The SDK automatically switches to Sidebar layout when:

• A participant starts screen sharing
• A participant is pinned

When screen sharing stops or the participant is unpinned, the layout returns to the previous state if it was programmatically set.

Complete Example

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

type Layout = 'TILE' | 'SIDEBAR' | 'SPOTLIGHT';

function LayoutControls() {
  const [currentLayout, setCurrentLayout] = useState<Layout>('TILE');

  useEffect(() => {
    const unsubscribe = CometChatCalls.addEventListener(
      'onCallLayoutChanged',
      (layout: Layout) => {
        setCurrentLayout(layout);
      }
    );

    return () => unsubscribe();
  }, []);

  const layouts: Layout[] = ['TILE', 'SIDEBAR', 'SPOTLIGHT'];

  return (
    <View style={styles.container}>
      <Text style={styles.label}>Layout: {currentLayout}</Text>
      <View style={styles.buttons}>
        {layouts.map((layout) => (
          <TouchableOpacity
            key={layout}
            style={[
              styles.button,
              currentLayout === layout && styles.activeButton,
            ]}
            onPress={() => CometChatCalls.setLayout(layout)}
          >
            <Text
              style={[
                styles.buttonText,
                currentLayout === layout && styles.activeButtonText,
              ]}
            >
              {layout}
            </Text>
          </TouchableOpacity>
        ))}
      </View>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    padding: 16,
  },
  label: {
    color: '#fff',
    fontSize: 14,
    marginBottom: 8,
  },
  buttons: {
    flexDirection: 'row',
    gap: 8,
  },
  button: {
    backgroundColor: '#333',
    paddingHorizontal: 16,
    paddingVertical: 8,
    borderRadius: 8,
  },
  activeButton: {
    backgroundColor: '#6851D6',
  },
  buttonText: {
    color: '#999',
    fontSize: 12,
    fontWeight: '600',
  },
  activeButtonText: {
    color: '#fff',
  },
});

export default LayoutControls;

Related Documentation

• Actions - Control the call programmatically
• Participant Management - Pin and manage participants
• Screen Sharing - Share your screen