feat: introduce WindowManager

Author: okwasniewski

packages/react-native/Libraries/AppDelegate/RCTAppDelegate.mm

@@ -81,22 +81,7 @@ - (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(
 
   RCTAppSetupPrepareApp(application, enableTM, *_reactNativeConfig);
 
-#if TARGET_OS_VISION
-  /// Bail out of UIWindow initializaiton to support multi-window scenarios in SwiftUI lifecycle.
   return YES;
-#else
-  UIView* rootView = [self viewWithModuleName:self.moduleName initialProperties:[self prepareInitialProps] launchOptions:launchOptions];
-    
-  self.window = [[UIWindow alloc] initWithFrame:[UIScreen mainScreen].bounds];
-  
-  UIViewController *rootViewController = [self createRootViewController];
-  [self setRootView:rootView toRootViewController:rootViewController];
-  self.window.rootViewController = rootViewController;
-  self.window.windowScene.delegate = self;
-  [self.window makeKeyAndVisible];
-
-  return YES;
-#endif
 }
 
 - (void)applicationDidEnterBackground:(UIApplication *)application

packages/react-native/Libraries/SwiftExtensions/RCTMainWindow.swift

@@ -29,14 +29,11 @@ public struct RCTMainWindow: Scene {
   public var body: some Scene {
     WindowGroup {
       RCTRootViewRepresentable(moduleName: moduleName, initialProps: initialProps)
-#if os(visionOS)
         .modifier(WindowHandlingModifier())
-#endif
     }
   }
 }
 
-#if os(visionOS)
 /**
  Handles data sharing between React Native and SwiftUI views.
  */
@@ -55,16 +52,15 @@ struct WindowHandlingModifier: ViewModifier {
         openWindow(id: id)
       }
       .onReceive(NotificationCenter.default.publisher(for: NSNotification.Name("RCTUpdateWindow"))) { data in
-        guard let id = data.userInfo?["id"] as? String else { return }
-        if let userInfo = data.userInfo?["userInfo"] as? UserInfoType {
-          reactContext.scenes[id]?.props = userInfo
-        }
+        guard
+          let id = data.userInfo?["id"] as? String,
+          let userInfo = data.userInfo?["userInfo"] as? UserInfoType else { return }
+        reactContext.scenes[id]?.props = userInfo
       }
       .onReceive(NotificationCenter.default.publisher(for: NSNotification.Name("RCTDismissWindow"))) { data in
-        if let id = data.userInfo?["id"] as? String {
-          dismissWindow(id: id)
-          reactContext.scenes.removeValue(forKey: id)
-        }
+        guard let id = data.userInfo?["id"] as? String else { return }
+        dismissWindow(id: id)
+        reactContext.scenes.removeValue(forKey: id)
       }
       .onReceive(NotificationCenter.default.publisher(for: NSNotification.Name("RCTOpenImmersiveSpace"))) { data in
         guard let id = data.userInfo?["id"] as? String else { return }
@@ -74,10 +70,8 @@ struct WindowHandlingModifier: ViewModifier {
         )
       }
       .onReceive(NotificationCenter.default.publisher(for: NSNotification.Name("RCTDismissImmersiveSpace"))) { data in
-        if let spaceId = data.userInfo?["id"] as? String {
-          reactContext.scenes.removeValue(forKey: spaceId)
-        }
+        guard let id = data.userInfo?["id"] as? String else { return }
+        reactContext.scenes.removeValue(forKey: id)
       }
   }
 }
-#endif

packages/react-native/Libraries/SwiftExtensions/RCTWindow.swift

@@ -1,7 +1,8 @@
 import SwiftUI
+import React
 
 /**
-  `RCTWindow` is a SwiftUI struct that returns additional scenes.
+ `RCTWindow` is a SwiftUI struct that returns additional scenes.
 
  Example usage:
  ```
@@ -21,8 +22,15 @@ public struct RCTWindow : Scene {
 
   public var body: some Scene {
     WindowGroup(id: id) {
-      if let sceneData {
-        RCTRootViewRepresentable(moduleName: moduleName, initialProps: sceneData.props)
+      Group {
+        if let sceneData {
+          RCTRootViewRepresentable(moduleName: moduleName, initialProps: sceneData.props)
+        }
+      }
+      .onAppear {
+        if sceneData == nil {
+          RCTFatal(RCTErrorWithMessage("Passed scene data is nil, make sure to pass sceneContext to RCTWindow() in App.swift"))
+        }
       }
     }
   }

packages/react-native/Libraries/SwiftExtensions/React-RCTSwiftExtensions.podspec

@@ -25,4 +25,5 @@ Pod::Spec.new do |s|
 
   s.dependency "React-Core"
   s.dependency "React-RCTXR" 
+  s.dependency "React-RCTWindowManager" 
 end

packages/react-native/Libraries/WindowManager/NativeWindowManager.js

@@ -0,0 +1,8 @@
+/**
+ * @flow strict
+ * @format
+ */
+
+export * from '../../src/private/specs/visionos_modules/NativeWindowManager';
+import NativeWindowManager from '../../src/private/specs/visionos_modules/NativeWindowManager';
+export default NativeWindowManager;

