@videosdk.live/react-native-pip-android

Add picture in picture (PiP) support to React Native Android applications with full control over PiP mode and dimensions.

Features

- ✅ 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

Installation

``sh
npm install @videosdk.live/react-native-pip-android


or


yarn add @videosdk.live/react-native-pip-android
`

Setup

$3

Add the following to your android/app/src/main/AndroidManifest.xml:

`xml
android:name=".MainActivity"
android:supportsPictureInPicture="true"
android:resizeableActivity="true"
... >
`

Usage

$3

`js
import PipHandler from '@videosdk.live/react-native-pip-android';

// Enter PiP mode with custom dimensions
PipHandler.enterPipMode(400, 300);

`

$3

`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();
`

$3

`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});
`

$3

`js
import { usePipModeListener } from '@videosdk.live/react-native-pip-android';

function MyComponent() {
const inPipMode = usePipModeListener();

if (inPipMode) {
return Currently in PiP Mode;
}

return Normal Mode;
}
`

API Reference

$3

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

$3

| Hook | Returns | Description |
|------|---------|-------------|
| usePipModeListener() | boolean | Returns current PiP mode state |

Requirements

- React Native 0.60+
- Android 8.0+ (API level 26+)
- AndroidX support

Permissions

The following permissions are automatically added:

`xml

``