### Render React Native View on External Display (JavaScript)

Source: https://github.com/mybigday/react-native-external-display/blob/master/README.md

This snippet demonstrates how to use the `react-native-external-display` library to render a React Native view on an external screen. It utilizes the `useExternalDisplay` hook to get available screens and the `ExternalDisplay` component to wrap the content to be displayed. The `fallbackInMainScreen` prop ensures content is shown on the main screen if no external display is detected. The `Video` component from `react-native-video` is used as an example content.

```javascript
import React from 'react'
import Video from 'react-native-video'
import ExternalDisplay,
	{
	  useExternalDisplay,
	} from 'react-native-external-display'

function App() {
  const screens = useExternalDisplay()

  return (
    <ExternalDisplay
      mainScreenStyle={{ flex: 1 }}
      fallbackInMainScreen
      screen={Object.keys(screens)[0]}
    >
      <Video
        source={{
          uri: 'http://clips.vorwaerts-gmbh.de/big_buck_bunny.mp4',
        }}
        style={{ flex: 1 }}
        repeat
        muted
      />
    </ExternalDisplay>
  )
}

```

--------------------------------

### Render View on External Display with React Native

Source: https://github.com/mybigday/react-native-external-display/blob/master/packages/react-native-external-display/README.md

This example demonstrates how to use the `ExternalDisplay` component and the `useExternalDisplay` hook to render a React Native view on an external display. It takes a `screen` prop to specify the target display and can fallback to the main screen if no external display is found. Dependencies include React and react-native-external-display.

```javascript
import React from 'react'
import ExternalDisplay, { useExternalDisplay } from 'react-native-external-display'

function App() {
  const screens = useExternalDisplay()

  return (
    <ExternalDisplay
      mainScreenStyle={{ flex: 1 }}
      fallbackInMainScreen
      screen={Object.keys(screens)[0]}
    >
      <View
        style={{
          flex: 1,
          justifyContent: 'center',
          alignItems: 'center',
          backgroundColor: '#333',
        }}
      >
        <Text style={{ color: 'red', fontSize: 40 }}>External Display</Text>
      </View>
    </ExternalDisplay>
  )
}

```

--------------------------------

### Render Multiple Contents on External Displays in React Native

Source: https://context7.com/mybigday/react-native-external-display/llms.txt

This snippet demonstrates how to use the `react-native-external-display` library to render distinct content on each connected external display. It utilizes the `useExternalDisplay` hook to detect available screens and the `ExternalDisplay` component to map content to specific screens. The example shows dynamic content based on screen ID and a live counter.

```jsx
import React, { useState } from 'react';
import { View, Text, ScrollView } from 'react-native';
import ExternalDisplay, { useExternalDisplay } from 'react-native-external-display';

function MultiDisplayApp() {
  const screens = useExternalDisplay();
  const [counter, setCounter] = useState(0);

  React.useEffect(() => {
    const timer = setInterval(() => setCounter(c => c + 1), 1000);
    return () => clearInterval(timer);
  }, []);

  return (
    <View style={{ flex: 1 }}>
      {Object.entries(screens).map(([screenId, screen]) => (
        <ExternalDisplay
          key={screenId}
          screen={screenId}
          fallbackInMainScreen={false}
        >
          <View style={{
            flex: 1,
            backgroundColor: `hsl(${parseInt(screenId.slice(-2), 16) % 360}, 70%, 30%)`,
            justifyContent: 'center',
            alignItems: 'center'
          }}>
            <Text style={{ color: 'white', fontSize: 32 }}>Display: {screenId}</Text>
            <Text style={{ color: 'white', fontSize: 48 }}>{counter}s</Text>
            <Text style={{ color: 'white', fontSize: 20 }}>
              Resolution: {screen.width} x {screen.height}
            </Text>
          </View>
        </ExternalDisplay>
      ))}

      <View style={{ flex: 1, padding: 20, backgroundColor: 'black' }}>
        <Text style={{ color: 'white', fontSize: 24 }}>
          Main Screen - {Object.keys(screens).length} external display(s)
        </Text>
      </View>
    </View>
  );
}

```

