expo-pip

A library that provides access to Picture In Picture API for Android only.

_expo-pip_ is not available in Expo Go, learn more about development builds.

API documentation

- Documentation for the main branch
- Documentation for the latest stable release

Installation in managed Expo projects

For managed Expo projects, please follow the installation instructions in the API documentation for the latest stable release. If you follow the link and there is no documentation available then this library is not yet usable within managed projects — it is likely to be included in an upcoming Expo SDK release.

Installation in bare React Native projects

For bare React Native projects, you must ensure that you have installed and configured the expo package before continuing.

$3

``
npx expo install expo-pip
`

$3

`json
// app.json
{
"expo": {
// ...
"plugins": [
// ...
"expo-pip"
]
}
}
`

Demo

Usage

`js
import ExpoPip from "expo-pip";
import { useState } from "react";
import { Button, StyleSheet, Text, View } from "react-native";

export default function App() {
const { isInPipMode } = ExpoPip.useIsInPip();
const [automaticEnterEnabled, setAutomaticEnterEnabled] = useState(false);

return (

{isInPipMode ? "In Pip Mode 😎" : "Not In Pip Mode"}
{!isInPipMode && (
<>
onPress={() =>
ExpoPip.enterPipMode({
width: 200,
height: 300,
})
}
title="Enter Pip Mode"
/>
onPress={() => {
const newValue = !automaticEnterEnabled;
setAutomaticEnterEnabled(newValue);
ExpoPip.setPictureInPictureParams({
autoEnterEnabled: newValue,
});
}}
title={Toggle automaticEnter: ${automaticEnterEnabled ? "on" : "off"}}
/>

)}

);
}

const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: "#fff",
alignItems: "center",
justifyContent: "center",
},
});
`

API

`js
import ExpoPip from "expo-pip";
`

Methods

$3

Sets parameters for the Picture-In-Picture mode, accepting PictureInPictureParams

`typescript
ExpoPip.setPictureInPictureParams({
width: 300,
height: 400,
title: "My Cool Pip Feature",
seamlessResizeEnabled: false,
autoEnterEnabled: true,
});
`

$3

`ts
ExpoPip.enterPipMode({ width: 200, height: 300 });
`

$3

`ts
ExpoPip.isAvailable();
`

Hooks

$3

`js
const { isInPipMode } = ExpoPip.useIsInPip();
`

Configuration Options

| Property | Type | Default | Description |
| ----------------------- | ------------------------ | ------- | ---------------------------------------------- |
| width | number \| null | null | Desired width |
| height | number \| null | null | Desired height |
| title | string \| null | null | Title displayed on the PiP window. |
| subtitle | string \| null | null | Subtitle for additional information. |
| seamlessResizeEnabled | boolean \| null | false | Enables seamless resizing while in PiP. |
| autoEnterEnabled | boolean \| null | false | Enables automatic entry into PiP mode. |
| sourceRectHint | SourceRectHint \| null | null | Sets the source rectangle coordinates for PiP. |

Interfaces

$3

Defines configuration parameters for Picture-In-Picture mode.

`typescript
type PictureInPictureParams = {
width?: number | null;
height?: number | null;
title?: string | null; /
subtitle?: string | null;
sourceRectHint?: SourceRectHint;
};
`

$3

Defines the bounds for the PiP window, improving transition smoothness.

`typescript
type SourceRectHint = {
top: number;
right: number;
bottom: number;
left: number;
};
``

Contributing

Contributions are very welcome! Please refer to guidelines described in the contributing guide.