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

# Screen Sharing

> CometChat Calling SDK v5 - Screen Sharing for React Native

The CometChat Calls SDK supports viewing screen shares from other participants. Screen sharing initiation on React Native requires platform-specific configuration.

## View Screen Shares

When a participant shares their screen, the SDK automatically displays it. Listen for screen share events:

```tsx theme={null}
import { CometChatCalls } from '@cometchat/calls-sdk-react-native';

CometChatCalls.addEventListener('onParticipantStartedScreenShare', (participant) => {
  console.log(`${participant.name} started screen sharing`);
});

CometChatCalls.addEventListener('onParticipantStoppedScreenShare', (participant) => {
  console.log(`${participant.name} stopped screen sharing`);
});
```

## Start Screen Sharing

Start sharing your screen:

```tsx theme={null}
CometChatCalls.startScreenSharing();
```

## Stop Screen Sharing

Stop sharing your screen:

```tsx theme={null}
CometChatCalls.stopScreenSharing();
```

## Screen Share Events

### Local Screen Share

```tsx theme={null}
CometChatCalls.addEventListener('onScreenShareStarted', () => {
  console.log('Screen sharing started');
});

CometChatCalls.addEventListener('onScreenShareStopped', () => {
  console.log('Screen sharing stopped');
});
```

### Button Click Event

```tsx theme={null}
CometChatCalls.addEventListener('onScreenShareButtonClicked', () => {
  console.log('Screen share button clicked');
});
```

## iOS Configuration

### Enable Broadcast Upload Extension

To enable screen sharing on iOS, you need to add a Broadcast Upload Extension:

1. In Xcode, go to **File > New > Target**
2. Select **Broadcast Upload Extension**
3. Name it (e.g., `ScreenShareExtension`)
4. Set the same Team and Bundle Identifier prefix as your main app

### Configure App Groups

1. Select your main app target
2. Go to **Signing & Capabilities**
3. Add **App Groups** capability
4. Create a new group (e.g., `group.com.yourcompany.yourapp`)
5. Repeat for the Broadcast Upload Extension target

### Update Info.plist

Add to your extension's `Info.plist`:

```xml theme={null}
<key>NSExtension</key>
<dict>
    <key>NSExtensionPointIdentifier</key>
    <string>com.apple.broadcast-services-upload</string>
    <key>NSExtensionPrincipalClass</key>
    <string>SampleHandler</string>
    <key>RPBroadcastProcessMode</key>
    <string>RPBroadcastProcessModeSampleBuffer</string>
</dict>
```

## Android Configuration

### Add Permissions

Add to your `AndroidManifest.xml`:

```xml theme={null}
<uses-permission android:name="android.permission.FOREGROUND_SERVICE" />
<uses-permission android:name="android.permission.FOREGROUND_SERVICE_MEDIA_PROJECTION" />
```

### Configure Foreground Service

For Android 10+, screen sharing requires a foreground service. Add to your `AndroidManifest.xml`:

```xml theme={null}
<service
    android:name="com.cometchat.calls.ScreenCaptureService"
    android:foregroundServiceType="mediaProjection"
    android:exported="false" />
```

## Pin Screen Share

Pin a participant's screen share to the main view:

```tsx theme={null}
CometChatCalls.pinParticipant(participantId, 'screen-share');
```

## Layout Behavior

When screen sharing starts:

* The SDK automatically switches to Sidebar layout
* The screen share is displayed in the main view
* Other participants appear in the sidebar

When screen sharing stops:

* 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, Alert } from 'react-native';
import { CometChatCalls } from '@cometchat/calls-sdk-react-native';

function ScreenShareControls() {
  const [isSharing, setIsSharing] = useState(false);
  const [remoteSharer, setRemoteSharer] = useState<string | null>(null);

  useEffect(() => {
    const unsubscribeStart = CometChatCalls.addEventListener(
      'onScreenShareStarted',
      () => {
        setIsSharing(true);
      }
    );

    const unsubscribeStop = CometChatCalls.addEventListener(
      'onScreenShareStopped',
      () => {
        setIsSharing(false);
      }
    );

    const unsubscribeRemoteStart = CometChatCalls.addEventListener(
      'onParticipantStartedScreenShare',
      (participant) => {
        setRemoteSharer(participant.name);
      }
    );

    const unsubscribeRemoteStop = CometChatCalls.addEventListener(
      'onParticipantStoppedScreenShare',
      () => {
        setRemoteSharer(null);
      }
    );

    return () => {
      unsubscribeStart();
      unsubscribeStop();
      unsubscribeRemoteStart();
      unsubscribeRemoteStop();
    };
  }, []);

  const toggleScreenShare = () => {
    if (isSharing) {
      CometChatCalls.stopScreenSharing();
    } else {
      if (remoteSharer) {
        Alert.alert(
          'Screen Share Active',
          `${remoteSharer} is currently sharing their screen.`
        );
        return;
      }
      CometChatCalls.startScreenSharing();
    }
  };

  return (
    <View style={styles.container}>
      {remoteSharer && (
        <Text style={styles.sharingText}>
          {remoteSharer} is sharing their screen
        </Text>
      )}
      <TouchableOpacity
        style={[styles.button, isSharing && styles.activeButton]}
        onPress={toggleScreenShare}
      >
        <Text style={styles.buttonText}>
          {isSharing ? 'Stop Sharing' : 'Share Screen'}
        </Text>
      </TouchableOpacity>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    padding: 16,
    alignItems: 'center',
  },
  sharingText: {
    color: '#6851D6',
    fontSize: 14,
    marginBottom: 8,
  },
  button: {
    backgroundColor: '#333',
    paddingHorizontal: 20,
    paddingVertical: 12,
    borderRadius: 8,
  },
  activeButton: {
    backgroundColor: '#6851D6',
  },
  buttonText: {
    color: '#fff',
    fontSize: 14,
    fontWeight: '600',
  },
});

export default ScreenShareControls;
```

## Related Documentation

* [Call Layouts](/calls/react-native/call-layouts) - Layout behavior during screen share
* [Participant Management](/calls/react-native/participant-management) - Pin screen shares
* [Events](/calls/react-native/events) - Screen share events