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

# Call Layouts

> CometChat Calling SDK v5 - 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.

```tsx theme={null}
CometChatCalls.setLayout('TILE');
```

### Sidebar Layout

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

```tsx theme={null}
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.

```tsx theme={null}
CometChatCalls.setLayout('SPOTLIGHT');
```

## Set Initial Layout

Configure the initial layout when creating call settings:

```tsx theme={null}
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:

```tsx theme={null}
// 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:

```tsx theme={null}
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:

```tsx theme={null}
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:

```tsx theme={null}
// 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

```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';

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](/calls/react-native/actions) - Control the call programmatically
* [Participant Management](/calls/react-native/participant-management) - Pin and manage participants
* [Screen Sharing](/calls/react-native/screen-sharing) - Share your screen