PictureInPictureButton
A control component that moves the video into a floating picture-in-picture window and back
Usage
Picture-in-picture is opt-in: set enablePictureInPicture in the VideoProvider config, and DefaultLayout shows the button next to the fullscreen button. Try it in the preview below; it works in browsers that support picture-in-picture.
Setup
Picture-in-picture needs native configuration in your app:
- iOS: the
audiobackground mode (UIBackgroundModesinInfo.plist). - Android:
android:supportsPictureInPicture="true"on your main activity.
With Expo, the react-native-video config plugin adds both:
{
"expo": {
"plugins": [
[
"react-native-video",
{
"enableBackgroundAudio": true,
"enableAndroidPictureInPicture": true
}
]
]
}
}Then run npx expo prebuild and rebuild the app. Where picture-in-picture can't work (no device support, or the setup above is missing), the button renders nothing; see isPictureInPictureSupported. The iOS Simulator doesn't support picture-in-picture, so test it on a device. For bare React Native projects, add them by hand, following the react-native-video installation guide.
Keep the player mounted while pictureInPicture is true. On Android, react-native-video already shows only the
video in the picture-in-picture window and restores your screen afterwards; swapping or remounting the player there
(for example, switching to a different layout) loses the picture-in-picture session.
Props
| Prop | Type | Required | Default | Description |
|---|---|---|---|---|
size | number | No | – | Size of the icon. |
color | string | No | – | Color of the icon. |
style | StyleProp<ViewStyle> | No | – | Optional styles applied to the button container. |
renderEnterIcon | () => React.ReactNode | No | PictureInPicture | Custom renderer for the "enter picture-in-picture" icon. |
renderExitIcon | () => React.ReactNode | No | PictureInPictureExit | Custom renderer for the "exit picture-in-picture" icon. |
Examples
Default Picture-in-Picture Button
import { PictureInPictureButton } from 'react-native-video-toolkit';
<PictureInPictureButton size={24} color="white" />;- Uses
usePictureInPictureinternally; the icon follows the player's picture-in-picture state, including when the user closes the window themselves. -DefaultLayoutdoesn't show it on TV.