@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

npm install @videosdk.live/react-native-pip-android
# or
yarn add @videosdk.live/react-native-pip-android

Setup

Android Manifest

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

<activity
  android:name=".MainActivity"
  android:supportsPictureInPicture="true"
  android:resizeableActivity="true"
  ... >

Usage

Basic PiP Mode

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

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

Control Auto PiP Mode

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

Set Custom Default Dimensions

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

PiP Mode Listener

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

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

  if (inPipMode) {
    return <Text>Currently in PiP Mode</Text>;
  }

  return <Text>Normal Mode</Text>;
}

API Reference

PipHandler Methods

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

Hooks

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

<uses-permission android:name="android.permission.SYSTEM_ALERT_WINDOW" />