packages/react-native/Libraries/WindowManager/RCTWindowManager.h

@@ -0,0 +1,6 @@
+#import <Foundation/Foundation.h>
+#import <React/RCTBridgeModule.h>
+
+@interface RCTWindowManager : NSObject <RCTBridgeModule>
+
+@end

packages/react-native/Libraries/WindowManager/RCTWindowManager.mm

@@ -0,0 +1,90 @@
+#import <React/RCTWindowManager.h>
+
+#import <FBReactNativeSpec_visionOS/FBReactNativeSpec_visionOS.h>
+
+#import <React/RCTBridge.h>
+#import <React/RCTConvert.h>
+#import <React/RCTUtils.h>
+
+// Events
+static NSString *const RCTOpenWindow = @"RCTOpenWindow";
+static NSString *const RCTDismissWindow = @"RCTDismissWindow";
+static NSString *const RCTUpdateWindow = @"RCTUpdateWindow";
+
+@interface RCTWindowManager () <NativeWindowManagerSpec>
+@end
+
+@implementation RCTWindowManager
+
+RCT_EXPORT_MODULE(WindowManager)
+
+RCT_EXPORT_METHOD(openWindow
+                  : (NSString *)windowId userInfo
+                  : (NSDictionary *)userInfo resolve
+                  : (RCTPromiseResolveBlock)resolve reject
+                  : (RCTPromiseRejectBlock)reject)
+{
+  RCTExecuteOnMainQueue(^{
+    if (!RCTSharedApplication().supportsMultipleScenes) {
+      reject(@"ERROR", @"Multiple scenes not supported", nil);
+    }
+    NSMutableDictionary *userInfoDict = [[NSMutableDictionary alloc] init];
+    [userInfoDict setValue:windowId forKey:@"id"];
+    if (userInfo != nil) {
+      [userInfoDict setValue:userInfo forKey:@"userInfo"];
+    }
+    [[NSNotificationCenter defaultCenter] postNotificationName:RCTOpenWindow object:self userInfo:userInfoDict];
+    resolve(nil);
+  });
+}
+
+RCT_EXPORT_METHOD(closeWindow
+                  : (NSString *)windowId resolve
+                  : (RCTPromiseResolveBlock)resolve reject:(RCTPromiseRejectBlock)reject)
+{
+  RCTExecuteOnMainQueue(^{
+    [[NSNotificationCenter defaultCenter] postNotificationName:RCTDismissWindow object:self userInfo:@{@"id": windowId}];
+    resolve(nil);
+  });
+}
+
+RCT_EXPORT_METHOD(updateWindow
+                  : (NSString *)windowId userInfo
+                  : (NSDictionary *)userInfo resolve
+                  : (RCTPromiseResolveBlock)resolve reject
+                  : (RCTPromiseRejectBlock)reject)
+{
+  RCTExecuteOnMainQueue(^{
+    if (!RCTSharedApplication().supportsMultipleScenes) {
+      reject(@"ERROR", @"Multiple scenes not supported", nil);
+    }
+    NSMutableDictionary *userInfoDict = [[NSMutableDictionary alloc] init];
+    [userInfoDict setValue:windowId forKey:@"id"];
+    if (userInfo != nil) {
+      [userInfoDict setValue:userInfo forKey:@"userInfo"];
+    }
+    [[NSNotificationCenter defaultCenter] postNotificationName:RCTUpdateWindow object:self userInfo:userInfoDict];
+    resolve(nil);
+  });
+}
+
+- (facebook::react::ModuleConstants<JS::NativeWindowManager::Constants::Builder>)constantsToExport {
+  return [self getConstants];
+}
+
+- (facebook::react::ModuleConstants<JS::NativeWindowManager::Constants>)getConstants {
+  __block facebook::react::ModuleConstants<JS::NativeWindowManager::Constants> constants;
+  RCTUnsafeExecuteOnMainQueueSync(^{
+    constants = facebook::react::typedConstants<JS::NativeWindowManager::Constants>({
+      .supportsMultipleScenes = RCTSharedApplication().supportsMultipleScenes
+    });
+  });
+  
+  return constants;
+}
+
+- (std::shared_ptr<facebook::react::TurboModule>)getTurboModule:(const facebook::react::ObjCTurboModule::InitParams &)params {
+  return std::make_shared<facebook::react::NativeWindowManagerSpecJSI>(params);
+}
+
+@end

packages/react-native/Libraries/WindowManager/React-RCTWindowManager.podspec

