PIP mode allows video content to be displayed in a small floating window, enabling users to continue watching while performing other tasks. This guide includes steps and sample code for implementing PIP on both Android and iOS.

Implementing PIP on Android

1. Install the Package

Use the react-native-pip-android library to enable PIP mode on Android.

npm install react-native-pip-android

react-native-pip-android (npm)

2. AndroidManifest Configuration

Add the following configuration to your AndroidManifest.xml.

<activity
    android:name=".MainActivity"
    android:configChanges="keyboard|keyboardHidden|orientation|screenSize"
    android:label="@string/app_name"
    android:launchMode="singleTask"
    android:screenOrientation="portrait"
    android:supportsPictureInPicture="true">
    <intent-filter>
        <action android:name="android.intent.action.MAIN" />
        <category android:name="android.intent.category.LAUNCHER" />
    </intent-filter>
</activity>

3. Sample Code

The following code shows how to enable PIP mode using react-native-pip-android. Once steps 1 and 2 are complete, this example will work.

import React from 'react';
import { View, Button } from 'react-native';
import RNAndroidPip from 'react-native-pip-android';

const App = () => {
  const enterPipMode = () => {
    if (RNAndroidPip) {
      RNAndroidPip.enterPictureInPictureMode();
    }
  };

  return (
    <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
      <Button title="Enter PIP Mode" onPress={enterPipMode} />
    </View>
  );
};

export default App;

Android Sample code

Implementing PIP on iOS

1. Library

Use the react-native-picture-in-picturepackage, which supports PIP functionality on iOS. Installation and usage instructions can be found at the link below:

react-native-picture-in-picture (GitHub)

2. Info.plist Configuration

Add the following configuration to your Info.plist file.

<key>UIBackgroundModes</key>
<array>
    <string>audio</string>
    <string>picture-in-picture</string>
</array>

3. Sample Code

Here is a simple example of how to implement PIP on iOS. This example works once you’ve completed steps 1 and 2 above.

import React from 'react';
import { View, Button } from 'react-native';
import PictureInPicture from 'react-native-picture-in-picture';

const App = () => {
  const startPipMode = () => {
    PictureInPicture.start();
  };

  const stopPipMode = () => {
    PictureInPicture.stop();
  };

  return (
    <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
      <Button title="Start PIP Mode" onPress={startPipMode} />
      <Button title="Stop PIP Mode" onPress={stopPipMode} />
    </View>
  );
};

export default App;

Summary

Android: Use the react-native-pip-android package to implement PIP mode.
iOS: Use the react-native-picture-in-picture package to support PIP functionality.
You can implement PIP mode on both platforms using the provided sample code.
react-native-pip-android
Android Sample code
iOS Sample code