--------------------------------

### Get Current Screen Information (React Native Function)

Source: https://context7.com/mybigday/react-native-external-display/llms.txt

The getScreens function synchronously retrieves information about currently connected external displays. It returns an object where keys are screen IDs and values contain screen dimensions and mirroring status. This is useful for immediate checks without setting up listeners.

```javascript
import { getScreens } from 'react-native-external-display';
import { Button, Alert } from 'react-native';

function ScreenInfoButton() {
  const handlePress = () => {
    const screens = getScreens();
    // Returns: { [screenId: string]: { id: string, width: number, height: number, mirrored?: boolean } }

    if (Object.keys(screens).length === 0) {
      Alert.alert('No External Screens', 'No external displays detected');
    } else {
      Object.entries(screens).forEach(([id, screen]) => {
        console.log(`Screen ${id}:`, screen.width, 'x', screen.height);
      });
      Alert.alert('Screens Found', `${Object.keys(screens).length} external display(s) connected`);
    }
  };

  return <Button title="Check Screens" onPress={handlePress} />;
}

```

--------------------------------

### Define Screen and ScreenInfo Types for External Displays

Source: https://github.com/mybigday/react-native-external-display/blob/master/packages/react-native-external-display/README.md

These Flow types define the structure for screen information. `Screen` represents details of a single display (id, width, height, mirrored status), and `ScreenInfo` is a map of screen IDs to `Screen` objects. This is used to get external screen dimensions instead of the main display's.

```flow
type Screen = {
  id: string,
  width: number,
  height: number,
  mirrored?: boolean,
}
type ScreenInfo = {
  [screenId: string]: Screen,
}

```

--------------------------------

### Enable Stage Manager on iPad Simulator (Command Line)

Source: https://github.com/mybigday/react-native-external-display/blob/master/docs/IOSMultipleScenesSupport.md

This command enables Stage Manager on an iPad simulator using the `simctl` tool. This is an alternative to enabling it through the simulator's settings.

```bash
xcrun simctl spawn booted defaults write -g SBChamoisWindowingEnabled -bool true
```

--------------------------------

### Enable Headless Scene Option (Objective-C)

Source: https://github.com/mybigday/react-native-external-display/blob/master/docs/IOSMultipleScenesSupport.md

This Objective-C code snippet demonstrates how to enable the 'headless' option when configuring a scene. This prevents the creation of a main scene and is useful for multi-window apps where the root is composed of multiple external displays.

```objectivec
UISceneConfiguration * configuration = [RNExternalAppDelegateUtil application:application configurationForConnectingSceneSession:connectingSceneSession options:options sceneOptions:@{ @"headless": @YES }];
```

--------------------------------

### Use Screen Size Hook for External Displays

Source: https://context7.com/mybigday/react-native-external-display/llms.txt

The `useScreenSize` hook provides screen dimensions for the current `ExternalDisplay` component context. It returns null when rendered on the main screen, and an object with screen details (id, width, height, mirrored) when on an external display. This hook is essential for adapting UI to different screen sizes.

```jsx
import React from 'react';
import { View, Text } from 'react-native';
import ExternalDisplay, { useExternalDisplay, useScreenSize } from 'react-native-external-display';

function ScreenContent() {
  const screenSize = useScreenSize();
  // Returns null if rendered on main screen, otherwise { id, width, height, mirrored? }

  return (
    <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
      <Text style={{ fontSize: 24, color: 'white' }}>
        {screenSize ? `Screen ID: ${screenSize.id}` : 'Main Screen'}
      </Text>
      <Text style={{ fontSize: 20, color: 'white' }}>
        {screenSize ? `${screenSize.width} x ${screenSize.height}` : 'N/A'}
      </Text>
    </View>
  );
}

function App() {
  const screens = useExternalDisplay();
  const screenId = Object.keys(screens)[0];

  return (
    <ExternalDisplay screen={screenId} fallbackInMainScreen={true}>
      <ScreenContent />
    </ExternalDisplay>
  );
}
```

--------------------------------

