Introducing Picture-in-Picture for the THEOplayer React Native SDK!

by Bart Van Oosterhout on March 13, 2023

Background on React Native and THEOplayer

React Native allows you to develop fully in Javascript, without having to learn or have previous experience with native platforms. That being said, when porting your video pipeline cross-platform with React Native, many media & entertainment companies run into native development for premium features or connectors with third-party DRM, analytics and ad insertion solutions, which means that they still require separate engineering teams for iOS and Android development.

It’s our mission at THEO to truly make it possible to develop only in Javascript when launching premium video playback experiences with THEOplayer; so that you can save time, and money, building and maintaining your React Native video apps cross-platform.

Which is why we are excited to announce that our THEOplayer React Native SDK now supports Picture-in-Picture (PiP) mode across Web, Android and iOS based platforms, providing users with even more flexibility and control over their video experience.

What is Picture-in-Picture? (PiP)

Picture-in-Picture allows viewers to watch videos in a small floating window that can be moved around the screen while still allowing them to interact with other apps or browse through content. With the PiP feature, users can multitask while watching their favorite videos, giving them an unprecedented level of convenience and flexibility.

Here's a step-by-step guide on how to use the new Picture-in-Picture feature in THEOplayer for React Native:

Step 1

Import THEOplayer SDK into your React Native project using the following command:

npm install react-native-theoplayer

Step 2

Import the THEOplayerView component into your React Native project and initialize it with your preferred video source:

import { THEOplayerView } from 'react-native-theoplayer';

const App = () => {
const [isPiPActive, setIsPiPActive] = useState(false);
const [player, setPlayer] = useState(null);

const onPlayerReady = (event) => {
setPlayer(event.target);
};

const onPiPToggle = () => {

};

return (
<View>
<TouchableOpacity onPress={onPiPToggle}>
<Text>{isPiPActive ? 'Exit PiP' : 'Enter PiP'}</Text>
</TouchableOpacity>
<THEOplayerView
style=
source=
onReady={onPlayerReady}
/>
</View>
);
};

Step 3

Set up button or gesture recognizer that triggers the presentation mode change on the THEOplayer instance.

const onPiPToggle = () => {
if (!isPiPActive && player) {
player.presenationMode = ‘picture-in-picture’;
} else {
player.presenationMode = ‘inline’;
}
setIsPiPActive(!isPiPActive);
};

And there you have it! With just a few lines of code, you're now able to add the Picture-in-picture mode to your video app using the THEOplayer React Native SDK.