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

package/ios/StreamVideoReactNative.m

@@ -4,7 +4,6 @@
 #import <React/RCTUIManagerUtils.h>
 #import <UIKit/UIKit.h>
 #import <CallKit/CallKit.h>
-#import <PushKit/PushKit.h>
 #import "StreamVideoReactNative.h"
 #import "WebRTCModule.h"
 #import "WebRTCModuleOptions.h"
@@ -15,8 +14,12 @@
 NSNotificationName const kBroadcastStartedNotification = @"iOS_BroadcastStarted";
 NSNotificationName const kBroadcastStoppedNotification = @"iOS_BroadcastStopped";
 
+static NSMutableDictionary *_incomingCallUUIDsByCallID = nil;
+static NSMutableDictionary *_incomingCallCidsByUUID = nil;
 static dispatch_queue_t _dictionaryQueue = nil;
 
+static BOOL _shouldRejectCallWhenBusy = NO;
+
 void broadcastNotificationCallback(CFNotificationCenterRef center,
                                    void *observer,
                                    CFStringRef name,
@@ -57,196 +60,11 @@ RCT_EXPORT_MODULE();
     static dispatch_once_t onceToken;
     dispatch_once(&onceToken, ^{
         _dictionaryQueue = dispatch_queue_create("com.stream.video.dictionary", DISPATCH_QUEUE_SERIAL);
+        _incomingCallUUIDsByCallID = [NSMutableDictionary dictionary];
+        _incomingCallCidsByUUID = [NSMutableDictionary dictionary];
     });
 }
 
