Picture in Picture

Available in Classic and VPC

This page explains how to configure Picture in Picture settings for the player.

allowsPictureInPicture

PIP implementation requires the autoPause option.

const playerRef = useRef(null);
return (
  <VpePlayer
      ...
      ref={playerRef}
      options={{
            playlist: [ //Playback source
                {
                    file: 'https://CDNdomain/example_video_01.mp4'
                },
            ],
            autoPause: false, //false: Enable background playback
            allowsPictureInPicture: true, //Enable PIP
          }}
      ...
  />

) 

app.json configuration

To support the Picture-in-Picture feature, you must add the relevant options.
You must add options to use the background play feature.

{
  "expo": {
    ...
    "plugins": [
       ...
        [
            "@sgrsoft/react-native-video",
            {
                "enableAndroidPictureInPicture": true
            }
        ]
    ],
    "ios": {
      ...
      "infoPlist": {
        "UIBackgroundModes": [
            "audio",
            "fetch"
        ]
      }
      ...
    },
    "android": {
      ...
      "edgeToEdgeEnabled": true,
      "supportsPictureInPicture": true,
      "permissions": [
            "android.permission.FOREGROUND_SERVICE"
      ]
      ...
    },
  }
}