[React native SDK] [iOS] - Cannot share screen after pressing share screen button

Description:

I'm currently using the Jitsi Meet React Native SDK on iOS, after pressing the screen sharing button in Jitsi function list, it will show an alert to tell the user it will record everything on your screen. Then, after pressing the share screen extension button, there is no sharing screen in meeting room, but the phone shows recording screen status. For other participant, nothing happens in meeting room.

For iOS, i have checked the following the official documentation (dev-guide-ios-sdk/#tldr) and set it for Screen Sharing integration.

Detailed steps to set screen sharing integration

1. Open my own react native project in Xcode, select File > New > Target in menu bar.
2. Create broadcast upload extension.
3. Copy SampleUploader.swift, SocketConnection.swift, DarwinNotificationCenter.swift, and Atomic.swift files from jitsi-meet-sdk-samples to my upload extension's folder
4. Add some key and value in app's info as below

<key>RTCScreenSharingExtension</key>
<string>org.reactjs.native.example.xxxxx.Broadcast-Extension</string>
<key>RTCAppGroupIdentifier</key>
<string>group.com.xxxxx.Broadcast-Extension</string>
<key>UIBackgroundModes</key>
<array>
<string>voip</string>
</array>

1. Update appGroupIdentifier in SampleHandler.swift, and it is same as the value of the key RTCScreenSharingExtension in app's info.plist

private enum Constants {
    // the App Group ID value that the app and the broadcast extension targets are setup with. It differs for each app.
    static let appGroupIdentifier = "group.com.xxxxx.Broadcast-Extension"
}

1. Set flags property to enabled

import { JitsiMeeting } from '@jitsi/react-native-sdk/index';
...
<JitsiMeeting
  ref={jitsiMeeting}
  style={styles.jitsiMeet}
  eventListeners={eventListeners as any}
  config={{
    domain: `meet.jit.si/${conferenceUrl}`,
    startWithVideoMuted: false,
    prejoinConfig: {
      enabled: false,
      hideDisplayName: false,
      hideExtraJoinButtons: ['no-audio', 'by-phone'],
      hideRoomName: true,
    },
    startScreenSharing: true,
    screenshotCapture: {
      enabled: true,
    },
  }}
  room={conferenceUrl}
  flags={{
    'ios.screensharing.enabled': true,
  }}
/>
...

1. Set app groups for both app and extension, it is also same as the value of the key RTCScreenSharingExtension in app's info.plist

Any steps did i miss?

Steps to reproduce:

1. Launch the project by Xcode and run it on an physical phone.
2. Join a meeting and click on the screen sharing button.
3. Click on the screen sharing button.
4. Click on the share screen extension button.

Actual behavior:

sharing screen process:

nothing on participant's meeting room:

Expected behavior:

The participant in meeting room should see the shared screen projected by iOS user.

Client information:

• Operating System: Apple M1 Pro (macOS 14.1.1)
• Physical phone: phone X

Additional information:

• "@jitsi/react-native-sdk": "1.0.2"
• "react-native": "0.72.3"
• "xcode version": "15.0.1"