Call Layouts

CometChatCalls.setLayout('TILE');

CometChatCalls.setLayout('SIDEBAR');

CometChatCalls.setLayout('SPOTLIGHT');

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

const sessionSettings = {
  layout: 'TILE', // or 'SIDEBAR' or 'SPOTLIGHT'
};

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

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

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

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

// Cleanup
unsubscribe();

const sessionSettings = {
  layout: 'SPOTLIGHT',
  enableSpotlightSwap: true, // Allow clicking tiles to spotlight
  enableSpotlightDrag: true, // Allow dragging tiles
};

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

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

// Unpin
CometChatCalls.unpinParticipant();

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;