Add picture in picture support to react native android application
npm install @videosdk.live/react-native-pip-androidAdd picture in picture (PiP) support to React Native Android applications with full control over PiP mode and dimensions.
- ✅ Picture-in-Picture Mode Support - Enter PiP mode with custom dimensions
- ✅ Auto PiP Control - Enable/disable automatic PiP mode entry
- ✅ Custom Dimensions - Set custom width and height for PiP mode
- ✅ Android 8.0+ Support - Full compatibility with modern Android versions
``sh`
npm install @videosdk.live/react-native-pip-androidor
yarn add @videosdk.live/react-native-pip-android
Add the following to your android/app/src/main/AndroidManifest.xml:
`xml`
android:supportsPictureInPicture="true"
android:resizeableActivity="true"
... >
`js
import PipHandler from '@videosdk.live/react-native-pip-android';
// Enter PiP mode with custom dimensions
PipHandler.enterPipMode(400, 300);
`
`js
import PipHandler from '@videosdk.live/react-native-pip-android';
// Enable auto PiP mode (for meeting screens)
PipHandler.setMeetingScreenState(true);
// Disable auto PiP mode
PipHandler.setMeetingScreenState(false);
// Check current auto PiP state
const isEnabled = await PipHandler.getMeetingScreenState();
`
`js
import PipHandler from '@videosdk.live/react-native-pip-android';
// Set custom default dimensions
PipHandler.setDefaultPipDimensions(500, 400);
// Get current default dimensions
const dimensions = await PipHandler.getDefaultPipDimensions();
console.log(Width: ${dimensions.width}, Height: ${dimensions.height});`
`js
import { usePipModeListener } from '@videosdk.live/react-native-pip-android';
function MyComponent() {
const inPipMode = usePipModeListener();
if (inPipMode) {
return
}
return
}
`
| Method | Parameters | Returns | Description |
|--------|------------|---------|-------------|
| enterPipMode(width, height) | width: number, height: number | void | Enter PiP mode with custom dimensions |setMeetingScreenState(value)
| | value: boolean | void | Enable/disable auto PiP mode |getMeetingScreenState()
| | None | Promise | Get current auto PiP mode state |setDefaultPipDimensions(width, height)
| | width: number, height: number | void | Set custom default dimensions |getDefaultPipDimensions()
| | None | Promise<{width: number, height: number}> | Get current default dimensions |
| Hook | Returns | Description |
|------|---------|-------------|
| usePipModeListener() | boolean | Returns current PiP mode state |
- React Native 0.60+
- Android 8.0+ (API level 26+)
- AndroidX support
The following permissions are automatically added:
`xml``