/rn-android-pip

React Native Android Picture-in-Picture Library.

Primary LanguageJavaOtherNOASSERTION

react-native-android-pip

Getting Started

$ npm install react-native-android-pip --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
  1. 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')
  2. 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 {
  enterPictureInPictureMode,
  configurePIPAspectRatio,
  enableAutoPipSwitch,
  disableAutoPipSwitch,
} from "react-native-android-pip";

// Enter Pip mode
enterPictureInPictureMode();

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

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

// Listen for changes to PIP status (eg has user chosen to return to app)
const isInPIP = useRNPIP();
if (isInPIP) {
  return <PIPView />;
} else {
  return <FullScreenView />;
}