DEV Community

Priyanshi Patel
Priyanshi Patel

Posted on

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

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’m currently using 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?

Thanks in advance for any guidance or references.

Top comments (0)