@stream-io/video-react-native-sdk 1.29.4 → 1.30.0

package/ios/RTCViewPip.swift

@@ -10,11 +10,85 @@ import React
 
 @objc(RTCViewPip)
 class RTCViewPip: UIView {
-    
-    private var pictureInPictureController = StreamPictureInPictureController()
+
+    private var pictureInPictureController: StreamPictureInPictureController? = StreamPictureInPictureController()
     private var webRtcModule: WebRTCModule?
-    
+
     @objc var onPiPChange: RCTBubblingEventBlock?
+
+    // MARK: - Avatar Placeholder Properties
+
+    /// The participant's name for the avatar placeholder
+    @objc public var participantName: NSString? = nil {
+        didSet {
+            PictureInPictureLogger.log("RTCViewPip.participantName didSet: \(participantName as String? ?? "nil"), controller exists: \(pictureInPictureController != nil)")
+            pictureInPictureController?.participantName = participantName as String?
+        }
+    }
+
+    /// The URL string for the participant's profile image
+    @objc public var participantImageURL: NSString? = nil {
+        didSet {
+            PictureInPictureLogger.log("RTCViewPip.participantImageURL didSet: \(participantImageURL as String? ?? "nil"), controller exists: \(pictureInPictureController != nil)")
+            pictureInPictureController?.participantImageURL = participantImageURL as String?
+        }
+    }
+
+    // MARK: - Reconnection Properties
+
+    /// Whether the call is reconnecting - when true, shows reconnection view
+    @objc public var isReconnecting: Bool = false {
+        didSet {
+            pictureInPictureController?.isReconnecting = isReconnecting
+        }
+    }
+
+    // MARK: - Screen Sharing Properties
+
+    /// Whether screen sharing is active (used for content state tracking)
+    @objc public var isScreenSharing: Bool = false {
+        didSet {
+            pictureInPictureController?.isScreenSharing = isScreenSharing
+        }
+    }
+
+    // MARK: - Participant Overlay Properties
+
+    /// Whether the participant has audio enabled (shown in participant overlay)
+    @objc public var hasAudio: Bool = true {
+        didSet {
+            pictureInPictureController?.hasAudio = hasAudio
+        }
+    }
+
+    /// Whether the video track is paused (shown in participant overlay)
+    @objc public var isTrackPaused: Bool = false {
+        didSet {
+            pictureInPictureController?.isTrackPaused = isTrackPaused
+        }
+    }
+
+    /// Whether the participant is pinned (shown in participant overlay)
+    @objc public var isPinned: Bool = false {
+        didSet {
+            pictureInPictureController?.isPinned = isPinned
+        }
+    }
+
+    /// Whether the participant is currently speaking (shows border highlight)
+    @objc public var isSpeaking: Bool = false {
+        didSet {
+            pictureInPictureController?.isSpeaking = isSpeaking
+        }
+    }
+
+    /// The connection quality level (0: unknown, 1: poor, 2: good, 3: excellent)
+    @objc public var connectionQuality: Int = 0 {
+        didSet {
+            pictureInPictureController?.connectionQuality = connectionQuality
+        }
+    }
+
     @objc public var mirror: Bool = false {
         didSet {
             self.pictureInPictureController?.isMirrored = mirror
@@ -38,27 +112,36 @@ class RTCViewPip: UIView {
         didSet {
             // https://github.com/react-native-webrtc/react-native-webrtc/blob/8dfc9c394b4bf627c0214255466ebd3b160ca563/ios/RCTWebRTC/RTCVideoViewManager.m#L405-L418
             guard let streamURLString = streamURL as String? else {
-                NSLog("PiP - No streamURL set")
+                PictureInPictureLogger.log("No streamURL set, clearing track")
+                DispatchQueue.main.async {
+                    self.applyTrackStateToController(track: nil, isVideoEnabled: false)
+                }
                 return
             }
-            
+
             guard let stream = self.webRtcModule?.stream(forReactTag: streamURLString) else {
-                NSLog("PiP - No stream for streamURL: -\(streamURLString)")
+                PictureInPictureLogger.log("No stream for streamURL: -\(streamURLString), clearing track")
+                DispatchQueue.main.async {
+                    self.applyTrackStateToController(track: nil, isVideoEnabled: false)
+                }
                 return
             }
-            
+
             guard let videoTrack = stream.videoTracks.first else {
-                NSLog("PiP - No video track for streamURL: -\(streamURLString)")
+                PictureInPictureLogger.log("No video track for streamURL: -\(streamURLString), clearing track")
+                DispatchQueue.main.async {
+                    self.applyTrackStateToController(track: nil, isVideoEnabled: false)
+                }
                 return
             }
-            if (self.pictureInPictureController?.track == videoTrack) {
-                NSLog("PiP - Skipping video track for streamURL: -\(streamURLString)")
+            if isSameTrackInstance(self.pictureInPictureController?.track, videoTrack) {
+                PictureInPictureLogger.log("Skipping video track for streamURL: -\(streamURLString)")
                 return
             }
-            
+
             DispatchQueue.main.async {
-                NSLog("PiP - Setting video track for streamURL: -\(streamURLString) trackId: \(videoTrack.trackId)")
-                self.pictureInPictureController?.track = videoTrack
+                PictureInPictureLogger.log("Setting video track for streamURL: -\(streamURLString) trackId: \(videoTrack.trackId)")
+                self.applyTrackStateToController(track: videoTrack, isVideoEnabled: true)
             }
         }
     }
@@ -70,30 +153,40 @@ class RTCViewPip: UIView {
     
     @objc
     func onCallClosed() {
-        NSLog("PiP - pictureInPictureController cleanup called")
+        PictureInPictureLogger.log("pictureInPictureController cleanup called")
         self.pictureInPictureController?.cleanup()
         self.pictureInPictureController = nil
     }
     
     @objc
     func setPreferredContentSize(_ size: CGSize) {
-        NSLog("PiP - RTCViewPip setPreferredContentSize \(size)")
+        PictureInPictureLogger.log("RTCViewPip setPreferredContentSize \(size)")
         self.pictureInPictureController?.setPreferredContentSize(size)
     }
     
     override func didMoveToSuperview() {
         super.didMoveToSuperview()
         if self.superview == nil {
-            NSLog("PiP - RTCViewPip has been removed from its superview.")
+            PictureInPictureLogger.log("RTCViewPip has been removed from its superview.")
             NotificationCenter.default.removeObserver(self)
             DispatchQueue.main.async {
-                NSLog("PiP - onCallClosed called due to view detaching")
+                PictureInPictureLogger.log("onCallClosed called due to view detaching")
                 self.onCallClosed()
             }
         } else {
-            NSLog("PiP - RTCViewPip has been added to a superview.")
+            PictureInPictureLogger.log("RTCViewPip has been added to a superview.")
             setupNotificationObserver()
             DispatchQueue.main.async {
+                // Recreate controller if it was previously cleaned up
+                // This allows PiP to work again for subsequent calls
+                let wasNil = self.pictureInPictureController == nil
+                if wasNil {
+                    PictureInPictureLogger.log("Recreating pictureInPictureController for new session")
+                    self.pictureInPictureController = StreamPictureInPictureController()
+                    // Re-apply all current properties to the new controller
+                    // This is necessary because React Native may have set props while controller was nil
+                    self.applyCurrentPropertiesToController()
+                }
                 self.pictureInPictureController?.sourceView = self
                 self.pictureInPictureController?.isMirrored = self.mirror
                 // Set up PiP state change callback
@@ -103,20 +196,93 @@ class RTCViewPip: UIView {
                 if let reactTag = self.reactTag, let bridge = self.webRtcModule?.bridge {
                     if let manager = bridge.module(for: RTCViewPipManager.self) as? RTCViewPipManager,
                        let size = manager.getCachedSize(for: reactTag) {
-                        NSLog("PiP - Applying cached size \(size) for reactTag \(reactTag)")
+                        PictureInPictureLogger.log("Applying cached size \(size) for reactTag \(reactTag)")
                         self.setPreferredContentSize(size)
                     }
                 }
             }
         }
     }
+
+    /// Re-applies all current property values to the controller.
+    /// This is needed after controller recreation because didSet doesn't fire
+    /// when the property values haven't changed on the React Native side.
+    ///
+    /// NOTE: This reads from RTCViewPip's own properties (self.participantName, etc.)
+    /// which retain their values even after controller cleanup.
+    private func applyCurrentPropertiesToController() {
+        guard let controller = pictureInPictureController else {
+            PictureInPictureLogger.log("applyCurrentPropertiesToController: controller is nil, skipping")
+            return
+        }
+
+        PictureInPictureLogger.log("applyCurrentPropertiesToController STARTING:")
+        PictureInPictureLogger.log("  participantName: '\(participantName as String? ?? "nil")'")
+        PictureInPictureLogger.log("  participantImageURL: '\(participantImageURL as String? ?? "nil")'")
+        PictureInPictureLogger.log("  streamURL: '\(streamURL as String? ?? "nil")'")
+
+        let resolvedTrack: RTCVideoTrack?
+        let isVideoEnabled: Bool
+        if let streamURLString = streamURL as String?,
+           let stream = webRtcModule?.stream(forReactTag: streamURLString),
+           let videoTrack = stream.videoTracks.first {
+            PictureInPictureLogger.log("Re-applying track from streamURL: \(streamURLString), trackId: \(videoTrack.trackId)")
+            resolvedTrack = videoTrack
+            isVideoEnabled = true
+        } else {
+            // No stream URL or no track means video is disabled - show avatar
+            PictureInPictureLogger.log("No valid stream/track, setting isVideoEnabled=false for avatar")
+            resolvedTrack = nil
+            isVideoEnabled = false
+        }
+
+        // Keep PiP content transitions store-driven with one snapshot update.
+        controller.applyContentSnapshot(
+            track: resolvedTrack,
+            participantName: participantName as String?,
+            participantImageURL: participantImageURL as String?,
+            isVideoEnabled: isVideoEnabled,
+            isScreenSharing: isScreenSharing,
+            isReconnecting: isReconnecting
+        )
+
+        controller.hasAudio = hasAudio
+        controller.isTrackPaused = isTrackPaused
+        controller.isPinned = isPinned
+        controller.isSpeaking = isSpeaking
+        controller.connectionQuality = connectionQuality
+        PictureInPictureLogger.log("applyCurrentPropertiesToController COMPLETED")
+    }
+
+    /// Applies track/video availability without splitting a single change into multiple setters.
+    private func applyTrackStateToController(track: RTCVideoTrack?, isVideoEnabled: Bool) {
+        pictureInPictureController?.applyContentSnapshot(
+            track: track,
+            participantName: participantName as String?,
+            participantImageURL: participantImageURL as String?,
+            isVideoEnabled: isVideoEnabled,
+            isScreenSharing: isScreenSharing,
+            isReconnecting: isReconnecting
+        )
+    }
+
+    private func isSameTrackInstance(_ lhs: RTCVideoTrack?, _ rhs: RTCVideoTrack?) -> Bool {
+        switch (lhs, rhs) {
+        case (nil, nil):
+            return true
+        case let (lhsTrack?, rhsTrack?):
+            return lhsTrack === rhsTrack
+        default:
+            return false
+        }
+    }
     
     private func sendPiPChangeEvent(isActive: Bool) {
         guard let onPiPChange = onPiPChange else {
             return
         }
-        
-        NSLog("PiP - Sending PiP state change event: \(isActive)")
+
+        PictureInPictureLogger.log("Sending PiP state change event: \(isActive)")
         onPiPChange(["active": isActive])
     }
 }

package/ios/RTCViewPipManager.mm

@@ -13,6 +13,15 @@
 RCT_EXPORT_VIEW_PROPERTY(streamURL, NSString)
 RCT_EXPORT_VIEW_PROPERTY(mirror, BOOL)
 RCT_EXPORT_VIEW_PROPERTY(onPiPChange, RCTBubblingEventBlock)
+RCT_EXPORT_VIEW_PROPERTY(participantName, NSString)
+RCT_EXPORT_VIEW_PROPERTY(participantImageURL, NSString)
+RCT_EXPORT_VIEW_PROPERTY(isReconnecting, BOOL)
+RCT_EXPORT_VIEW_PROPERTY(isScreenSharing, BOOL)
+RCT_EXPORT_VIEW_PROPERTY(hasAudio, BOOL)
+RCT_EXPORT_VIEW_PROPERTY(isTrackPaused, BOOL)
+RCT_EXPORT_VIEW_PROPERTY(isPinned, BOOL)
+RCT_EXPORT_VIEW_PROPERTY(isSpeaking, BOOL)
+RCT_EXPORT_VIEW_PROPERTY(connectionQuality, NSInteger)
 RCT_EXTERN_METHOD(onCallClosed:(nonnull NSNumber*) reactTag)
 RCT_EXTERN_METHOD(setPreferredContentSize:(nonnull NSNumber *)reactTag width:(CGFloat)w height:(CGFloat)h);
 

package/ios/RTCViewPipManager.swift

@@ -32,7 +32,7 @@ class RTCViewPipManager: RCTViewManager {
                     pipView.onCallClosed()
                 }
             } else {
-                NSLog("PiP - onCallClosed cant be called, Invalid view returned from registry, expecting RTCViewPip")
+                PictureInPictureLogger.log("onCallClosed cant be called, Invalid view returned from registry, expecting RTCViewPip")
             }
         })
     }
@@ -51,7 +51,7 @@ class RTCViewPipManager: RCTViewManager {
             } else {
                 // If the view is not found, cache the size.
                 // this happens when this method is called before the view can attach react super view
-                NSLog("PiP - View not found for reactTag \(reactTag), caching size.")
+                PictureInPictureLogger.log("View not found for reactTag \(reactTag), caching size.")
                 self.cachedSizes[reactTag] = size
             }
         })
