Skip to main content
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.
Initiating a screen share from React Native is not currently supported. React Native devices can view screen shares started by participants on other platforms.

​
View Screen Shares

When a participant shares their screen, the SDK automatically displays it. Listen for screen share events: 
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: 
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

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;