Guides

React Native PIP(Picture-in-Picture) 구현 가이드

이 문서는 React Native 기반의 Picture-in-Picture(PIP) 기능을 구현하는 방법을 안내합니다.

Suggest Edits

React Native 기반의 Picture-in-Picture(PIP) 기능을 구현하기 위한 가이드입니다.

PIP 모드는 비디오를 작은 화면으로 전환하여 다른 작업을 하면서도 시청할 수 있는 기능입니다. 이 문서에서는 Android와 iOS에서 PIP 기능을 구현하는 방법과 샘플 코드를 제공합니다.

Android에서 PIP 구현하기

1. 패키지 설치

react-native-pip-android 패키지는 Android에서 PIP 모드를 구현하기 위한 라이브러리입니다.

npm install react-native-pip-android

2. AndroidManifest 설정

AndroidManifest.xml에 PIP 관련 설정을 추가합니다.

<activity
    android:name=".MainActivity"
    android:configChanges="keyboard|keyboardHidden|orientation|screenSize"
    android:label="@string/app_name"
    android:launchMode="singleTask"
    android:screenOrientation="portrait"
    android:supportsPictureInPicture="true">
    <intent-filter>
        <action android:name="android.intent.action.MAIN" />
        <category android:name="android.intent.category.LAUNCHER" />
    </intent-filter>
</activity>

3. 샘플 코드

아래 코드는 react-native-pip-android를 사용하여 PIP 모드를 활성화하는 방법을 보여줍니다. 위에서 1번과 2번 설정을 완료했다면 아래의 예제 코드가 동작합니다.

import React from 'react';
import { View, Button } from 'react-native';
import RNAndroidPip from 'react-native-pip-android';

const App = () => {
  const enterPipMode = () => {
    if (RNAndroidPip) {
      RNAndroidPip.enterPictureInPictureMode();
    }
  };

  return (
    <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
      <Button title="Enter PIP Mode" onPress={enterPipMode} />
    </View>
  );
};

export default App;

iOS에서 PIP 구현하기

1. 라이브러리

react-native-picture-in-picture는 iOS의 PIP 기능을 지원하는 패키지입니다. 아래 링크를 통해 설치 및 사용 방법을 확인하세요.

2. Info.plist 설정

Info.plist 파일에 PIP 관련 설정을 추가합니다.

<key>UIBackgroundModes</key>
<array>
    <string>audio</string>
    <string>picture-in-picture</string>
</array>

3. 샘플 코드

아래는 iOS에서 PIP 기능을 구현하는 간단한 예제입니다. 위에서 1번과 2번 설정을 완료했다면 아래의 예제 코드가 동작합니다. 

import React from 'react';
import { View, Button } from 'react-native';
import PictureInPicture from 'react-native-picture-in-picture';

const App = () => {
  const startPipMode = () => {
    PictureInPicture.start();
  };

  const stopPipMode = () => {
    PictureInPicture.stop();
  };

  return (
    <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
      <Button title="Start PIP Mode" onPress={startPipMode} />
      <Button title="Stop PIP Mode" onPress={stopPipMode} />
    </View>
  );
};

export default App;

요약

  • Android: react-native-pip-android 패키지를 사용하여 PIP 모드를 구현합니다.
  • iOS: react-native-picture-in-picture를 활용하여 PIP 기능을 구현합니다.
  • Android와 iOS 샘플 코드를 기반으로 PIP 모드를 구현할 수 있습니다.

추가 참고 자료

Updated 2 days ago