react-native-external-display

If you want to build a multi-window app where every window has the same layout and you don't need a traditional 'main' scene, you can run in 'Headless' mode. In this mode, the app does not create a root view for a main scene, and you rely on <ExternalDisplay> components to render views.

Steps:

1. Modify AppDelegate.mm: Set the headless option to @YES in the application:configurationForConnectingSceneSession:options: method: sceneOptions:@{ @"headless": @YES }
2. Handle Rendering: Ensure your app automatically creates new scenes and renders views using the <ExternalDisplay> component.
3. Filter Screens: When iterating through screens, exclude the main scene by checking screen.type == SceneManager.types.EXTERNAL_DISPLAY to identify external displays.

// In AppDelegate.mm
UISceneConfiguration * configuration = [RNExternalAppDelegateUtil application:application
      configurationForConnectingSceneSession:connectingSceneSession
      options:options
      sceneOptions:@{
        @"headless": @YES
      }
    ];

To enable Split View or Multiple Windows support on iPad and visionOS (iOS 13.0+), you must perform three configuration steps in your Xcode project:

1. Add iPad Target: In your Xcode workspace, ensure iPad is added to the Supported Destinations.
2. Configure Info.plist: Enable multiple scenes and disable full screen mode by adding UIApplicationSupportsMultipleScenes and UIRequiresFullScreen keys.
3. Update AppDelegate.mm: Implement the application:configurationForConnectingSceneSession:options: method using RNExternalAppDelegateUtil to manage scene configurations.

This setup creates two types of delegates:

• RNExternalSceneMainDelegate: The primary app scene (ensure only one is created).
• RNExternalSceneDelegate: Scenes for external screens (can be multiple).

Note: The app will automatically create the main scene if it is not active, or create an external scene if connected to an external screen or if requestScene is called.

--- Info.prev.plist
+++ Info.plist
@@ -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>

--- AppDelegate.prev.mm
+++ AppDelegate.mm
@@ -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

Use the ExternalDisplay component and the useExternalDisplay hook to render React Native content on a connected external screen.

1. Call useExternalDisplay() to get an object containing available screens.
2. Pass the desired screen identifier to the screen prop of the ExternalDisplay component.
3. Use the fallbackInMainScreen prop to ensure content is rendered on the main screen if no external screen is selected or available.

Note: On iOS, this leverages Apple's 'Displaying Content on a Connected Screen' capabilities. On Android, it uses the 'Presentation API'.

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>
  )
}