In order to make use of the Picture in Picture functionality provided by the player, it is first necessary to configure your native application to properly support PiP.

The steps required for each platform are described below.

## Android

### Declare Picture in Picture support on AndroidManifest.xml

Open `android/app/src/main/AndroidManifest.xml` and set `android:supportsPictureInPicture` to `true` on your main activity's manifest. Also, specify that your activity handles layout configuration changes so that your activity doesn't relaunch when layout changes occur during PiP mode transitions:

## iOS

### Set background modes capability

Make sure to add the `UIBackgroundModes` key to the `dict` section of your `Info.plist`:

This step can also be performed from [Xcode](🔗).

### Configure audio session on app startup

Configure your app's `AudioSession` category to `playback` during the main component's initialization:

This step is required in order to properly enable background playback on iOS. Without it, the Picture in Picture option appears on the player UI, but has no effect when used.

You can read more about it in [Apple's documentation](🔗).

### Showing the Picture in Picture UI option

Now that your native application is properly configured to support PiP, the player instance in your JavaScript code can be configured to show the Picture in Picture option in the Player UI.

Simply add `isPictureInPictureEnabled: true` on your player's `playbackConfig`:

## Supported Picture in Picture events

The supported Picture in Picture events on `PlayerView` are:

  • `onPictureInPictureEnter`

  • `onPictureInPictureExit`

**iOS only:**

  • `onPictureInPictureEntered`

  • `onPictureInPictureExited`

**Android only**

  • `onPictureInPictureAvailabilityChanged`

Refer to [events.ts](🔗) for more details.