Skip to main content
Version: 0.1.x

Share screen - React Native iOS


  1. Create Broadcast Upload Extension in iOS
  2. Create iOS Native Module for RPSystemBroadcastPickerView

Create Broadcast Upload Extension in iOS

Step 1 : Open Target

Open your project with xcode, the select File > New > Target in menu bar.

IOS Screen Share

Step 2 : Select Target

Select Broadcast Upload Extension and click next.

IOS Screen Share

Step 3 : Configure Broadcast Upload Extension

Enter the extension's name in the Product Name field, choose the team from the dropdown, uncheck the "Include UI extension" field, and click "Finish."

IOS Screen Share

Step 4 : Activate Extension scheme

You will be prompted with a popup : Activate "Your-Extension-name" scheme?, click on activate.

IOS Screen Share

Now, the "Broadcast" folder will appear in the Xcode left side bar.

IOS Screen Share

Step 5 : Add External file in Created Extension

Open the videosdk-rtc-react-native-sdk-example repository, and copy the following files: SampleUploader.swift, SocketConnection.swift, DarwinNotificationCenter.swift, and Atomic.swift to your extension's folder. Ensure that these files are added to the target.

Step 6 : Update SampleHandler.swift file

Open SampleHandler.swift, and copy the content of the file. Paste this content into your extension's SampleHandler.swift file.

Step 7 : Add Capability in App

In Xcode, navigate to YourappName > Signing & Capabilities, and click on +Capability to configure the app group.

IOS Screen Share

Choose App Groups from the list.

IOS Screen Share

After that, select or add the generated App Group ID that you have created before.

IOS Screen Share

Step 8 : Add Capability in Extension

Go to Your-Extension-Name > Signing & Capabilities and configure App Group functionality which we had perform in previous steps. (Group id should be same for both targets).

IOS Screen Share

Step 9 : Add App Group Id in Extension File

Go to the extension's SampleHandler.swift file and paste your group ID in the appGroupIdentifier constant.

IOS Screen Share

Step 10 : Update App level info.plist file

  1. Add a new key RTCScreenSharingExtension in Info.plist with the extension's Bundle Identifier as the value.
  2. Add a new key RTCAppGroupIdentifier in Info.plist with the extension's App groups Id as the value.

Note : For the extension's Bundle Identifier, go to TARGETS > Your-Extension-Name > Signing & Capabilities .

IOS Screen Share


You can also check out the extension's example code on github.

Create iOS Native Module for RPSystemBroadcastPickerView

Step 1 : Add Files in iOS Project

Go to Xcode > Your App and create a new file named VideosdkRPK.swift.

IOS Screen Share IOS Screen Share

After clicking the Create button, it will prompt you to create a bridging header.

IOS Screen Share

After creating the bridging header file, create an Objective-c file named VideosdkRPK.

IOS Screen Share IOS Screen Share

  • For the VideosdkRPK.swift file, copy the content from here.

  • In the Appname-Bridging-Header file, add the line #import "React/RCTEventEmitter.h".

  • For the VideosdkRPK.m file, copy the content from here.

Step 2 : Integrate Native Module on React native side

  • Create a file named VideosdkRPK.js and copy the ccontent from here.

  • Add the lines given below for handling the enable and disable screen share event.

import React, { useEffect } from "react";
import VideosdkRPK from "../VideosdkRPK";
import { TouchableOpacity, Text } from "react-native";

const { enableScreenShare, disableScreenShare } = useMeeting({});

useEffect(() => {
VideosdkRPK.addListener("onScreenShare", (event) => {
if (event === "START_BROADCAST") {
} else if (event === "STOP_BROADCAST") {

return () => {
}, []);

return (
onPress={() => {
// Calling startBroadcast from iOS Native Module
<Text> Start Screen Share </Text>

onPress={() => {
<Text> Stop Screen Share </Text>
  • The VideosdkRPK.startBroadcast() method produces the following result.

IOS Screen Share

After clicking the Start Broadcast button, you will be able to get the screen share stream in the session.

Got a Question? Ask us on discord