From fe050b0d91fb143be9d074298be4869cd6fb387d Mon Sep 17 00:00:00 2001
From: Milosz Filimowski <milosz.filimowski@swmansion.com>
Date: Wed, 21 Jan 2026 22:22:41 +0100
Subject: [PATCH] fix RTCPipView

---
 packages/mobile-client/src/index.ts           |  3 +-
 .../mobile-client/src/overrides/RTCView.tsx   | 51 +++++++++++--------
 2 files changed, 32 insertions(+), 22 deletions(-)

diff --git a/packages/mobile-client/src/index.ts b/packages/mobile-client/src/index.ts
index ac42f450..3a35a753 100644
--- a/packages/mobile-client/src/index.ts
+++ b/packages/mobile-client/src/index.ts
@@ -11,12 +11,11 @@ import {
   useMicrophone as useMicrophoneReactClient
 } from '@fishjam-cloud/react-client';
 
-export { RTCView, type RTCVideoViewProps } from './overrides/RTCView';
+export { RTCView, RTCPIPView, type RTCVideoViewProps, type RTCPIPViewProps } from './overrides/RTCView';
 export {
   ScreenCapturePickerView,
   startPIP,
   stopPIP,
-  RTCPIPView,
   useCallKit,
   useCallKitEvent,
   useCallKitService,
diff --git a/packages/mobile-client/src/overrides/RTCView.tsx b/packages/mobile-client/src/overrides/RTCView.tsx
index 4f144169..01787e1a 100644
--- a/packages/mobile-client/src/overrides/RTCView.tsx
+++ b/packages/mobile-client/src/overrides/RTCView.tsx
@@ -1,24 +1,35 @@
-import type {
-  MediaStream as RNMediaStream,
-  RTCVideoViewProps as OriginalRTCVideoViewProps,
-} from '@fishjam-cloud/react-native-webrtc';
-import { RTCView as OriginalRTCView } from '@fishjam-cloud/react-native-webrtc';
+import type { MediaStream as RNMediaStream } from '@fishjam-cloud/react-native-webrtc';
+import { RTCPIPView as OriginalRTCPIPView, RTCView as OriginalRTCView } from '@fishjam-cloud/react-native-webrtc';
+import type React from 'react';
 import { useMemo } from 'react';
 
-export type RTCVideoViewProps = Omit<OriginalRTCVideoViewProps, 'streamURL'> & { mediaStream: MediaStream };
+export type RTCVideoViewProps = Omit<React.ComponentPropsWithRef<typeof OriginalRTCView>, 'streamURL'> & {
+  mediaStream: MediaStream;
+};
+
+export type RTCPIPViewProps = Omit<React.ComponentPropsWithRef<typeof OriginalRTCPIPView>, 'streamURL'> & {
+  mediaStream: MediaStream;
+};
+
+const convertMediaStreamToURL = (mediaStream: MediaStream | undefined): string | undefined => {
+  const rnMediaStream = mediaStream as unknown as RNMediaStream;
+  if (rnMediaStream && typeof rnMediaStream.toURL === 'function') {
+    return rnMediaStream.toURL();
+  } else {
+    console.error(
+      'mediaStream.toURL is not a function. Make sure to use the MediaStream type from @fishjam-cloud/react-native-webrtc',
+      rnMediaStream,
+    );
+    return undefined;
+  }
+};
+
+export const RTCView = ({ ref, ...props }: RTCVideoViewProps) => {
+  const streamURL = useMemo(() => convertMediaStreamToURL(props.mediaStream), [props.mediaStream]);
+  return <OriginalRTCView {...props} ref={ref} streamURL={streamURL} />;
+};
 
-export const RTCView = (props: RTCVideoViewProps) => {
-  const streamURL = useMemo(() => {
-    const mediaStream = props.mediaStream as unknown as RNMediaStream;
-    if (mediaStream && typeof mediaStream.toURL === 'function') {
-      return mediaStream.toURL();
-    } else {
-      console.error(
-        'RTCView: mediaStream.toURL is not a function. Make sure to use the MediaStream type from @fishjam-cloud/react-native-webrtc',
-        mediaStream,
-      );
-      return undefined;
-    }
-  }, [props.mediaStream]);
-  return <OriginalRTCView {...props} streamURL={streamURL} />;
+export const RTCPIPView = ({ ref, ...props }: RTCPIPViewProps) => {
+  const streamURL = useMemo(() => convertMediaStreamToURL(props.mediaStream), [props.mediaStream]);
+  return <OriginalRTCPIPView {...props} ref={ref} streamURL={streamURL} />;
 };