-+(BOOL)canRegisterCall {
-    Class callingxClass = NSClassFromString(@"Callingx");
-    if (!callingxClass) {
-        #if DEBUG
-        NSLog(@"[StreamVideoReactNative][canRegisterCall] Callingx not available");
-        #endif
-        return YES;
-    }
-    
-    SEL selector = @selector(canRegisterCall);
-    if (![callingxClass respondsToSelector:selector]) {
-        #if DEBUG
-        NSLog(@"[StreamVideoReactNative][canRegisterCall] Callingx does not respond to canRegisterCall selector");
-        #endif
-        return YES;
-    }
-    
-    NSMethodSignature *signature = [callingxClass methodSignatureForSelector:selector];
-    NSInvocation *invocation = [NSInvocation invocationWithMethodSignature:signature];
-    [invocation setTarget:callingxClass];
-    [invocation setSelector:selector];
-    [invocation invoke];
-    
-    BOOL canRegister = NO;
-    [invocation getReturnValue:&canRegister];
-    
-    #if DEBUG
-    NSLog(@"[StreamVideoReactNative][canRegisterCall] canRegisterCall = %@", canRegister ? @"YES" : @"NO");
-    #endif
-    
-    return canRegister;
-}
-
-+(void)voipRegistration {
-    Class voipManagerClass = NSClassFromString(@"Callingx.VoipNotificationsManager");
-    if (!voipManagerClass) {
-        // Fallback: Try the unmangled name (might work depending on Swift version)
-        voipManagerClass = NSClassFromString(@"VoipNotificationsManager");
-    }
-    
-    if (!voipManagerClass) {
-        #if DEBUG
-        NSLog(@"[StreamVideoReactNative][voipRegistration] VoipNotificationsManager not available");
-        #endif
-        return;
-    }
-    
-    SEL selector = @selector(voipRegistration);
-    if (![voipManagerClass respondsToSelector:selector]) {
-        #if DEBUG
-        NSLog(@"[StreamVideoReactNative][voipRegistration] VoipNotificationsManager does not respond to voipRegistration");
-        #endif
-        return;
-    }
-    
-    [voipManagerClass voipRegistration];
-}
-
-+(void)didUpdatePushCredentials:(PKPushCredentials *)credentials forType:(NSString *)type {
-    Class voipManagerClass = NSClassFromString(@"Callingx.VoipNotificationsManager");
-    if (!voipManagerClass) {
-        // Fallback: Try the unmangled name (might work depending on Swift version)
-        voipManagerClass = NSClassFromString(@"VoipNotificationsManager");
-    }
-    
-    if (!voipManagerClass) {
-        #if DEBUG
-        NSLog(@"[StreamVideoReactNative][didUpdatePushCredentials] VoipNotificationsManager not available");
-        #endif
-        return;
-    }
-    
-    SEL selector = @selector(didUpdatePushCredentials:forType:);
-    if (![voipManagerClass respondsToSelector:selector]) {
-        #if DEBUG
-        NSLog(@"[StreamVideoReactNative][didUpdatePushCredentials] VoipNotificationsManager does not respond to didUpdatePushCredentials:forType:");
-        #endif
-        return;
-    }
-    
-    [voipManagerClass didUpdatePushCredentials:credentials forType:type];
-}
-
-+(void)didReceiveIncomingPush:(PKPushPayload *)payload forType:(NSString *)type completionHandler: (void (^_Nullable)(void)) completion {
-    NSDictionary *streamPayload = payload.dictionaryPayload[@"stream"];
-    if (!streamPayload) {
-        #if DEBUG
-        NSLog(@"[StreamVideoReactNative][didReceiveIncomingPush] Stream payload not found");
-        #endif
-        if (completion) {
-            completion();
-        }
-        return;
-    }
-    
-    NSString *createdCallerName = streamPayload[@"created_by_display_name"];
-    NSString *callCid = streamPayload[@"call_cid"];
-    if (!createdCallerName || !callCid) {
-        #if DEBUG
-        NSLog(@"[StreamVideoReactNative][didReceiveIncomingPush] Missing required fields: created_by_display_name or call_cid");
-        #endif
-        if (completion) {
-            completion();
-        }
-        return;
-    }
-    
-    if (![StreamVideoReactNative canRegisterCall]) {
-        if (completion) {
-            completion();
-        }
-        return;
-    }
-
-    [StreamVideoReactNative reportNewIncomingCall:streamPayload forType:type completionHandler:completion];
-    [StreamVideoReactNative didReceiveIncomingPushWithPayload:payload forType:type];
-}
-
-+(void)reportNewIncomingCall:(NSDictionary *)streamPayload forType:(NSString *)type completionHandler: (void (^_Nullable)(void)) completion {
-    Class callingxClass = NSClassFromString(@"Callingx");
-    if (!callingxClass) {
-        NSLog(@"[StreamVideoReactNative][didReceiveIncomingPush] Callingx not available");
-        return;
-    }
-    
-    SEL selector = @selector(reportNewIncomingCall:handle:handleType:hasVideo:localizedCallerName:supportsHolding:supportsDTMF:supportsGrouping:supportsUngrouping:payload:withCompletionHandler:);
-    if (![callingxClass respondsToSelector:selector]) {
-        #if DEBUG
-        NSLog(@"[StreamVideoReactNative][didReceiveIncomingPush] Callingx does not respond to selector");
-        #endif
-        return;
-    }
-    
-    NSString *callCid = streamPayload[@"call_cid"];
-    NSString *createdCallerName = streamPayload[@"created_by_display_name"];
-    NSString *videoIncluded = streamPayload[@"video"];
-    BOOL hasVideo = [videoIncluded isEqualToString:@"false"] ? NO : YES;
-    NSString *handleType = @"generic";
-    BOOL supportsHolding = NO;
-    BOOL supportsDTMF = NO;
-    BOOL supportsGrouping = NO;
-    BOOL supportsUngrouping = NO;
-    void (^completionHandler)(void) = completion;
-
-    NSMethodSignature *signature = [callingxClass methodSignatureForSelector:selector];
-    NSInvocation *invocation = [NSInvocation invocationWithMethodSignature:signature];
-    [invocation setTarget:callingxClass];
-    [invocation setSelector:selector];
-    [invocation setArgument:&callCid atIndex:2];
-    [invocation setArgument:&createdCallerName atIndex:3];
-    [invocation setArgument:&handleType atIndex:4];
-    [invocation setArgument:&hasVideo atIndex:5];
-    [invocation setArgument:&createdCallerName atIndex:6];
-    [invocation setArgument:&supportsHolding atIndex:7];
-    [invocation setArgument:&supportsDTMF atIndex:8];
-    [invocation setArgument:&supportsGrouping atIndex:9];
-    [invocation setArgument:&supportsUngrouping atIndex:10];
-    [invocation setArgument:&streamPayload atIndex:11];
-    [invocation setArgument:&completionHandler atIndex:12];
-    [invocation invoke];
-}
-
-+(void)didReceiveIncomingPushWithPayload:(PKPushPayload *)payload forType:(NSString *)type {
-    Class voipManagerClass = NSClassFromString(@"Callingx.VoipNotificationsManager");
-    if (!voipManagerClass) {
-        // Fallback: Try the unmangled name (might work depending on Swift version)
-        voipManagerClass = NSClassFromString(@"VoipNotificationsManager");
-    }
-    
-    if (!voipManagerClass) {
-        #if DEBUG
-        NSLog(@"[StreamVideoReactNative][didReceiveIncomingPushWithPayload] VoipNotificationsManager not available");
-        #endif
-        return;
-    }
-    
-    SEL selector = @selector(didReceiveIncomingPushWithPayload:forType:);
-    if (![voipManagerClass respondsToSelector:selector]) {
-        #if DEBUG
-        NSLog(@"[StreamVideoReactNative][didReceiveIncomingPushWithPayload] VoipNotificationsManager does not respond to didReceiveIncomingPushWithPayload:forType:");
-        #endif
-        return;
-    }
-    
-    [voipManagerClass didReceiveIncomingPushWithPayload:payload forType:type];
-}
-
 -(instancetype)init {
     if ((self = [super init])) {
         _notificationCenter = CFNotificationCenterGetDarwinNotifyCenter();
@@ -373,6 +191,71 @@ RCT_EXPORT_METHOD(currentThermalState:(RCTPromiseResolveBlock)resolve rejecter:(
     }
 }
 
++(void)registerIncomingCall:(NSString *)cid uuid:(NSString *)uuid {
+    [StreamVideoReactNative initializeSharedDictionaries];
+    dispatch_sync(_dictionaryQueue, ^{
+        
+#ifdef DEBUG
+        NSLog(@"registerIncomingCall cid:%@ -> uuid:%@",cid,uuid);
+#endif
+        NSString *lowercaseUUID = [uuid lowercaseString];
+        _incomingCallUUIDsByCallID[cid] = lowercaseUUID;
+        _incomingCallCidsByUUID[lowercaseUUID] = cid;
+    });
+}
+
+RCT_EXPORT_METHOD(getIncomingCallUUid:(NSString *)cid
+                  resolver:(RCTPromiseResolveBlock)resolve
+                  rejecter:(RCTPromiseRejectBlock)reject)
+{
+    dispatch_sync(_dictionaryQueue, ^{
+        NSString *uuid = _incomingCallUUIDsByCallID[cid];
+        if (uuid) {
+            resolve(uuid);
+        } else {
+            NSString *errorString = [NSString stringWithFormat:@"requested incoming call not found for cid: %@", cid];
+            reject(@"access_failure", errorString, nil);
+        }
+    });
+}
+
+RCT_EXPORT_METHOD(getIncomingCallCid:(NSString *)uuid
+                  resolver:(RCTPromiseResolveBlock)resolve
+                  rejecter:(RCTPromiseRejectBlock)reject)
+{
+    dispatch_sync(_dictionaryQueue, ^{
+        NSString *lowercaseUUID = [uuid lowercaseString];
+        NSString *foundCid = _incomingCallCidsByUUID[lowercaseUUID];
+        
+        if (foundCid) {
+            resolve(foundCid);
+        } else {
+            NSString *errorString = [NSString stringWithFormat:@"requested incoming call not found for uuid: %@", uuid];
+            reject(@"access_failure", errorString, nil);
+        }
+    });
+}
+
+RCT_EXPORT_METHOD(removeIncomingCall:(NSString *)cid
+                  resolver:(RCTPromiseResolveBlock)resolve
+                  rejecter:(RCTPromiseRejectBlock)reject)
+{
+    dispatch_sync(_dictionaryQueue, ^{
+        NSString *uuid = _incomingCallUUIDsByCallID[cid];
+        if (uuid) {
+#ifdef DEBUG
+            NSLog(@"removeIncomingCall cid:%@ -> uuid:%@",cid,uuid);
+#endif
+            
+            [_incomingCallUUIDsByCallID removeObjectForKey:cid];
+            [_incomingCallCidsByUUID removeObjectForKey:uuid];
+            resolve(@YES);
+        } else {
+            resolve(@NO);
+        }
+    });
+}
+
 RCT_EXPORT_METHOD(captureRef:(nonnull NSNumber *)reactTag
                   options:(NSDictionary *)options
                   resolver:(RCTPromiseResolveBlock)resolve
@@ -510,7 +393,17 @@ RCT_EXPORT_METHOD(checkPermission:(NSString *)permission
     ];
 }
 
-//current implementation will return any registered calls not only stream calls
++(BOOL)shouldRejectCallWhenBusy {
+    return _shouldRejectCallWhenBusy;
+}
+
+RCT_EXPORT_METHOD(setShouldRejectCallWhenBusy:(BOOL)shouldReject) {
+    _shouldRejectCallWhenBusy = shouldReject;
+#ifdef DEBUG
+    NSLog(@"setShouldRejectCallWhenBusy: %@", shouldReject ? @"YES" : @"NO");
+#endif
+}
+
 + (BOOL)hasAnyActiveCall
 {
     CXCallObserver *callObserver = [[CXCallObserver alloc] init];

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@stream-io/video-react-native-sdk",
-  "version": "1.29.4-beta.0",
+  "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-beta.0",
-    "@stream-io/video-react-bindings": "1.13.7",
+    "@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",
@@ -65,17 +65,18 @@
     "@react-native-firebase/app": ">=17.5.0",
     "@react-native-firebase/messaging": ">=17.5.0",
     "@stream-io/noise-cancellation-react-native": ">=0.1.0",
-    "@stream-io/react-native-callingx": ">=0.1.0",
-    "@stream-io/react-native-webrtc": ">=137.1.2",
+    "@stream-io/react-native-webrtc": ">=137.1.0",
     "@stream-io/video-filters-react-native": ">=0.1.0",
     "expo": ">=47.0.0",
     "expo-build-properties": "*",
     "expo-notifications": "*",
     "react": ">=17.0.0",
     "react-native": ">=0.73.0",
+    "react-native-callkeep": ">=4.3.11",
     "react-native-gesture-handler": ">=2.8.0",
     "react-native-reanimated": ">=2.7.0",
-    "react-native-svg": ">=13.6.0"
+    "react-native-svg": ">=13.6.0",
+    "react-native-voip-push-notification": ">=3.3.1"
   },
   "peerDependenciesMeta": {
     "@notifee/react-native": {
@@ -93,9 +94,6 @@
     "@stream-io/noise-cancellation-react-native": {
       "optional": true
     },
-    "@stream-io/react-native-callingx": {
-      "optional": true
-    },
     "@stream-io/video-filters-react-native": {
       "optional": true
     },
@@ -108,11 +106,17 @@
     "expo-notifications": {
       "optional": true
     },
+    "react-native-callkeep": {
+      "optional": true
+    },
     "react-native-gesture-handler": {
       "optional": true
     },
     "react-native-reanimated": {
       "optional": true
+    },
+    "react-native-voip-push-notification": {
+      "optional": true
     }
   },
   "devDependencies": {
@@ -126,10 +130,9 @@
     "@react-native-firebase/app": "^23.4.0",
     "@react-native-firebase/messaging": "^23.4.0",
     "@react-native/babel-preset": "^0.81.5",
-    "@stream-io/noise-cancellation-react-native": "0.5.0",
-    "@stream-io/react-native-callingx": "0.1.0-beta.7",
-    "@stream-io/react-native-webrtc": "137.1.2",
-    "@stream-io/video-filters-react-native": "0.10.0",
+    "@stream-io/noise-cancellation-react-native": "^0.5.0",
+    "@stream-io/react-native-webrtc": "137.1.0",
+    "@stream-io/video-filters-react-native": "^0.10.0",
     "@testing-library/jest-native": "^5.4.3",
     "@testing-library/react-native": "13.3.3",
     "@tsconfig/node18": "^18.2.4",
@@ -145,9 +148,11 @@
     "react": "19.1.0",
     "react-native": "^0.81.5",
     "react-native-builder-bob": "~0.23",
+    "react-native-callkeep": "^4.3.16",
     "react-native-gesture-handler": "^2.28.0",
     "react-native-reanimated": "~4.1.2",
     "react-native-svg": "^15.14.0",
+    "react-native-voip-push-notification": "3.3.3",
     "react-native-worklets": "^0.5.0",
     "react-test-renderer": "19.1.0",
     "rimraf": "^6.0.1",
@@ -162,4 +167,4 @@
       "typescript"
     ]
   }
-}
+}

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}
       />