chaudev / react-native-android-pip-next

react-native-android-pip-next

Getting Started

$ npm install react-native-android-pip-next --save

or

$ yarn add react-native-android-pip-next --save

or

$ bun add react-native-android-pip-next --save

Include in your AndroidManifest.xml in MainActivity activity:

android:resizeableActivity="true" android:supportsPictureInPicture="true" android:configChanges="orientation|keyboardHidden|keyboard|screenSize|locale|layoutDirection|fontScale|screenLayout|density|smallestScreenSize|orientation"

# RN >= 0.60
No action needed

# RN < 0.60
react-native link react-native-android-pip

Manual installation

Android

1. Open up android/app/src/main/java/[...]/MainActivity.java

• Add import com.reactlibrary.RNAndroidPipPackage; to the imports at the top of the file
• Add new RNAndroidPipPackage() to the list returned by the getPackages() method

2. Append the following lines to android/settings.gradle:

   include ':react-native-android-pip'
   project(':react-native-android-pip').projectDir = new File(rootProject.projectDir, 	'../node_modules/react-native-android-pip/android')
   

3. Insert the following lines inside the dependencies block in android/app/build.gradle:

     implements project(':react-native-android-pip')
   

Usage

For android sdk version 23 and below, this method call will be ignored as PIP support is not available

import AndroidPip from "react-native-android-pip";

// Enter Pip mode
AndroidPip.enterPictureInPictureMode();

//Configure aspect ratio, works only on SDK version 26 and above
AndroidPip.configureAspectRatio(width, height); // Example: AndroidPip.configureAspectRatio(2, 4)

// When enabled, PIP mode will be automatically entered when app is unfocused( User presses home, menu button etc)
AndroidPip.enableAutoPipSwitch();
AndroidPip.disableAutoPipSwitch();