### Configure AppDelegate.mm for UIScene Integration

Source: https://github.com/mybigday/react-native-external-display/blob/master/docs/IOSMultipleScenesSupport.md

Updates the AppDelegate.mm file to integrate with UIScene, enabling the application to handle multiple scenes. It utilizes `RNExternalAppDelegateUtil` to manage scene configurations, differentiating between main and external scenes.

```objective-c
---	AppDelegate.prev.mm	2023-06-27 09:14:18
+++	AppDelegate.mm	2023-06-27 09:14:39
@@ -2,6 +2,9 @@
 
 #import <React/RCTBundleURLProvider.h>
 
+// Use RNExternalAppDelegateUtil
+#import "RNExternalDisplayUtils.h"
+
 @implementation AppDelegate
 
 - (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions
@@ -14,6 +17,19 @@
   return [super application:application didFinishLaunchingWithOptions:launchOptions];
 }
 
+- (UISceneConfiguration *)application:(UIApplication *)application configurationForConnectingSceneSession:(UISceneSession *)connectingSceneSession options:(UISceneConnectionOptions *)options API_AVAILABLE(ios(13.0)) {
+  UISceneConfiguration * configuration =
+    [RNExternalAppDelegateUtil application:application
+      configurationForConnectingSceneSession:connectingSceneSession
+      options:options
+      sceneOptions:@{
+        @"headless": @NO
+      }
+    ];
+  // You can put custom configuration here
+  return configuration;
+}
+
 - (NSURL *)sourceURLForBridge:(RCTBridge *)bridge
 {
 #if DEBUG
```

--------------------------------

### useExternalDisplay() Hook

Source: https://github.com/mybigday/react-native-external-display/blob/master/packages/react-native-external-display/README.md

A React hook that provides real-time updates on connected external displays. It returns `ScreenInfo` and can be configured with callbacks for screen connection, change, and disconnection events.

```APIDOC
## useExternalDisplay(options?: ExternalDisplayOptions)

### Description
A React hook to get `ScreenInfo` updates. It facilitates managing external display connections and disconnections within your React Native components.

### Method
React Hook

### Endpoint
N/A (Hook Usage)

### Parameters
- **options** (object, optional) - Configuration for event listeners.
  - **onScreenConnect** (function) - Callback function executed when an external screen connects.
  - **onScreenChange** (function) - Callback function executed when an external screen's properties change.
  - **onScreenDisconnect** (function) - Callback function executed when an external screen disconnects.

### Request Example
```javascript
import React from 'react';
import { useExternalDisplay } from 'react-native-external-display';

function MyComponent() {
  const screens = useExternalDisplay({
    onScreenConnect: (newScreens) => console.log('Screen connected:', newScreens),
    onScreenDisconnect: (removedScreens) => console.log('Screen disconnected:', removedScreens)
  });

  return (
    // ... render based on screens data
  );
}
```

### Response
#### Success Response (ScreenInfo)
- **ScreenInfo** (object) - An object where keys are screen IDs and values are `Screen` objects (same structure as `getScreens()` response).

#### Response Example
```json
{
  "screen1_id": {
    "id": "screen1_id",
    "width": 1920,
    "height": 1080
  }
}
```
```

--------------------------------

### Define Options for useExternalDisplay Hook

Source: https://github.com/mybigday/react-native-external-display/blob/master/packages/react-native-external-display/README.md

This Flow type defines the optional configuration object for the `useExternalDisplay` hook. It allows developers to provide callback functions for screen connection, change, and disconnection events.

```flow
type ExternalDisplayOptions = {
  onScreenConnect: Function,
  onScreenChange: Function,
  onScreenDisconnect: Function,
}

```

--------------------------------

### Monitor External Display Connections (React Native Hook)

Source: https://context7.com/mybigday/react-native-external-display/llms.txt

The useExternalDisplay hook is a React hook that monitors external display connections and disconnections. It returns an object containing information about currently connected screens and accepts callbacks for connection, change, and disconnection events.

