How to implement true Picture-in-Picture (PiP) on iOS in React Native (outside app, like WhatsApp)?

[priyanshi-vindaloo]

Hi everyone,

I am working on a React Native video calling app.

✅ Current behavior

Android:
I’m using native Picture-in-Picture (PiP) via a custom native module and it works correctly (video floats outside the app).

iOS:
I tired react-native-pip-view, which works only while the app is in the foreground.

❌ Problem

When the app goes to the background on iOS:

The floating PiP UI disappears

Video stops rendering

Only audio continues

However, apps like WhatsApp / FaceTime show a system PiP window outside the app on iOS.

🔍 My current tech stack

React Native

WebView-based video (Jitsi Web / HTML / WebRTC in WebView)

react-native-pip-view (foreground-only PiP)

Native PiP module on Android

❓ What I want to know

Is it possible to implement true system Picture-in-Picture on iOS (floating window outside the app) in React Native?

Can iOS PiP work with WebView / HTML / Jitsi video, or does it require native AVFoundation video rendering?

If native rendering is required:

Is there any existing React Native library or example that uses AVPictureInPictureController?

Or does this require a fully native WebRTC + AVSampleBufferDisplayLayer implementation?