@@ -60,7 +60,7 @@ class RTCViewPipManager: RCTViewManager {
     func getCachedSize(for reactTag: NSNumber) -> CGSize? {
         let size = self.cachedSizes.removeValue(forKey: reactTag)
         if size != nil {
-            NSLog("PiP - Found and removed cached size for reactTag \(reactTag).")
+            PictureInPictureLogger.log("Found and removed cached size for reactTag \(reactTag).")
         }
         return size
     }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@stream-io/video-react-native-sdk",
-  "version": "1.29.4",
+  "version": "1.30.0",
   "description": "Stream Video SDK for React Native",
   "author": "https://getstream.io",
   "homepage": "https://getstream.io/video/docs/react-native/",
@@ -50,8 +50,8 @@
     "!**/.*"
   ],
   "dependencies": {
-    "@stream-io/video-client": "1.43.0",
-    "@stream-io/video-react-bindings": "1.13.8",
+    "@stream-io/video-client": "1.44.0",
+    "@stream-io/video-react-bindings": "1.13.9",
     "intl-pluralrules": "2.0.1",
     "lodash.merge": "^4.6.2",
     "react-native-url-polyfill": "^3.0.0",

package/src/components/Call/CallContent/CallContent.tsx

@@ -21,11 +21,12 @@ import { useCall, useCallStateHooks } from '@stream-io/video-react-bindings';
 import {
   CallingState,
   type StreamReaction,
+  type StreamVideoParticipant,
   videoLoggerSystem,
 } from '@stream-io/video-client';
+import { debounceTime } from 'rxjs';
 
 import { Z_INDEX } from '../../../constants';
-import { useDebouncedValue } from '../../../utils/hooks';
 import {
   FloatingParticipantView as DefaultFloatingParticipantView,
   type FloatingParticipantViewProps,
@@ -134,16 +135,23 @@ export const CallContent = ({
     theme: { callContent },
   } = useTheme();
   const call = useCall();
-  const {
-    useHasOngoingScreenShare,
-    useRemoteParticipants,
-    useLocalParticipant,
-  } = useCallStateHooks();
+  const { useHasOngoingScreenShare, useLocalParticipant } = useCallStateHooks();
 
   useAutoEnterPiPEffect(disablePictureInPicture);
 
-  const _remoteParticipants = useRemoteParticipants();
-  const remoteParticipants = useDebouncedValue(_remoteParticipants, 300); // we debounce the remote participants to avoid unnecessary rerenders that happen when participant tracks are all subscribed simultaneously
+  const [remoteParticipants, setRemoteParticipants] = useState<
+    StreamVideoParticipant[]
+  >(() => call?.state.remoteParticipants ?? []);
+  useEffect(() => {
+    if (!call) {
+      setRemoteParticipants([]);
+      return;
+    }
+    const sub = call.state.remoteParticipants$
+      .pipe(debounceTime(300))
+      .subscribe(setRemoteParticipants);
+    return () => sub.unsubscribe();
+  }, [call]);
   const localParticipant = useLocalParticipant();
   const isInPiPMode = useIsInPiPMode();
   const hasScreenShare = useHasOngoingScreenShare();

package/src/components/Call/CallContent/RTCViewPipIOS.tsx

@@ -1,21 +1,25 @@
 import {
   CallingState,
+  SfuModels,
+  hasAudio,
+  hasPausedTrack,
   hasScreenShare,
-  speakerLayoutSortPreset,
   type StreamVideoParticipant,
   videoLoggerSystem,
   type VideoTrackType,
+  hasVideo,
+  isPinned,
 } from '@stream-io/video-client';
 import { useCall, useCallStateHooks } from '@stream-io/video-react-bindings';
 import type { MediaStream } from '@stream-io/react-native-webrtc';
-import React, { useEffect, useMemo, useCallback } from 'react';
+import React, { useEffect, useCallback, useState } from 'react';
 import { findNodeHandle } from 'react-native';
 import {
   onNativeCallClosed,
   onNativeDimensionsUpdated,
   RTCViewPipNative,
 } from './RTCViewPipNative';
-import { useDebouncedValue } from '../../../utils/hooks';
+import { debounceTime } from 'rxjs';
 import { shouldDisableIOSLocalVideoOnBackgroundRef } from '../../../utils/internal/shouldDisableIOSLocalVideoOnBackground';
 import { useTrackDimensions } from '../../../hooks/useTrackDimensions';
 import { isInPiPMode$ } from '../../../utils/internal/rxSubjects';
@@ -40,12 +44,26 @@ export const RTCViewPipIOS = React.memo((props: Props) => {
     onPiPChange,
   } = props;
   const call = useCall();
-  const { useParticipants, useCameraState } = useCallStateHooks();
-  const _allParticipants = useParticipants({
-    sortBy: speakerLayoutSortPreset,
-  });
+  const { useCameraState, useCallCallingState } = useCallStateHooks();
+  const callingState = useCallCallingState();
   const { direction } = useCameraState();
-  const allParticipants = useDebouncedValue(_allParticipants, 300); // we debounce the participants to avoid unnecessary rerenders that happen when participant tracks are all subscribed simultaneously
+
+  const [allParticipants, setAllParticipants] = useState<
+    StreamVideoParticipant[]
+  >(call?.state.participants ?? []);
+
+  // we debounce the participants to avoid unnecessary rerenders
+  // that happen when participant tracks are all subscribed simultaneously
+  useEffect(() => {
+    if (!call) {
+      setAllParticipants([]);
+      return;
+    }
+    const subscription = call.state.participants$
+      .pipe(debounceTime(300))
+      .subscribe(setAllParticipants);
+    return () => subscription.unsubscribe();
+  }, [call]);
 
   const [dominantSpeaker, dominantSpeaker2] = allParticipants.filter(
     (participant) =>
@@ -118,24 +136,63 @@ export const RTCViewPipIOS = React.memo((props: Props) => {
     ? screenShareStream
     : videoStream) as unknown as MediaStream | undefined;
 
+  const isPublishingTrack =
+    isScreenSharing ||
+    (participantInSpotlight && hasVideo(participantInSpotlight));
+
+  const streamURL = isPublishingTrack
+    ? videoStreamToRender?.toURL()
+    : undefined;
+
   const mirror = isScreenSharing
     ? false
     : mirrorOverride !== undefined
       ? mirrorOverride
       : !!participantInSpotlight?.isLocalParticipant && direction === 'front';
 
-  const streamURL = useMemo(() => {
-    if (!videoStreamToRender) {
-      return undefined;
-    }
-    return videoStreamToRender?.toURL();
-  }, [videoStreamToRender]);
-
   const handlePiPChange = (event: { nativeEvent: { active: boolean } }) => {
     isInPiPMode$.next(event.nativeEvent.active);
     onPiPChange?.(event.nativeEvent.active);
   };
 
+  // Get participant info for avatar placeholder
+  const participantName = participantInSpotlight?.name || undefined;
+  const participantImageURL = participantInSpotlight?.image || undefined;
+
+  // Determine if the call is reconnecting or offline
+  const isReconnecting =
+    callingState === CallingState.MIGRATING ||
+    callingState === CallingState.RECONNECTING ||
+    callingState === CallingState.RECONNECTING_FAILED ||
+    callingState === CallingState.OFFLINE;
+
+  // Determine if the participant has audio enabled
+  const participantHasAudio = participantInSpotlight
+    ? hasAudio(participantInSpotlight)
+    : true;
+
+  // Determine if the video track is paused
+  const trackType: VideoTrackType = isScreenSharing
+    ? 'screenShareTrack'
+    : 'videoTrack';
+
+  const isVideoTrackPaused = participantInSpotlight
+    ? hasPausedTrack(participantInSpotlight, trackType)
+    : false;
+
+  // Determine if the participant is pinned
+  const participantIsPinned = participantInSpotlight
+    ? isPinned(participantInSpotlight)
+    : false;
+
+  // Determine if the participant is speaking
+  const participantIsSpeaking = participantInSpotlight?.isSpeaking ?? false;
+
+  // Get connection quality (convert enum to number: UNSPECIFIED=0, POOR=1, GOOD=2, EXCELLENT=3)
+  const participantConnectionQuality =
+    participantInSpotlight?.connectionQuality ??
+    SfuModels.ConnectionQuality.UNSPECIFIED;
+
   return (
     <>
       <RTCViewPipNative
@@ -143,6 +200,15 @@ export const RTCViewPipIOS = React.memo((props: Props) => {
         mirror={mirror}
         ref={nativeRef}
         onPiPChange={handlePiPChange}
+        participantName={participantName}
+        participantImageURL={participantImageURL}
+        isReconnecting={isReconnecting}
+        isScreenSharing={isScreenSharing}
+        hasAudio={participantHasAudio}
+        isTrackPaused={isVideoTrackPaused}
+        isPinned={participantIsPinned}
+        isSpeaking={participantIsSpeaking}
+        connectionQuality={participantConnectionQuality}
       />
       {participantInSpotlight && (
         <DimensionsUpdatedRenderless

package/src/components/Call/CallContent/RTCViewPipNative.tsx

@@ -18,6 +18,24 @@ type RTCViewPipNativeProps = {
   streamURL?: string;
   mirror?: boolean;
   onPiPChange?: (event: { nativeEvent: PiPChangeEvent }) => void;
+  /** The participant's name for the avatar placeholder when video is disabled */
+  participantName?: string;
+  /** The URL string for the participant's profile image */
+  participantImageURL?: string;
+  /** Whether the call is reconnecting - when true, shows reconnection view */
+  isReconnecting?: boolean;
+  /** Whether screen sharing is active (used for content state tracking) */
+  isScreenSharing?: boolean;
+  /** Whether the participant has audio enabled (shown in participant overlay) */
+  hasAudio?: boolean;
+  /** Whether the video track is paused (shown in participant overlay) */
+  isTrackPaused?: boolean;
+  /** Whether the participant is pinned (shown in participant overlay) */
+  isPinned?: boolean;
+  /** Whether the participant is currently speaking (shows border highlight) */
+  isSpeaking?: boolean;
+  /** The connection quality level (0: unknown, 1: poor, 2: good, 3: excellent) */
+  connectionQuality?: number;
 };
 
 const NativeComponent: HostComponent<RTCViewPipNativeProps> =
@@ -65,6 +83,24 @@ export const RTCViewPipNative = React.memo(
         mirror={props.mirror}
         // eslint-disable-next-line react/prop-types
         onPiPChange={props.onPiPChange}
+        // eslint-disable-next-line react/prop-types
+        participantName={props.participantName}
+        // eslint-disable-next-line react/prop-types
+        participantImageURL={props.participantImageURL}
+        // eslint-disable-next-line react/prop-types
+        isReconnecting={props.isReconnecting}
+        // eslint-disable-next-line react/prop-types
+        isScreenSharing={props.isScreenSharing}
+        // eslint-disable-next-line react/prop-types
+        hasAudio={props.hasAudio}
+        // eslint-disable-next-line react/prop-types
+        isTrackPaused={props.isTrackPaused}
+        // eslint-disable-next-line react/prop-types
+        isPinned={props.isPinned}
+        // eslint-disable-next-line react/prop-types
+        isSpeaking={props.isSpeaking}
+        // eslint-disable-next-line react/prop-types
+        connectionQuality={props.connectionQuality}
         // @ts-expect-error - types issue
         ref={ref}
       />

package/src/components/Call/CallLayout/CallParticipantsGrid.tsx

@@ -1,7 +1,7 @@
-import React from 'react';
+import React, { useEffect, useState } from 'react';
 import { StyleSheet, View, type ViewStyle } from 'react-native';
-import { useCallStateHooks } from '@stream-io/video-react-bindings';
-import { useDebouncedValue } from '../../../utils/hooks/useDebouncedValue';
+import { useCall, useCallStateHooks } from '@stream-io/video-react-bindings';
+import { debounceTime } from 'rxjs';
 import {
   CallParticipantsList as DefaultCallParticipantsList,
   type CallParticipantsListComponentProps,
@@ -49,19 +49,33 @@ export const CallParticipantsGrid = ({
   const {
     theme: { colors, callParticipantsGrid },
   } = useTheme();
-  const {
-    useRemoteParticipants,
-    useParticipants,
-    useLocalParticipant,
-    useDominantSpeaker,
-  } = useCallStateHooks();
-  const _remoteParticipants = useRemoteParticipants();
+  const call = useCall();
+  const { useLocalParticipant, useDominantSpeaker } = useCallStateHooks();
   const localParticipant = useLocalParticipant();
-  const _allParticipants = useParticipants();
   const dominantSpeaker = useDominantSpeaker();
-  // we debounce the participants arrays to avoid unnecessary rerenders that happen when participant tracks are all subscribed simultaneously
-  const remoteParticipants = useDebouncedValue(_remoteParticipants, 300);
-  const allParticipants = useDebouncedValue(_allParticipants, 300);
+  const [remoteParticipants, setRemoteParticipants] = useState<
+    StreamVideoParticipant[]
+  >(() => call?.state.remoteParticipants ?? []);
+  const [allParticipants, setAllParticipants] = useState<
+    StreamVideoParticipant[]
+  >(() => call?.state.participants ?? []);
+  useEffect(() => {
+    if (!call) {
+      setRemoteParticipants([]);
+      setAllParticipants([]);
+      return;
+    }
+    const sub1 = call.state.remoteParticipants$
+      .pipe(debounceTime(300))
+      .subscribe(setRemoteParticipants);
+    const sub2 = call.state.participants$
+      .pipe(debounceTime(300))
+      .subscribe(setAllParticipants);
+    return () => {
+      sub1.unsubscribe();
+      sub2.unsubscribe();
+    };
+  }, [call]);
   const landscapeStyles: ViewStyle = {
     flexDirection: landscape ? 'row' : 'column',
   };