```jsx
import React, { useState } from 'react';
import { View, Text, Button } from 'react-native';
import { useExternalDisplay } from 'react-native-external-display';

function ScreenMonitor() {
  const [log, setLog] = useState([]);

  const screens = useExternalDisplay({
    onScreenConnect: (info) => {
      setLog(prev => [...prev, `Connected: ${JSON.stringify(info)}`]);
    },
    onScreenChange: (info) => {
      setLog(prev => [...prev, `Changed: ${JSON.stringify(info)}`]);
    },
    onScreenDisconnect: (info) => {
      setLog(prev => [...prev, `Disconnected: ${JSON.stringify(info)}`]);
    }
  });

  return (
    <View style={{ padding: 20 }}>
      <Text style={{ fontSize: 18, marginBottom: 10 }}>
        Connected Screens: {Object.keys(screens).length}
      </Text>
      {Object.entries(screens).map(([id, screen]) => (
        <Text key={id}>
          {id}: {screen.width}x{screen.height} {screen.mirrored ? '(mirrored)' : ''}
        </Text>
      ))}
      <Text style={{ marginTop: 20 }}>Event Log:</Text>
      {log.map((entry, i) => <Text key={i}>{entry}</Text>)}
    </View>
  );
}

```

--------------------------------

### Configure Supported Orientations (XML)

Source: https://github.com/mybigday/react-native-external-display/blob/master/docs/IOSMultipleScenesSupport.md

This XML snippet configures the supported interface orientations for iPad, allowing landscape and portrait modes. It is placed within the Info.plist file.

```xml
<key>UISupportedInterfaceOrientations~ipad</key>
<array>
  <string>UIInterfaceOrientationLandscapeLeft</string>
  <string>UIInterfaceOrientationLandscapeRight</string>
  <string>UIInterfaceOrientationPortrait</string>
  <string>UIInterfaceOrientationPortraitUpsideDown</string>
</array>
```

--------------------------------

### useScreenSize() Hook

Source: https://github.com/mybigday/react-native-external-display/blob/master/packages/react-native-external-display/README.md

A React hook that returns the size of the screen currently being used for rendering (i.e., the screen targeted by the `<ExternalDisplay />` component). It returns `null` if the component is rendered as a fallback on the main screen.

```APIDOC
## useScreenSize()

### Description
A react hook to get the size of the current screen being rendered within an `<ExternalDisplay />` component. Returns `null` if rendering in the main screen as a fallback.

### Method
React Hook

### Endpoint
N/A (Hook Usage)

### Parameters
None

### Request Example
```javascript
import React from 'react';
import { useScreenSize } from 'react-native-external-display';

function MyDisplayComponent() {
  const screenSize = useScreenSize();

  if (screenSize) {
    return (
      <View style={{ width: screenSize.width, height: screenSize.height }}>
        {/* Content for the external screen */}
      </View>
    );
  } else {
    return <Text>Rendering on main screen</Text>;
  }
}
```

### Response
#### Success Response (Screen or null)
- **Screen** (object or null) - An object containing the `width` and `height` of the currently used screen, or `null` if rendering on the main screen fallback.
  - **width** (number) - Width of the screen in pixels.
  - **height** (number) - Height of the screen in pixels.

#### Response Example
```json
{
  "width": 1920,
  "height": 1080
}
```
Or:
```json
null
```
```

--------------------------------

### SceneManager API for iPad Multiple Scenes (iOS 13+)

Source: https://context7.com/mybigday/react-native-external-display/llms.txt

The `SceneManager` API allows managing multiple window scenes on iPad devices running iOS 13.0 and later. It enables support for Split View and Stage Manager, providing functionalities to create, close, and check the status of different scenes. This is useful for building complex multi-window iPad applications.

