FCE-2645: Investigate iOS error when leaving screen with screen sharing

examples/mobile-client/fishjam-chat/app/room/[roomName].tsx

@@ -9,7 +9,7 @@ import {
 } from '@fishjam-cloud/react-native-client';
 import { router, useLocalSearchParams } from 'expo-router';
 import React, { useCallback, useEffect } from 'react';
-import { StyleSheet, View } from 'react-native';
+import { Platform, StyleSheet, View } from 'react-native';
 import { SafeAreaView } from 'react-native-safe-area-context';
 
 import { InCallButton, VideosGrid } from '../../components';
@@ -28,9 +28,20 @@ export default function RoomScreen() {
     startStreaming,
     stopStreaming,
     stream: screenShareStream,
+    presentBroadcastPicker,
   } = useScreenShare();
 
   const handleDisconnect = useCallback(async () => {
+    if (screenShareStream && Platform.OS === 'ios') {
+      // iOS: must end the broadcast via the system sheet first to avoid
+      // the "Screen sharing stopped" error dialog. Tap leave again after.
+      try {
+        await presentBroadcastPicker();
+        return;
+      } catch (e) {
+        console.error('Error presenting broadcast picker:', e);
+      }
+    }
     try {
       if (screenShareStream) {
         await stopStreaming();
@@ -40,19 +51,28 @@ export default function RoomScreen() {
       console.error('Error leaving room:', e);
     }
     router.replace('/(tabs)/room');
-  }, [leaveRoom, screenShareStream, stopStreaming]);
+  }, [leaveRoom, presentBroadcastPicker, screenShareStream, stopStreaming]);
 
   const handleToggleScreenShare = useCallback(async () => {
     try {
       if (screenShareStream) {
-        await stopStreaming();
+        if (Platform.OS === 'ios') {
+          await presentBroadcastPicker();
+        } else {
+          await stopStreaming();
+        }
       } else {
         await startStreaming();
       }
     } catch (e) {
       console.error('Error toggling screen share:', e);
     }
-  }, [screenShareStream, startStreaming, stopStreaming]);
+  }, [
+    presentBroadcastPicker,
+    screenShareStream,
+    startStreaming,
+    stopStreaming,
+  ]);
 
   useForegroundService({
     channelName: 'Fishjam Chat Notifications',

packages/mobile-client/src/overrides/hooks.ts

@@ -12,6 +12,7 @@ import {
 } from '@fishjam-cloud/react-client';
 import type { CallKitAction, CallKitConfig, MediaStream as RNMediaStream } from '@fishjam-cloud/react-native-webrtc';
 import {
+  presentBroadcastPicker,
   useCallKit as useCallKitRNWebRTC,
   useCallKitEvent as useCallKitEventRNWebRTC,
   useCallKitService as useCallKitServiceRNWebRTC,
@@ -78,6 +79,7 @@ export function useScreenShare(): UseScreenShareResult {
     audioTrack: result.audioTrack as UseScreenShareResult['audioTrack'],
     currentTracksMiddleware: result.currentTracksMiddleware as TracksMiddleware | null,
     setTracksMiddleware,
+    presentBroadcastPicker,
   };
 }
 

packages/mobile-client/src/overrides/types.ts

@@ -87,6 +87,14 @@ export type UseScreenShareResult = Omit<
   audioTrack: RNMediaStreamTrack | null;
   currentTracksMiddleware: TracksMiddleware | null;
   setTracksMiddleware: (middleware: TracksMiddleware | null) => Promise<void>;
+  /**
+   * iOS only. Presents the system `RPSystemBroadcastPickerView`. When a
+   * broadcast is active, this opens the system "Stop Broadcast" sheet so
+   * the user can end it cleanly (via `broadcastFinished()`) and avoid the
+   * "Screen sharing stopped" error dialog that `stopStreaming` triggers
+   * by force-closing the host-side socket. No-op on non-iOS.
+   */
+  presentBroadcastPicker: () => Promise<void>;
 };
 
 export type UseCustomSourceResult = Omit<ReturnType<typeof useCustomSourceReactClient>, 'stream' | 'setStream'> & {