> ## Documentation Index
> Fetch the complete documentation index at: https://www.cometchat.com/docs/llms.txt
> Use this file to discover all available pages before exploring further.

# Picture-in-Picture

> CometChat Calling SDK v5 - Picture-in-Picture for React Native

Picture-in-Picture (PiP) mode allows users to continue their call in a floating window while using other apps. This feature requires platform-specific configuration.

## Enable Picture-in-Picture

Enable PiP mode programmatically:

```tsx theme={null}
import { CometChatCalls } from '@cometchat/calls-sdk-react-native';

CometChatCalls.enablePictureInPictureLayout();
```

## Disable Picture-in-Picture

Exit PiP mode and return to full-screen:

```tsx theme={null}
CometChatCalls.disablePictureInPictureLayout();
```

## Listen for PiP Events

```tsx theme={null}
CometChatCalls.addEventListener('onPictureInPictureLayoutEnabled', () => {
  console.log('PiP mode enabled');
});

CometChatCalls.addEventListener('onPictureInPictureLayoutDisabled', () => {
  console.log('PiP mode disabled');
});
```

## iOS Configuration

### Enable Background Modes

1. Open your project in Xcode
2. Select your target and go to **Signing & Capabilities**
3. Add **Background Modes** capability
4. Enable **Audio, AirPlay, and Picture in Picture**

### Info.plist

No additional Info.plist entries are required for PiP on iOS.

### Automatic PiP

iOS automatically enters PiP mode when:

* The user presses the home button during a video call
* The user swipes up to go to the app switcher

## Android Configuration

### Enable PiP Support

Add PiP support to your main activity in `AndroidManifest.xml`:

```xml theme={null}
<activity
    android:name=".MainActivity"
    android:supportsPictureInPicture="true"
    android:configChanges="screenSize|smallestScreenSize|screenLayout|orientation">
    <!-- ... -->
</activity>
```

### Minimum SDK

PiP requires Android 8.0 (API level 26) or higher. Add to your `build.gradle`:

```groovy theme={null}
android {
    defaultConfig {
        minSdkVersion 26
    }
}
```

### Handle PiP Mode Changes

In your React Native activity, handle PiP mode changes:

```java theme={null}
// MainActivity.java
@Override
public void onPictureInPictureModeChanged(boolean isInPictureInPictureMode) {
    super.onPictureInPictureModeChanged(isInPictureInPictureMode);
    // Notify React Native about PiP state change
}
```

## Complete Example

```tsx theme={null}
import React, { useState, useEffect } from 'react';
import { View, TouchableOpacity, Text, StyleSheet, AppState, Platform } from 'react-native';
import { CometChatCalls } from '@cometchat/calls-sdk-react-native';

function PictureInPictureControls() {
  const [isPiPEnabled, setIsPiPEnabled] = useState(false);
  const [appState, setAppState] = useState(AppState.currentState);

  useEffect(() => {
    const unsubscribeEnabled = CometChatCalls.addEventListener(
      'onPictureInPictureLayoutEnabled',
      () => {
        setIsPiPEnabled(true);
      }
    );

    const unsubscribeDisabled = CometChatCalls.addEventListener(
      'onPictureInPictureLayoutDisabled',
      () => {
        setIsPiPEnabled(false);
      }
    );

    // Listen for app state changes
    const subscription = AppState.addEventListener('change', (nextAppState) => {
      if (appState.match(/active/) && nextAppState === 'background') {
        // App going to background - enable PiP
        CometChatCalls.enablePictureInPictureLayout();
      }
      setAppState(nextAppState);
    });

    return () => {
      unsubscribeEnabled();
      unsubscribeDisabled();
      subscription.remove();
    };
  }, [appState]);

  const togglePiP = () => {
    if (isPiPEnabled) {
      CometChatCalls.disablePictureInPictureLayout();
    } else {
      CometChatCalls.enablePictureInPictureLayout();
    }
  };

  return (
    <TouchableOpacity
      style={[styles.button, isPiPEnabled && styles.activeButton]}
      onPress={togglePiP}
    >
      <Text style={styles.buttonText}>
        {isPiPEnabled ? 'Exit PiP' : 'Enter PiP'}
      </Text>
    </TouchableOpacity>
  );
}

const styles = StyleSheet.create({
  button: {
    backgroundColor: '#333',
    paddingHorizontal: 16,
    paddingVertical: 12,
    borderRadius: 8,
  },
  activeButton: {
    backgroundColor: '#6851D6',
  },
  buttonText: {
    color: '#fff',
    fontSize: 14,
    fontWeight: '600',
  },
});

export default PictureInPictureControls;
```

## Auto-Enable PiP on Background

Automatically enable PiP when the app goes to background:

```tsx theme={null}
import { useEffect, useRef } from 'react';
import { AppState, AppStateStatus } from 'react-native';
import { CometChatCalls } from '@cometchat/calls-sdk-react-native';

function useAutoPiP(enabled: boolean = true) {
  const appState = useRef(AppState.currentState);

  useEffect(() => {
    if (!enabled) return;

    const subscription = AppState.addEventListener(
      'change',
      (nextAppState: AppStateStatus) => {
        if (
          appState.current.match(/active/) &&
          nextAppState === 'background'
        ) {
          CometChatCalls.enablePictureInPictureLayout();
        } else if (
          appState.current === 'background' &&
          nextAppState === 'active'
        ) {
          CometChatCalls.disablePictureInPictureLayout();
        }
        appState.current = nextAppState;
      }
    );

    return () => {
      subscription.remove();
    };
  }, [enabled]);
}

export default useAutoPiP;
```

## Platform Considerations

### iOS

* PiP is available on iOS 14.0 and later
* Works automatically when the app enters background
* User can resize and move the PiP window

### Android

* PiP requires Android 8.0 (API level 26) or higher
* Must be explicitly enabled in the manifest
* PiP window has fixed aspect ratio

## Related Documentation

* [Background Handling](/calls/react-native/background-handling) - Keep calls active in background
* [Actions](/calls/react-native/actions) - Control the call programmatically
* [Events](/calls/react-native/events) - PiP events