react-native-nitro-pip

Add picture-in-picture support to React Native for Android app

Installation

npm install react-native-nitro-pip react-native-nitro-modules

react-native-nitro-modules is required as this library relies on Nitro Modules.

Usage

import {
  addPipModeChangedListener,
  enterPip,
  isInPip,
  isPipSupported,
} from 'react-native-nitro-pip';

// Check if PiP is supported on the current device
if (isPipSupported()) {
  // Enter PiP mode
  const success = enterPip({
    aspectRatio: { width: 16, height: 9 },
  });
}

// Check if the app is currently in PiP mode
const inPip = isInPip();

// Subscribe to PiP mode changes (Android only)
const unsubscribe = addPipModeChangedListener((isInPip) => {
  console.log('PiP active:', isInPip);
});

// Later, when cleaning up
unsubscribe();

Android Requirements

To use Picture-in-Picture on Android, you must update your AndroidManifest.xml. The activity that enters PiP (usually MainActivity) requires the following attributes:

<activity
  android:name=".MainActivity"
  android:supportsPictureInPicture="true"
  android:configChanges="screenSize|smallestScreenSize|screenLayout|orientation"
  ... />

Note: enterPip must be called while the activity is in the foreground.

Expo Usage

If you are using Expo, add the plugin to your app.json or app.config.js:

{
  "expo": {
    "plugins": ["react-native-nitro-pip"]
  }
}

Breaking Changes

• multiply has been removed. This library now focuses exclusively on Picture-in-Picture support.

Contributing

• Development workflow
• Sending a pull request
• Code of conduct

License

MIT

Made with create-react-native-library