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

@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" />