Screen Sharing for Expo React Native (iOS)

This guide walks you through integrating screen sharing functionality for iOS in your Expo React Native application using Video SDK.

note

This page uses the following asynchronous methods. Refer to their API reference for the errors each Promise may reject with, and handle these rejections appropriately based on your use case.

• createScreenShareVideoTrack()
• toggleScreenShare()

Install the plugin:

NPM

npm install @videosdk.live/expo-ios-screen-share

YARN

yarn add @videosdk.live/expo-ios-screen-share

Usage

Update your app.json to include the plugin along with your Apple Developer Team ID (appleTeamId) and an optional extensionName:

app.json

{
  "expo": {
    "plugins": [
      // ...the plugins from Expo Setup
      [
        "@videosdk.live/expo-ios-screen-share",
        {
          "appleTeamId": "YOUR_APPLE_TEAM_ID", // example: "EHV7XZLAHA"
          "extensionName": "YOUR_BROADCAST_EXTENSION_NAME"
        }
      ]
    ]
  }
}

info

If no extensionName is provided, the default value broadcast will be used.

Then run npx expo prebuild --clean so that the plugin adds the extension to your iOS project.

caution

When the plugin adds the extension, it sets the iOS deployment target of your whole Xcode project to 14.0. After npx expo prebuild --clean, check that the Minimum Deployments of your app target is iOS 18.0.

What This Plugin Does

• Adds a Broadcast Upload Extension target.
• Configures App Group, Entitlements, and Info.plist entries, including the RTCScreenSharingExtension and RTCAppGroupIdentifier keys that the SDK needs.
• Automatically links the broadcast extension with your main app target.
• Adds a native module named VideosdkRPK. You do not need it, because enableScreenShare() shows the broadcast picker itself.

Implementing Screen Share Controls

Call toggleScreenShare() from your screen share button. When it starts screen sharing on iOS, it shows the system broadcast picker. Screen capture starts when the user taps Start Broadcast. You do not need a VideosdkRPK.js file or an onScreenShare listener.

import React from "react";
import { View, TouchableOpacity, Text } from "react-native";
import {
  createScreenShareVideoTrack,
  useRoom,
} from "@videosdk.live/react-native-sdk";

function ControlsContainer() {
  const { toggleScreenShare, isScreenSharing } = useRoom();

  const handleScreenShare = async () => {
    try {
      // Create a track only when screen sharing is about to start
      const screenShareTrack = isScreenSharing
        ? undefined
        : await createScreenShareVideoTrack();
      await toggleScreenShare(screenShareTrack);
    } catch (err) {
      console.error("toggleScreenShare failed:", err);
    }
  };

  return (
    <View
      style={{
        padding: 24,
        flexDirection: "row",
        justifyContent: "space-between",
      }}
    >
      <TouchableOpacity
        onPress={handleScreenShare}
        style={{ backgroundColor: "#1178F8", padding: 12, borderRadius: 4 }}
      >
        <Text style={{ color: "white" }}>Screen Share</Text>
      </TouchableOpacity>
    </View>
  );
}

export default ControlsContainer;

• Sharing has started when the share stream of the local participant fires onStreamEnabled, not when the Promise resolves.
• If the user closes the picker, press the button again to show it again.
• If the user stops the broadcast from Control Center, the SDK ends the share for you.
• To learn more about the screen share methods and events, see Screen Share.