Package Exports

react-native-pip-android

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (react-native-pip-android) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

react-native-pip-android

Add picture in picture support to react native android application. Also has a listener to notify the pip state change.

Note: This package only works on android.

Installation

Using npm

npm install react-native-pip-android

or using yarn

yarn add react-native-pip-android

Setup

If you don't have to recieve updates when the pip mode is entered or exited, you are good to go. In order to subscribe to the changes in the pip mode, add the following code to MainActivity.java.

Add this import to the activity

...
import com.reactnativepipandroid.PipAndroidModule;


public class MainActivity extends ReactActivity {

...

@Override
  public void onPictureInPictureModeChanged (boolean isInPictureInPictureMode, Configuration newConfig) {
    PipAndroidModule.pipModeChanged(isInPictureInPictureMode);
  }

Usage

import PipHandler, { usePipModeListener } from 'react-native-pip-android';

export default function App() {
  // Use this boolean to show / hide ui when pip mode changes
  const inPipMode = usePipModeListener();

  if (inPipMode) {
    return (
      <View style={styles.container}>
        <Text>PIP Mode</Text>
      </View>
    );
  }

  return (
    <View style={styles.container}>
      <Text style={styles.text}>
        These text components will be hidden in pip mode
      </Text>
      <TouchableOpacity
        onPress={() => PipHandler.enterPipMode(300, 214)}
        style={styles.box}>
        <Text>Click to Enter Pip Mode</Text>
      </TouchableOpacity>
    </View>
  );
}

Contributing

See the contributing guide to learn how to contribute to the repository and the development workflow.

License

MIT