Merge pull request #360 from dyte-io/dyte-io/react-native

docs: added screenshare docs for iOS React Native

Author: rohitkhirid

docs/rn-core/local-user/introduction.mdx

@@ -8,10 +8,9 @@ tags:
   - self
 ---
 
-
 # Introduction
 
-Accessible via `self` key within the `meeting` object, the local user object consists of all the information related to the current participant and methods to configure media and other states. 
+Accessible via `self` key within the `meeting` object, the local user object consists of all the information related to the current participant and methods to configure media and other states.
 
 ## Properties
 
@@ -46,10 +45,10 @@ Here is a list of properties that local user provides:
 - `roomJoined`: A <span className="tag-orange">boolean</span> value indicating if the local user is in the meeting
 - `roomState`: Indicates the state of the user in the meeting. It
   can take the following values:
-  
-   ```ts
-   "init" | "joined" | "waitlisted" | "rejected" | "kicked" | "left" | "ended"
-   ```
+
+  ```ts
+  'init' | 'joined' | 'waitlisted' | 'rejected' | 'kicked' | 'left' | 'ended';
+  ```
 
 ```mermaid
 stateDiagram-v2
@@ -70,8 +69,6 @@ stateDiagram-v2
 
 <br />
 
-
-
 ## Change the name of the local user
 
 Change the user's name by calling `setName` method. The changed name will
@@ -130,19 +127,115 @@ flowchart LR
     class eam basic;
 ```
 
-### Enable / Disable Screen share
-
-```ts
-// Enable Screenshare
-await meeting.self.enableScreenShare();
-
-// Disable Screenshare
-await meeting.self.disableScreenShare();
-
-// Get current status
-meeting.self.screenShareEnabled;
-```
-
+### Enable / Disable Screenshare
+
+<Tabs
+  groupId="mobile-pm"
+  defaultValue="android"
+  values={[
+    { label: "Android", value: "android" },
+    { label: "iOS", value: "ios" },
+  ]}
+>
+  <TabItem value="android">
+    ```ts
+    // Enable Screenshare
+    await meeting.self.enableScreenShare();
+
+    // Disable Screenshare
+    await meeting.self.disableScreenShare();
+
+    // Get current status
+    meeting.self.screenShareEnabled;
+    ```
+
+  </TabItem>
+  <TabItem value="ios">
+    - In <code>Xcode</code>, Go to Targets -> Add a target -> Choose <code>Broadcast Upload Extension</code> (Choose Swift as Language)  
+    - Go to <code>Targets Signing & Capabilities</code>, and enable <code>App Groups</code> for both App target and Broadcast Upload Extension target
+    - In the app's target, add the following in <code>Info.plist</code>:
+      ```
+        <key>RTCAppGroupIdentifier</key>
+        <string>YOUR_APP_GROUP</string>
+      ```
+    - Add these changes to your iOS folder's Podfile:
+      ```ruby
+      target 'YOUR_APP_TARGET_NAME'
+        ...
+
+        post_install do |installer|
+          ...
+          # Add these for Dyte iOS Screenshare
+          installer.pods_project.targets.each do |target|
+            target.build_configurations.each do |config|
+              config.build_settings['APPLICATION_EXTENSION_API_ONLY'] = 'No'
+              config.build_settings['ENABLE_USER_SCRIPT_SANDBOXING'] = 'No'
+            end
+          end
+          ...
+        end
+
+        ...
+      end
+
+      # Add this at the end of Podfile
+      pod 'YOUR_BROADCAST_EXTENSION_TARGET_NAME'
+          config = use_native_modules!
+          use_react_native!(:path => config["reactNativePath"], :hermes_enabled => false)
+          # Support ReactNativeCore Pod in the Broadcast Upload Extension
+          pod 'ReactNativeCore', :path => '../node_modules/@dytesdk/react-native-core'
+      end
+      ```
+    - Replace the <code>SampleHandler</code> in Broadcast Upload Extension with the following:
+      ```swift
+        import ReactNativeCore
+
+        class SampleHandler: DyteScreenshareHandler {
+          override init() {
+            super.init(appGroupIdentifier: "YOUR_APP_GROUP", bundleIdentifier: "BUNDLE_IDENTIFIER_FOR_BROADCAST_UPLOAD_EXTENSION")
+          }
+        }
+      ```
+      > <b>Note:</b>
+      Replace <code>YOUR_APP_GROUP</code> with your App Group Name and <code>BUNDLE_IDENTIFIER_FOR_BROADCAST_UPLOAD_EXTENSION</code> with Bundle Identifier of Screnshare Extension.
+    - Go to Broadcast Extension target -> <code>Build Settings</code>
+      - <code>Build Options</code> -> Set <code>User Script Sandboxing</code> to <code>No</code>
+      - <code>Signing</code> -> <code>Enable App Sandbox</code> to <code>No</code>
+    - Now enable the screenshare pop up handle and then enable Dyte's screenshare API:
+      ```tsx
+      // Import this component
+      import { NativeModules, findNodeHandle } from 'react-native';
+      import { ScreenCapturePickerView } from '@dyteinternals/react-native-webrtc';
+
+      function MyComponent() {
+
+        const screenCapturePickerViewRef = useRef(null);
+
+        // Function to show ScreenCapture Picker
+        const showScreenRecordPicker = async () => {
+          const handle = findNodeHandle(screenCapturePickerViewRef.current);
+          NativeModules.ScreenCapturePickerViewManager.show(handle);
+        };
+
+        // To enable screenshare
+        await showScreenRecordPicker();
+        await meeting.self.enableScreenShare();
+
+        // To disable screenshare
+        await meeting.self.disableScreenShare();
+
+        return (
+          ...
+          // Add this in components
+          <ScreenCapturePickerView ref={screenCapturePickerViewRef} />
+          ...
+        );
+
+      }
+      ```
+
+  </TabItem>
+</Tabs>
 <head>
   <title>React Native Core Introduction</title>
 </head>