Integrate Screen Share in the React Native iOS Video Call App?
Tags: reactnative, ios, programming
Published: 2024-04-11 11:59:06

---
title: Integrate Screen Share in the React Native iOS Video Call App?
published: true
date: 2024-04-03 10:38:00 UTC
tags: reactnative, ios, programming
canonical_url: https://www.videosdk.live/blog/integrate-screen-share-in-react-native-ios-video-call-app
---

## 📌 Introduction
 ![How to Integrate Screen Share in the React Native iOS Video Call App?](https://assets.videosdk.live/static-assets/ghost/2024/04/Screen-SHare-in-React-Native-Android-2.png)

In today's digital world, good communication and teamwork are crucial. As people look for more effective methods to connect, video conferencing solutions have become indispensable. Screen sharing has evolved into an integral element of modern communication and collaboration platforms, allowing users to share their device displays with others during meetings, presentations, and distant collaborations. In this article, we'll look at how to smoothly incorporate Screen Share capabilities with VideoSDK.

## 🎯 Goals

By the end of this article, we'll:

1. Create a [VideoSDK account](https://www.videosdk.live/signup?utm_source=organicseo&utm_medium=devto&utm_campaign=screenshare_ios_react_native) and generate your VideoSDK auth token.
2. Integrate the VideoSDK library and dependencies into your project.
3. Implement core functionalities for video calls using VideoSDK.
4. Enable Screen Sharing feature.

## 🚀 Getting Started with VideoSDK

To take advantage of the Screen Sharing functionality, we must use the capabilities that the VideoSDK offers. Before diving into the implementation steps, let's ensure you complete the necessary prerequisites.

### Create a VideoSDK Account

Go to your [VideoSDK dashboard](https://www.videosdk.live/signup?utm_source=organicseo&utm_medium=devto&utm_campaign=screenshare_ios_react_native) and sign up if you don't have an account. This account gives you access to the required Video SDK token, which acts as an authentication key that allows your application to interact with VideoSDK functionality.

### Generate your Auth Token

Visit your VideoSDK dashboard and navigate to the "API Key" section to generate your auth token. This token is crucial in authorizing your application to use VideoSDK features.

For a more visual understanding of the account creation and token generation process, consider referring to the [provided tutorial](https://docs.videosdk.live/android/guide/video-and-audio-calling-api-sdk/authentication-and-token#1-generating-token-from-dashboard).

### Prerequisites and Setup

Make sure your development environment meets the following requirements:

- Node.js v12+
- NPM v6+ (comes installed with newer Node versions)
- Android Studio or Xcode installed

## 🔌 Integrate VideoSDK

Install the VideoSDK by using the following command. Ensure that you are in your project directory before running this command.

- For NPM 

```
npm install "@videosdk.live/react-native-sdk" "@videosdk.live/react-native-incallmanager"
```

- For Yarn

```
yarn add "@videosdk.live/react-native-sdk" "@videosdk.live/react-native-incallmanager"
```

### Project Configuration

Before integrating the Screen Share functionality, ensure that your project is correctly prepared to handle the integration. This setup consists of a sequence of steps for configuring rights, dependencies, and platform-specific parameters so that VideoSDK can function seamlessly inside your application context.

<!--kg-card-begin: markdown-->
#### iOS Setup​
<!--kg-card-end: markdown-->

ℹ️

Ensure that you are using CocoaPods version 1.10 or later.

**1.** To update CocoaPods, you can reinstall `gem` using the following command:

```
$ sudo gem install cocoapods
```

**2.** Manually link react-native-incall-manager (if it is not linked automatically).

Select `Your_Xcode_Project/TARGETS/BuildSettings`, in Header Search Paths, add `"$(SRCROOT)/../node_modules/@videosdk.live/react-native-incall-manager/ios/RNInCallManager"`

**3.** Change the path of `react-native-webrtc` using the following command:

```
pod ‘react-native-webrtc’, :path => ‘../node_modules/@videosdk.live/react-native-webrtc’
```

**4.** Change the version of your platform.

You need to change the platform field in the Podfile to 12.0 or above because react-native-webrtc doesn't support iOS versions earlier than 12.0. Update the line: platform: ios, ‘12.0’.

**5.** Install pods.

After updating the version, you need to install the pods by running the following command:

```
Pod install
```

**6.** Add “libreact-native-webrtc.a” binary.

Add the "libreact-native-webrtc.a" binary to the "Link Binary With Libraries" section in the target of your main project folder.

**7.** Declare permissions in Info.plist :

Add the following lines to your info.plist file located at (project folder/ios/projectname/info.plist):

```
<key>NSCameraUsageDescription</key>
<string>Camera permission description</string>
<key>NSMicrophoneUsageDescription</key>
<string>Microphone permission description</string>
```
<!--kg-card-begin: markdown-->
#### Register Service
<!--kg-card-end: markdown-->

Register VideoSDK services in your root `index.js` file for the initialization service.

```
import { AppRegistry } from "react-native";
import App from "./App";
import { name as appName } from "./app.json";
import { register } from "@videosdk.live/react-native-sdk";

register();

AppRegistry.registerComponent(appName, () => App);
```

## Essential Steps to Add Video 

By following essential steps, you can seamlessly implement video into your applications.

### Step 1: Get started with api.js[​](https://docs.videosdk.live/react-native/guide/video-and-audio-calling-api-sdk/quick-start#step-1--get-started-with-apijs)

Before moving on, you must create an API request to generate a unique meetingId. You will need an authentication token, which you can create either through the [videosdk-rtc-api-server-examples](https://github.com/videosdk-live/videosdk-rtc-api-server-examples) or directly from the [VideoSDK Dashboard](https://app.videosdk.live/api-keys) for developers.

```
export const token = "<Generated-from-dashbaord>";
// API call to create meeting
export const createMeeting = async ({ token }) => {
  const res = await fetch(`https://api.videosdk.live/v2/rooms`, {
    method: "POST",
    headers: {
      authorization: `${token}`,
      "Content-Type": "application/json",
    },
    body: JSON.stringify({}),
  });

  const { roomId } = await res.json();
  return roomId;
};
```

### Step 2: Wireframe App.js with all the components[​](https://docs.videosdk.live/react-native/guide/video-and-audio-calling-api-sdk/quick-start#step-2-wireframe-appjs-with-all-the-components)

To build up a wireframe of App.js, you need to use VideoSDK Hooks and Context Providers. VideoSDK provides MeetingProvider, MeetingConsumer, useMeeting, and useParticipant hooks.

First, you need to understand the Context Provider and Consumer. Context is primarily used when some data needs to be accessible by many components at different nesting levels.

- **MeetingProvider** : This is the Context Provider. It accepts value `config` and `token` as props. The Provider component accepts a value prop to be passed to consuming components that are descendants of this Provider. One Provider can be connected to many consumers. Providers can be nested to override values deeper within the tree.
- **MeetingConsumer** : This is the Context Consumer. All consumers that are descendants of a Provider will re-render whenever the Provider’s value prop changes.
- **useMeeting** : This is the meeting hook API. It includes all the information related to meetings such as join/leave, enable/disable the mic or webcam, etc.
- **useParticipant** : This is the participant hook API. It is responsible for handling all the events and props related to one particular participant such as name, webcamStream, micStream etc.

The Meeting Context provides a way to listen for any changes that occur when a participant joins the meeting or makes modifications to their microphone, camera, and other settings.

Begin by making a few changes to the code in the App.js file.

```
import React, { useState } from "react";
import {
  SafeAreaView,
  TouchableOpacity,
  Text,
  TextInput,
  View,
  FlatList,
} from "react-native";
import {
  MeetingProvider,
  useMeeting,
  useParticipant,
  MediaStream,
  RTCView,
} from "@videosdk.live/react-native-sdk";
import { createMeeting, token } from "./api";

function JoinScreen(props) {
  return null;
}

function ControlsContainer() {
  return null;
}

function MeetingView() {
  return null;
}

export default function App() {
  const [meetingId, setMeetingId] = useState(null);

  const getMeetingId = async (id) => {
    const meetingId = id == null ? await createMeeting({ token }) : id;
    setMeetingId(meetingId);
  };

  return meetingId ? (
    <SafeAreaView style={{ flex: 1, backgroundColor: "#F6F6FF" }}>
      <MeetingProvider
        config={{
          meetingId,
          micEnabled: false,
          webcamEnabled: true,
          name: "Test User",
        }}
        token={token}
      >
        <MeetingView />
      </MeetingProvider>
    </SafeAreaView>
  ) : (
    <JoinScreen getMeetingId={getMeetingId} />
  );
}
```

### Step 3: Implement Join Screen[​](https://docs.videosdk.live/react-native/guide/video-and-audio-calling-api-sdk/quick-start#step-3--implement-join-screen)

The join screen will serve as a medium to either schedule a new meeting or join an existing one.

```
function JoinScreen(props) {
  const [meetingVal, setMeetingVal] = useState("");
  return (
    <SafeAreaView
      style={{
        flex: 1,
        backgroundColor: "#F6F6FF",
        justifyContent: "center",
        paddingHorizontal: 6 * 10,
      }}
    >
      <TouchableOpacity
        onPress={() => {
          props.getMeetingId();
        }}
        style={{ backgroundColor: "#1178F8", padding: 12, borderRadius: 6 }}
      >
        <Text style={{ color: "white", alignSelf: "center", fontSize: 18 }}>
          Create Meeting
        </Text>
      </TouchableOpacity>

      <Text
        style={{
          alignSelf: "center",
          fontSize: 22,
          marginVertical: 16,
          fontStyle: "italic",
          color: "grey",
        }}
      >
        ---------- OR ----------
      </Text>
      <TextInput
        value={meetingVal}
        onChangeText={setMeetingVal}
        placeholder={"XXXX-XXXX-XXXX"}
        style={{
          padding: 12,
          borderWidth: 1,
          borderRadius: 6,
          fontStyle: "italic",
        }}
      />
      <TouchableOpacity
        style={{
          backgroundColor: "#1178F8",
          padding: 12,
          marginTop: 14,
          borderRadius: 6,
        }}
        onPress={() => {
          props.getMeetingId(meetingVal);
        }}
      >
        <Text style={{ color: "white", alignSelf: "center", fontSize: 18 }}>
          Join Meeting
        </Text>
      </TouchableOpacity>
    </SafeAreaView>
  );
}
```

### Step 4: Implement Controls[​](https://docs.videosdk.live/react-native/guide/video-and-audio-calling-api-sdk/quick-start#step-4--implement-controls)

The next step is to create a `ControlsContainer` component to manage features such as Join or leave a Meeting and Enable or Disable the Webcam/Mic.

In this step, the `useMeeting` hook is utilized to acquire all the required methods such as `join()`, `leave()`, `toggleWebcam` and `toggleMic`.

```
const Button = ({ onPress, buttonText, backgroundColor }) => {
  return (
    <TouchableOpacity
      onPress={onPress}
      style={{
        backgroundColor: backgroundColor,
        justifyContent: "center",
        alignItems: "center",
        padding: 12,
        borderRadius: 4,
      }}
    >
      <Text style={{ color: "white", fontSize: 12 }}>{buttonText}</Text>
    </TouchableOpacity>
  );
};

function ControlsContainer({ join, leave, toggleWebcam, toggleMic }) {
  return (
    <View
      style={{
        padding: 24,
        flexDirection: "row",
        justifyContent: "space-between",
      }}
    >
      <Button
        onPress={() => {
          join();
        }}
        buttonText={"Join"}
        backgroundColor={"#1178F8"}
      />
      <Button
        onPress={() => {
          toggleWebcam();
        }}
        buttonText={"Toggle Webcam"}
        backgroundColor={"#1178F8"}
      />
      <Button
        onPress={() => {
          toggleMic();
        }}
        buttonText={"Toggle Mic"}
        backgroundColor={"#1178F8"}
      />
      <Button
        onPress={() => {
          leave();
        }}
        buttonText={"Leave"}
        backgroundColor={"#FF0000"}
      />
    </View>
  );
}

function ParticipantList() {
  return null;
}
function MeetingView() {
  const { join, leave, toggleWebcam, toggleMic, meetingId } = useMeeting({});

  return (
    <View style={{ flex: 1 }}>
      {meetingId ? (
        <Text style={{ fontSize: 18, padding: 12 }}>
          Meeting Id :{meetingId}
        </Text>
      ) : null}
      <ParticipantList />
      <ControlsContainer
        join={join}
        leave={leave}
        toggleWebcam={toggleWebcam}
        toggleMic={toggleMic}
      />
    </View>
  );
}
```

### Step 5: Render Participant List[​](https://docs.videosdk.live/react-native/guide/video-and-audio-calling-api-sdk/quick-start#step-5--render-participant-list)

After implementing the controls, the next step is to render the joined participants.

You can get all the joined `participants` from the `useMeeting` Hook.

```
function ParticipantView() {
  return null;
}

function ParticipantList({ participants }) {
  return participants.length > 0 ? (
    <FlatList
      data={participants}
      renderItem={({ item }) => {
        return <ParticipantView participantId={item} />;
      }}
    />
  ) : (
    <View
      style={{
        flex: 1,
        backgroundColor: "#F6F6FF",
        justifyContent: "center",
        alignItems: "center",
      }}
    >
      <Text style={{ fontSize: 20 }}>Press Join button to enter meeting.</Text>
    </View>
  );
}

function MeetingView() {
  // Get `participants` from useMeeting Hook
  const { join, leave, toggleWebcam, toggleMic, participants } = useMeeting({});
  const participantsArrId = [...participants.keys()];

  return (
    <View style={{ flex: 1 }}>
      <ParticipantList participants={participantsArrId} />
      <ControlsContainer
        join={join}
        leave={leave}
        toggleWebcam={toggleWebcam}
        toggleMic={toggleMic}
      />
    </View>
  );
}
```

### Step 6: Handling Participant's Media[​](https://docs.videosdk.live/react-native/guide/video-and-audio-calling-api-sdk/quick-start#step-6--handling-participants-media)

Before Handling the Participant's Media, you need to understand a couple of concepts.

<!--kg-card-begin: markdown-->
#### 1. useParticipant Hook
<!--kg-card-end: markdown-->

The `useParticipant` hook is responsible for handling all the properties and events of one particular participant who joined the meeting. It will take `participantId` as argument.

```
const { webcamStream, webcamOn, displayName } = useParticipant(participantId);
```
<!--kg-card-begin: markdown-->
#### 2. MediaStream API
<!--kg-card-end: markdown-->

The MediaStream API is beneficial for adding a MediaTrack into the `RTCView` component, enabling the playback of audio or video.

```
<RTCView
  streamURL={new MediaStream([webcamStream.track]).toURL()}
  objectFit={"cover"}
  style={{
    height: 300,
    marginVertical: 8,
    marginHorizontal: 8,
  }}
/>
```
<!--kg-card-begin: markdown-->
#### Rendering Participant Media
<!--kg-card-end: markdown-->
```
function ParticipantView({ participantId }) {
  const { webcamStream, webcamOn } = useParticipant(participantId);

  return webcamOn && webcamStream ? (
    <RTCView
      streamURL={new MediaStream([webcamStream.track]).toURL()}
      objectFit={"cover"}
      style={{
        height: 300,
        marginVertical: 8,
        marginHorizontal: 8,
      }}
    />
  ) : (
    <View
      style={{
        backgroundColor: "grey",
        height: 300,
        justifyContent: "center",
        alignItems: "center",
      }}
    >
      <Text style={{ fontSize: 16 }}>NO MEDIA</Text>
    </View>
  );
}
```

Congratulations! By following these steps, you're on your way to unlocking the video within your application. Now, we are moving forward to integrate the feature that builds immersive video experiences for your users!

## 🖥️ Integrate Screen Sharing Feature

Adding the Screen Share functionality to your application improves cooperation by allowing users to share their device screens during meetings or presentations. It allows everyone in the conference to view precisely what you see on your screen, which is useful for presentations, demos, and collaborations.

### Create Broadcast Upload Extension in iOS
<!--kg-card-begin: markdown-->
#### Step 1: Open Target
<!--kg-card-end: markdown-->

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

![How to Integrate Screen Share in the React Native iOS Video Call App?](https://assets.videosdk.live/static-assets/ghost/2024/04/step1-xcode-8cbf05258253368fa8095f10aa06459d.png)

<!--kg-card-begin: markdown-->
#### Step 2: Select Target
<!--kg-card-end: markdown-->

Select Broadcast Upload Extension and click next.

![How to Integrate Screen Share in the React Native iOS Video Call App?](https://assets.videosdk.live/static-assets/ghost/2024/04/step2-xcode-5270422797cc8941922cefadffb5238d.png)

<!--kg-card-begin: markdown-->
#### Step 3: Configure Broadcast Upload Extension
<!--kg-card-end: markdown-->

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

![How to Integrate Screen Share in the React Native iOS Video Call App?](https://assets.videosdk.live/static-assets/ghost/2024/04/step3-xcode-458facd46d26cfa090fd8724b6ba831b.png)

<!--kg-card-begin: markdown-->
#### Step 4: Activate Extension scheme
<!--kg-card-end: markdown-->

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

![How to Integrate Screen Share in the React Native iOS Video Call App?](https://assets.videosdk.live/static-assets/ghost/2024/04/step4-xcode-6de6fa7fc079f920f52d8315b2717e9d.png)

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

![How to Integrate Screen Share in the React Native iOS Video Call App?](https://assets.videosdk.live/static-assets/ghost/2024/04/step5-xcode-79ba89532c028fb25376bf6d4953f0b2.png)

<!--kg-card-begin: markdown-->
#### Step 5: Add External file in Created Extension
<!--kg-card-end: markdown-->

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.

<!--kg-card-begin: markdown-->
#### Step 6: Update SampleHandler.swift file
<!--kg-card-end: markdown-->

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

<!--kg-card-begin: markdown-->
#### Step 7: Add Capability in the App
<!--kg-card-end: markdown-->

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

![How to Integrate Screen Share in the React Native iOS Video Call App?](https://assets.videosdk.live/static-assets/ghost/2024/04/step8-xcode-60177a1783e9203570a06479c30492b8-1.png)

Choose **App Groups** from the list.

![How to Integrate Screen Share in the React Native iOS Video Call App?](https://assets.videosdk.live/static-assets/ghost/2024/04/step9-xcode-13aa5448218f78f473f060c6854874a2.png)

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

![How to Integrate Screen Share in the React Native iOS Video Call App?](https://assets.videosdk.live/static-assets/ghost/2024/04/step10-xcode-80bd6f05c87acae9a9fbaa4a89f414f9.png)

<!--kg-card-begin: markdown-->
#### Step 8: Add Capability in Extension
<!--kg-card-end: markdown-->

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

![How to Integrate Screen Share in the React Native iOS Video Call App?](https://assets.videosdk.live/static-assets/ghost/2024/04/step11-xcode-021329a0abd110f74fb1eba7d668fc79.png)

<!--kg-card-begin: markdown-->
#### Step 9: Add App Group ID in Extension File
<!--kg-card-end: markdown-->

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

![How to Integrate Screen Share in the React Native iOS Video Call App?](https://assets.videosdk.live/static-assets/ghost/2024/04/step12-xcode-6f145ca7606a486596da66ebf5c31e36.png)

<!--kg-card-begin: markdown-->
#### Step 10: Update App level `info.plist` file
<!--kg-card-end: markdown-->
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**.

![How to Integrate Screen Share in the React Native iOS Video Call App?](https://assets.videosdk.live/static-assets/ghost/2024/04/step13-xcode-00cb59e564facb3c7f365235065f4561.png)

> You can also check out the extension's [example code](https://github.com/videosdk-live/videosdk-rtc-react-native-sdk-example/tree/master/ios/BroadcastScreen) on github.

## Create an iOS Native Module for RPSystemBroadcastPickerView[​](https://docs.videosdk.live/react-native/guide/video-and-audio-calling-api-sdk/extras/react-native-ios-screen-share#create-ios-native-module-for-rpsystembroadcastpickerview)
<!--kg-card-begin: markdown-->
#### Step 1: Add Files to iOS Project
<!--kg-card-end: markdown-->

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

![How to Integrate Screen Share in the React Native iOS Video Call App?](https://assets.videosdk.live/static-assets/ghost/2024/04/step18-xcode-1e37fbb475ebcde38aa2cce7786794f1.png)

![How to Integrate Screen Share in the React Native iOS Video Call App?](https://assets.videosdk.live/static-assets/ghost/2024/04/step19-xcode-1fcb795f17181a1b6bc6c09558001b3c.png)

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

![How to Integrate Screen Share in the React Native iOS Video Call App?](https://assets.videosdk.live/static-assets/ghost/2024/04/step20-xcode-31b738cbe8cd385e602531be157b6a62.png)

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

![How to Integrate Screen Share in the React Native iOS Video Call App?](https://assets.videosdk.live/static-assets/ghost/2024/04/step21-xcode-b15e58298ff12891ce3625919cc3b956.png)

![How to Integrate Screen Share in the React Native iOS Video Call App?](https://assets.videosdk.live/static-assets/ghost/2024/04/step22-xcode-ae36d17fc8a0a65c3726ee31deb51f34.png)

- For the `VideosdkRPK.swift` file, copy the content from [here](https://github.com/videosdk-live/videosdk-rtc-react-native-sdk-example/blob/master/ios/VideosdkRPK.swift).
- In the `Appname-Bridging-Header` file, add the line `#import "React/RCTEventEmitter.h"`.
- For the `VideosdkRPK.m` file, copy the content from [here](https://github.com/videosdk-live/videosdk-rtc-react-native-sdk-example/blob/master/ios/VideosdkRPK.m).

#### Step 2: Integrate the Native Module on React native side
<!--kg-card-end: markdown-->
- Create a file named `VideosdkRPK.js` and copy the content from [here](https://github.com/videosdk-live/videosdk-rtc-react-native-sdk-example/blob/master/VideosdkRPK.js).
- Add the lines given below for handling the enable and disable screen share event.

### Enable Screen Share

- By using the `enableScreenShare()` function of the `useMeeting` hook, the local participant can share their mobile screen with other participants.
- The Screen Share stream of a participant can be accessed from the `screenShareStream` property of the `useParticipant` hook.

### Disable Screen Share

- By using the `disableScreenShare()` function of the `useMeeting` hook, the local participant can stop sharing their mobile screen with other participants.

```
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") {
      enableScreenShare();
    } else if (event === "STOP_BROADCAST") {
      disableScreenShare();
    }
  });

  return () => {
    VideosdkRPK.removeSubscription("onScreenShare");
  };
}, []);

return (
  <>
    <TouchableOpacity
      onPress={() => {
        // Calling startBroadcast from iOS Native Module
        VideosdkRPK.startBroadcast();
      }}
    >
      <Text> Start Screen Share </Text>
    </TouchableOpacity>

    <TouchableOpacity
      onPress={() => {
        disableScreenShare();
      }}
    >
      <Text> Stop Screen Share </Text>
    </TouchableOpacity>
  </>
);
```

The `VideosdkRPK.startBroadcast()` method produces the following result.

![How to Integrate Screen Share in the React Native iOS Video Call App?](https://assets.videosdk.live/static-assets/ghost/2024/04/step23-xcode-e815d2c96e8061551e941055e32578b3.png)

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

### Rendering Screen Share Stream[​](https://docs.videosdk.live/react-native/guide/video-and-audio-calling-api-sdk/handling-media/screen-share#rendering-screen-share-stream)

- To render the screenshare, you will need the `participantId` of the user presenting the screen. This can be obtained from the `presenterId` property of the `useMeeting` hook.

```
function MeetingView() {
  const { presenterId } = useMeeting({});

  return (
    <View style={{ flex: 1 }}>
      //..
      {presenterId && <PresenterView presenterId={presenterId} />}
      <ParticipantList />
      // ...
    </View>
  );
}

const PresenterView = ({ presenterId }) => {
  return <Text>PresenterView</Text>;
};
```

- Now that you have the `presenterId`, you can obtain the `screenShareStream` using the `useParticipant` hook and play it in the `RTCView` component.

```
const PresenterView = ({ presenterId }) => {
  const { screenShareStream, screenShareOn } = useParticipant(presenterId);

  return (
    <>
      // playing the media stream in the RTCView
      {screenShareOn && screenShareStream ? (
        <RTCView
          streamURL={new MediaStream([screenShareStream.track]).toURL()}
          objectFit={"contain"}
          style={{
            flex: 1,
          }}
        />
      ) : null}
    </>
  );
};
```

### Events associated with enableScreenShare[​](https://docs.videosdk.live/react-native/guide/video-and-audio-calling-api-sdk/handling-media/screen-share#events-associated-with-enablescreenshare)

- Every Participant will receive a callback on [`onStreamEnabled()`](https://docs.videosdk.live/react-native/api/sdk-reference/use-participant/events#onstreamenabled) event of the [`useParticipant()`](https://docs.videosdk.live/react-native/api/sdk-reference/use-participant/introduction) hook with the `Stream` object.
- Every Participant will receive the [`onPresenterChanged()`](https://docs.videosdk.live/react-native/api/sdk-reference/use-meeting/events#onpresenterchanged) callback of the [`useMeeting`](https://docs.videosdk.live/react-native/api/sdk-reference/use-meeting/introduction) hook, which provides the `participantId` as the `presenterId` of the participant who started the screen share.

### Events associated with disableScreenShare[​](https://docs.videosdk.live/react-native/guide/video-and-audio-calling-api-sdk/handling-media/screen-share#events-associated-with-disablescreenshare)

- Every Participant will receive a callback on [`onStreamDisabled()`](https://docs.videosdk.live/react-native/api/sdk-reference/use-participant/events#onstreamdisabled) event of the [`useParticipant()`](https://docs.videosdk.live/react-native/api/sdk-reference/use-participant/introduction) hook with the `Stream` object.
- Every Participant will receive the [`onPresenterChanged()`](https://docs.videosdk.live/react-native/api/sdk-reference/use-meeting/events#onpresenterchanged) callback of the [`useMeeting`](https://docs.videosdk.live/react-native/api/sdk-reference/use-meeting/introduction) hook, with the `presenterId` as `null`, indicating that there is no current presenter.

```
import { useParticipant, useMeeting } from "@videosdk.live/react-native-sdk";

const MeetingView = () => {
  //Callback for when the presenter changes
  function onPresenterChanged(presenterId) {
    if(presenterId){
      console.log(presenterId, "started screen share");
    }else{
      console.log("someone stopped screen share");
    }
  }

  const { participants } = useMeeting({
    onPresenterChanged,
    ...
  });

  return <>...</>
}

const ParticipantView = (participantId) => {
  //Callback for when the participant starts a stream
  function onStreamEnabled(stream) {
    if(stream.kind === 'share'){
      console.log("Share Stream On: onStreamEnabled", stream);
    }
  }

  //Callback for when the participant stops a stream
  function onStreamDisabled(stream) {
    if(stream.kind === 'share'){
      console.log("Share Stream Off: onStreamDisabled", stream);
    }
  }

  const {
    displayName
    ...
  } = useParticipant(participantId,{
    onStreamEnabled,
    onStreamDisabled
    ...
  });
  return <> Participant View </>;
}
```

By following the steps outlined in this guide, you can seamlessly integrate the Screen Share feature and empower your users to share their screens with ease, fostering better communication and collaboration.

## Conclusion

Screen Share enables participants to easily share their ideas, presentations, and information during corporate meetings, educational sessions, or creative collaborations. With VideoSDK's Screen Share functionality, you can create immersive and engaging video experiences that connect people from all over the world.

To unlock the full potential of VideoSDK and create easy-to-use video experiences, developers are encouraged to **[Sign up with VideoSDK](https://www.videosdk.live/signup?utm_source=organicseo&utm_medium=devto&utm_campaign=screenshare_ios_react_native)** today and Get **10000 minutes free** to take the video app to the next level!