@@ -0,0 +1,51 @@
+require "json"
+
+package = JSON.parse(File.read(File.join(__dir__, "..", "..", "package.json")))
+version = package['version']
+
+source = { :git => 'https://github.com/facebook/react-native.git' }
+if version == '1000.0.0'
+  # This is an unpublished version, use the latest commit hash of the react-native repo, which we’re presumably in.
+  source[:commit] = `git rev-parse HEAD`.strip if system("git rev-parse --git-dir > /dev/null 2>&1")
+else
+  source[:tag] = "v#{version}"
+end
+
+folly_config = get_folly_config()
+folly_compiler_flags = folly_config[:compiler_flags]
+folly_version = folly_config[:version]
+
+header_search_paths = [
+  "\"$(PODS_ROOT)/RCT-Folly\"",
+  "\"${PODS_ROOT}/Headers/Public/React-Codegen/react/renderer/components\"",
+]
+
+Pod::Spec.new do |s|
+  s.name                   = "React-RCTWindowManager"
+  s.version                = version
+  s.summary                = "Window manager module for React Native."
+  s.homepage               = "https://callstack.github.io/react-native-visionos-docs"
+  s.documentation_url      = "https://callstack.github.io/react-native-visionos-docs/api/windowmanager"
+  s.license                = package["license"]
+  s.author                 = "Callstack"
+  s.platforms              = min_supported_versions
+  s.compiler_flags         = folly_compiler_flags + ' -Wno-nullability-completeness'
+  s.source                 = source
+  s.source_files           = "*.{m,mm,swift}"
+  s.preserve_paths         = "package.json", "LICENSE", "LICENSE-docs"
+  s.header_dir             = "RCTWindowManager"
+  s.pod_target_xcconfig    = {
+                               "USE_HEADERMAP" => "YES",
+                               "CLANG_CXX_LANGUAGE_STANDARD" => "c++20",
+                               "HEADER_SEARCH_PATHS" => header_search_paths.join(' ')
+                             }
+
+  s.dependency "RCT-Folly", folly_version
+  s.dependency "RCTTypeSafety"
+  s.dependency "React-jsi"
+  s.dependency "React-Core/RCTWindowManagerHeaders"
+
+  add_dependency(s, "React-Codegen", :additional_framework_paths => ["build/generated/ios"])
+  add_dependency(s, "ReactCommon", :subspec => "turbomodule/core", :additional_framework_paths => ["react/nativemodule/core"])
+  add_dependency(s, "React-NativeModulesApple", :additional_framework_paths => ["build/generated/ios"])
+end

packages/react-native/Libraries/WindowManager/WindowManager.d.ts

@@ -0,0 +1,16 @@
+export interface WindowStatic {
+  id: String;
+  open (props: Object): Promise<void>;
+  update (props: Object): Promise<void>;
+  close (): Promise<void>;
+}
+
+export interface WindowManagerStatic {
+  getWindow(id: String): Window;
+  supportsMultipleScenes: boolean;
+}
+
+export const WindowManager: WindowManagerStatic;
+export type WindowManager = WindowManagerStatic;
+export const Window: WindowStatic;
+export type Window = WindowStatic;

packages/react-native/Libraries/WindowManager/WindowManager.js

@@ -0,0 +1,63 @@
+/**
+ * @format
+ * @flow strict
+ * @jsdoc
+ */
+
+import NativeWindowManager from './NativeWindowManager';
+
+const WindowManager = {
+  getWindow: function (id: string): Window {
+    return new Window(id);
+  },
+
+  // $FlowIgnore[unsafe-getters-setters]
+  get supportsMultipleScenes(): boolean {
+    if (NativeWindowManager == null) {
+      return false;
+    }
+
+    const nativeConstants = NativeWindowManager.getConstants();
+    return nativeConstants.supportsMultipleScenes || false;
+  },
+};
+
+class Window {
+  id: string;
+
+  constructor(id: string) {
+    this.id = id;
+  }
+
+  // $FlowIgnore[unclear-type]
+  open(props: ?Object): Promise<void> {
+    if (NativeWindowManager != null && NativeWindowManager.openWindow != null) {
+      return NativeWindowManager.openWindow(this.id, props);
+    }
+    return Promise.reject(new Error('NativeWindowManager is not available'));
+  }
+
+  // $FlowIgnore[unclear-type]
+  close(): Promise<void> {
+    if (
+      NativeWindowManager != null &&
+      NativeWindowManager.closeWindow != null
+    ) {
+      return NativeWindowManager.closeWindow(this.id);
+    }
+    return Promise.reject(new Error('NativeWindowManager is not available'));
+  }
+
+  // $FlowIgnore[unclear-type]
+  update(props: ?Object): Promise<void> {
+    if (
+      NativeWindowManager != null &&
+      NativeWindowManager.updateWindow != null
+    ) {
+      return NativeWindowManager.updateWindow(this.id, props);
+    }
+    return Promise.reject(new Error('NativeWindowManager is not available'));
+  }
+}
+
+module.exports = WindowManager;