> ## Documentation Index
> Fetch the complete documentation index at: https://cometchat-22654f5b-docs-rn-guide-message-privately.mintlify.site/llms.txt
> Use this file to discover all available pages before exploring further.

# Call Layouts

> Customize CometChat Calls SDK v5 call layouts on React Native for participant grids, speaker views, screen sharing, and call UI.

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 sessionSettings = {
  layout: 'TILE', // or 'SIDEBAR' or 'SPOTLIGHT'
};
```

| Layout        | Description                  |
| ------------- | ---------------------------- |
| `'TILE'`      | Starts with Tile layout      |
| `'SIDEBAR'`   | Starts with Sidebar layout   |
| `'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 sessionSettings = {
  layout: 'SPOTLIGHT',
  enableSpotlightSwap: true, // Allow clicking tiles to spotlight
  enableSpotlightDrag: true, // Allow dragging tiles
};
```

| Option                | Default | Description                                |
| --------------------- | ------- | ------------------------------------------ |
| `enableSpotlightSwap` | `true`  | Click a participant tile to spotlight them |
| `enableSpotlightDrag` | `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