```jsx
import React, { useState, useEffect } from 'react';
import { View, Button, Text, Alert } from 'react-native';
import ExternalDisplay, { SceneManager, useExternalDisplay } from 'react-native-external-display';

function MultiWindowApp() {
  const screens = useExternalDisplay();
  const [isAvailable, setIsAvailable] = useState(false);

  useEffect(() => {
    setIsAvailable(SceneManager.isAvailable());
  }, []);

  const createNewWindow = () => {
    if (!isAvailable) {
      Alert.alert('Not Supported', 'Multiple scenes not available on this device');
      return;
    }

    SceneManager.requestScene({
      windowBackgroundColor: '#1a1a1a',
      userInfo: {
        windowType: 'browser',
        timestamp: Date.now()
      }
    });
  };

  const closeWindow = (sceneId) => {
    SceneManager.closeScene(sceneId);
  };

  const checkMainScene = async () => {
    const isActive = await SceneManager.isMainSceneActive();
    if (!isActive) {
      SceneManager.resumeMainScene();
    }
  };

  return (
    <View style={{ flex: 1, padding: 20 }}>
      <Button title="Create New Window" onPress={createNewWindow} />
      <Button title="Check Main Scene" onPress={checkMainScene} />

      {Object.entries(screens).map(([id, screen]) => {
        // Filter external displays vs created scenes
        const isExternalDisplay = screen.type === SceneManager.types.EXTERNAL_DISPLAY;
        const isCreatedScene = screen.type === SceneManager.types.CREATED_SCENE;

        return (
          <View key={id}>
            <ExternalDisplay screen={id} fallbackInMainScreen={false}>
              <View style={{ flex: 1, backgroundColor: '#333', padding: 20 }}>
                <Text style={{ color: 'white', fontSize: 20 }}>
                  Window: {id}
                </Text>
                <Text style={{ color: 'white' }}>
                  Type: {isExternalDisplay ? 'External' : 'Scene'}
                </Text>
                {!isExternalDisplay && (
                  <Button title="Close Window" onPress={() => closeWindow(id)} />
                )}
              </View>
            </ExternalDisplay>
          </View>
        );
      })}
    </View>
  );
}
```

--------------------------------

### getScreens()

Source: https://github.com/mybigday/react-native-external-display/blob/master/packages/react-native-external-display/README.md

Retrieves information about connected external screens. This function is useful for determining the size and properties of external displays to render content appropriately.

```APIDOC
## getScreens()

### Description
Retrieves information about connected external screens. Use this to get the size and properties of external displays.

### Method
Native Function

### Endpoint
N/A (Function Call)

### Parameters
None

### Request Example
```javascript
import { getScreens } from 'react-native-external-display';

const screens = getScreens();
console.log(screens);
```

### Response
#### Success Response (ScreenInfo)
- **ScreenInfo** (object) - An object where keys are screen IDs and values are `Screen` objects.
  - **Screen** (object)
    - **id** (string) - Unique identifier for the screen.
    - **width** (number) - Width of the screen in pixels.
    - **height** (number) - Height of the screen in pixels.
    - **mirrored** (boolean, optional) - Indicates if the screen is mirrored.

#### Response Example
```json
{
  "screen1_id": {
    "id": "screen1_id",
    "width": 1920,
    "height": 1080,
    "mirrored": false
  }
}
```
```

--------------------------------

### React Native SceneManager API for External Displays

Source: https://github.com/mybigday/react-native-external-display/blob/master/docs/IOSMultipleScenesSupport.md

Provides JavaScript functions to manage external displays and multiple scenes within a React Native application. It allows checking availability, requesting new scenes with custom configurations, closing scenes, and managing the main scene's activity state.

```javascript
import {
  SceneManager
} from 'react-native-external-display';

const isMultipleScenesAvailable = SceneManager.isAvailable();

// Request new scene
SceneManager.requestScene({
  windowBackgroundColor: '#cccccc', // Default to black
  userInfo: {
    // Custom data, that can be accessed in `screen.userInfo` from getScreens()
  },
})

// Close scene (sceneId can be get from getScreens())
SceneManager.closeScene(sceneId);

SceneManager.isMainSceneActive(); // Check if the main scene not closed
SceneManager.resumeMainScene(); // Resume the main scene if it is closed
```

--------------------------------

### Render Content on External Display (React Native)

Source: https://context7.com/mybigday/react-native-external-display/llms.txt

