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

# Screen Sharing

> View screen shares from other participants in CometChat Calls SDK v5 on React Native, including pinning and layout behavior.

The CometChat Calls SDK on React Native supports viewing screen shares from other participants. When a participant shares their screen from a web or desktop client, the React Native SDK automatically displays it.

<Note>
  Initiating a screen share from React Native is not currently supported. React Native devices can view screen shares started by participants on other platforms.
</Note>

## 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`);
});
```

## Pin Screen Share

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

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

## Layout Behavior

When a participant starts sharing their screen:

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

function ScreenShareIndicator() {
  const [remoteSharer, setRemoteSharer] = useState<string | null>(null);

  useEffect(() => {
    const controller = new AbortController();
    const { signal } = controller;

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

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

    return () => controller.abort();
  }, []);

  if (!remoteSharer) {
    return null;
  }

  return (
    <View style={styles.container}>
      <Text style={styles.sharingText}>
        {remoteSharer} is sharing their screen
      </Text>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    padding: 16,
    alignItems: 'center',
  },
  sharingText: {
    color: '#6851D6',
    fontSize: 14,
  },
});

export default ScreenShareIndicator;
```

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