The ExternalDisplay component is used to render specific UI content on an external display. It supports fallback to the main screen if no external display is connected. It takes styles for the main and external screens, and the target screen ID.

```jsx
import React from 'react';
import { View, Text } from 'react-native';
import ExternalDisplay, { useExternalDisplay } from 'react-native-external-display';

function VideoDisplay() {
  const screens = useExternalDisplay({
    onScreenConnect: (screenInfo) => {
      console.log('Screen connected:', screenInfo);
    },
    onScreenDisconnect: (screenInfo) => {
      console.log('Screen disconnected:', screenInfo);
    }
  });

  const externalScreenId = Object.keys(screens)[0];

  return (
    <ExternalDisplay
      mainScreenStyle={{ flex: 1, backgroundColor: 'black' }}
      fallbackInMainScreen={true}
      screen={externalScreenId}
    >
      <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center', backgroundColor: '#333' }}>
        <Text style={{ color: 'red', fontSize: 40 }}>External Display Content</Text>
      </View>
    </ExternalDisplay>
  );
}

export default VideoDisplay;
```

--------------------------------

### Enable Multiple Scenes and Disable Full Screen in Info.plist

Source: https://github.com/mybigday/react-native-external-display/blob/master/docs/IOSMultipleScenesSupport.md

Modifies the app's Info.plist file to enable support for multiple scenes and disable the requirement for full-screen mode on supported iPad targets. This is crucial for Split View and Multiple Windows functionality.

```patch
--- Info.prev.plist	2023-06-26 13:53:27
+++ Info.plist	2023-06-26 13:52:22
@@ -37,6 +37,13 @@
 	</dict>
 	<key>NSLocationWhenInUseUsageDescription</key>
 	<string></string>
+	<key>UIApplicationSceneManifest</key>
+	<dict>
+		<key>UIApplicationSupportsMultipleScenes</key>
+		<true/>
+	</dict>
+	<key>UIRequiresFullScreen</key>
+	<false/>
 	<key>UILaunchStoryboardName</key>
 	<string>LaunchScreen</string>
 	<key>UIRequiredDeviceCapabilities</key>
```

--------------------------------

### <ExternalDisplay /> Component

Source: https://github.com/mybigday/react-native-external-display/blob/master/packages/react-native-external-display/README.md

A React Native component used to render children on an external display. It accepts various props to control rendering behavior, styling, and target screen selection.

```APIDOC
## <ExternalDisplay />

### Description
A React Native component that renders its children onto a specified external display. It extends standard ViewProps and offers props for controlling fallback behavior, styling, and screen targeting.

### Method
React Component

### Endpoint
N/A (Component Usage)

### Parameters (Props)
- **fallbackInMainScreen** (Boolean) - If true, renders children on the main screen when no external display is detected. Defaults to false.
- **mainScreenStyle** (StyleProp<ViewStyle>) - Styles applied to the container view when `fallbackInMainScreen` is active.
- **screen** (String) - The ID of the target external screen to render on. Obtained from `ScreenInfo`.

### Request Example
```javascript
import React from 'react';
import { View, Text } from 'react-native';
import ExternalDisplay from 'react-native-external-display';

function App() {
  const screens = useExternalDisplay(); // Assuming useExternalDisplay is imported and used elsewhere
  const targetScreenId = Object.keys(screens)[0];

  return (
    <ExternalDisplay
      mainScreenStyle={{ flex: 1 }}
      fallbackInMainScreen
      screen={targetScreenId}
    >
      <View
        style={{
          flex: 1,
          justifyContent: 'center',
          alignItems: 'center',
          backgroundColor: '#333',
        }}>
        <Text style={{ color: 'red', fontSize: 40 }}>External Display Content</Text>
      </View>
    </ExternalDisplay>
  );
}
```

### Events
- **onScreenConnect** (callback) - Receives `ScreenInfo` when an external monitor is added.
- **onScreenDisconnect** (callback) - Receives `ScreenInfo` when an external monitor is removed.

### Response
N/A (Component renders UI elements)
```

=== COMPLETE CONTENT === This response contains all available snippets from this library. No additional content exists. Do not make further requests.