feat: add multi-window support (#117)

* feat: add multi-window support

* feat: introduce WindowManager

fix: RCTReactViewController properly check props to update

fix: use clearColor instead of systemBackgroundColor for visionOS (#125)

Author: okwasniewski

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

@@ -59,7 +59,9 @@ NS_ASSUME_NONNULL_BEGIN
 
 /// The window object, used to render the UViewControllers
 @property (nonatomic, strong, nonnull) UIWindow *window;
-@property (nonatomic, nullable) RCTBridge *bridge;
+/// Store last focused window to properly handle multi-window scenarios
+@property (nonatomic, weak, nullable) UIWindow *lastFocusedWindow;
+@property (nonatomic, strong, nullable) RCTBridge *bridge;
 @property (nonatomic, strong, nullable) NSString *moduleName;
 @property (nonatomic, strong, nullable) NSDictionary *initialProps;
 @property (nonatomic, strong, nonnull) RCTRootViewFactory *rootViewFactory;

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

@@ -82,7 +82,11 @@ - (UIView *)createRootViewWithBridge:(RCTBridge *)bridge
   BOOL enableFabric = self.fabricEnabled;
   UIView *rootView = RCTAppSetupDefaultRootView(bridge, moduleName, initProps, enableFabric);
 
+#if TARGET_OS_VISION
+  rootView.backgroundColor = [UIColor clearColor];
+#else
   rootView.backgroundColor = [UIColor systemBackgroundColor];
+#endif
 
   return rootView;
 }

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

@@ -131,7 +131,11 @@ - (UIView *)viewWithModuleName:(NSString *)moduleName
         initWithSurface:surface
         sizeMeasureMode:RCTSurfaceSizeMeasureModeWidthExact | RCTSurfaceSizeMeasureModeHeightExact];
 
+#if TARGET_OS_VISION
+    surfaceHostingProxyRootView.backgroundColor = [UIColor clearColor];
+#else
     surfaceHostingProxyRootView.backgroundColor = [UIColor systemBackgroundColor];
+#endif
     return surfaceHostingProxyRootView;
   }
 
@@ -157,7 +161,11 @@ - (UIView *)createRootViewWithBridge:(RCTBridge *)bridge
   BOOL enableFabric = self->_configuration.fabricEnabled;
   UIView *rootView = RCTAppSetupDefaultRootView(bridge, moduleName, initProps, enableFabric);
 
+#if TARGET_OS_VISION
+  rootView.backgroundColor = [UIColor clearColor];
+#else
   rootView.backgroundColor = [UIColor systemBackgroundColor];
+#endif
 
   return rootView;
 }

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

@@ -15,8 +15,8 @@ import SwiftUI
  }
  ```
 
- Note: If you want to create additional windows in your app, create a new `WindowGroup {}` and pass it a `RCTRootViewRepresentable`.
-*/
+ Note: If you want to create additional windows in your app, use `RCTWindow()`.
+ */
 public struct RCTMainWindow: Scene {
   var moduleName: String
   var initialProps: RCTRootViewRepresentable.InitialPropsType
@@ -29,6 +29,55 @@ public struct RCTMainWindow: Scene {
   public var body: some Scene {
     WindowGroup {
       RCTRootViewRepresentable(moduleName: moduleName, initialProps: initialProps)
+        .modifier(WindowHandlingModifier())
+    }
+  }
+}
+
+/**
+ Handles data sharing between React Native and SwiftUI views.
+ */
+struct WindowHandlingModifier: ViewModifier {
+  typealias UserInfoType = Dictionary<String, AnyHashable>
+  
+  @Environment(\.reactContext) private var reactContext
+  @Environment(\.openWindow) private var openWindow
+  @Environment(\.dismissWindow) private var dismissWindow
+  @Environment(\.supportsMultipleWindows) private var supportsMultipleWindows
+  
+  func body(content: Content) -> some View {
+    // Attach listeners only if app supports multiple windows
+    if supportsMultipleWindows {
+      content
+        .onReceive(NotificationCenter.default.publisher(for: NSNotification.Name("RCTOpenWindow"))) { data in
+          guard let id = data.userInfo?["id"] as? String else { return }
+          reactContext.scenes.updateValue(RCTSceneData(id: id, props: data.userInfo?["userInfo"] as? UserInfoType), forKey: id)
+          openWindow(id: id)
+        }
+        .onReceive(NotificationCenter.default.publisher(for: NSNotification.Name("RCTUpdateWindow"))) { data in
+          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
+          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 }
+          reactContext.scenes.updateValue(
+            RCTSceneData(id: id, props: data.userInfo?["userInfo"] as? UserInfoType),
+            forKey: id
+          )
+        }
+        .onReceive(NotificationCenter.default.publisher(for: NSNotification.Name("RCTDismissImmersiveSpace"))) { data in
+          guard let id = data.userInfo?["id"] as? String else { return }
+          reactContext.scenes.removeValue(forKey: id)
+        }
+    } else {
+      content
     }
   }
 }

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

@@ -0,0 +1,45 @@
+import SwiftUI
+import Observation
+
+@Observable
+public class RCTSceneData: Identifiable {
+  public var id: String
+  public var props: Dictionary<String, AnyHashable>?
+  
+  init(id: String, props: Dictionary<String, AnyHashable>?) {
+    self.id = id
+    self.props = props
+  }
+}
+
+extension RCTSceneData: Equatable {
+  public static func == (lhs: RCTSceneData, rhs: RCTSceneData) -> Bool {
+    lhs.id == rhs.id && NSDictionary(dictionary: lhs.props ?? [:]).isEqual(to: rhs.props ?? [:])
+  }
+}
+
+@Observable
+public class RCTReactContext {
+  public var scenes: Dictionary<String, RCTSceneData> = [:]
+  
+  public func getSceneData(id: String) -> RCTSceneData? {
+    return scenes[id]
+  }
+}
+
+extension RCTReactContext: Equatable {
+  public static func == (lhs: RCTReactContext, rhs: RCTReactContext) -> Bool {
+    NSDictionary(dictionary: lhs.scenes).isEqual(to: rhs.scenes)
+  }
+}
+
+public extension EnvironmentValues {
+  var reactContext: RCTReactContext {
+    get { self[RCTSceneContextKey.self] }
+    set { self[RCTSceneContextKey.self] = newValue }
+  }
+}
+
+private struct RCTSceneContextKey: EnvironmentKey {
+  static var defaultValue: RCTReactContext = RCTReactContext()
+}

packages/react-native/Libraries/SwiftExtensions/RCTReactViewController.h

@@ -13,4 +13,6 @@
 - (instancetype _Nonnull)initWithModuleName:(NSString *_Nonnull)moduleName
                                    initProps:(NSDictionary *_Nullable)initProps;
 
+-(void)updateProps:(NSDictionary *_Nullable)newProps;
+
 @end

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

@@ -22,11 +22,11 @@ public struct RCTRootViewRepresentable: UIViewControllerRepresentable {
     self.initialProps = initialProps
   }
 
-  public func makeUIViewController(context: Context) -> UIViewController {
+  public func makeUIViewController(context: Context) -> RCTReactViewController {
     RCTReactViewController(moduleName: moduleName, initProps: initialProps)
   }
 
-  public func updateUIViewController(_ uiViewController: UIViewController, context: Context) {
-    // noop
+  public func updateUIViewController(_ uiViewController: RCTReactViewController, context: Context) {
+    uiViewController.updateProps(initialProps)
   }
 }

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

@@ -0,0 +1,45 @@
+import SwiftUI
+import React
+
+/**
+ `RCTWindow` is a SwiftUI struct that returns additional scenes.
+ 
+ Example usage:
+ ```
+ RCTWindow(id: "SecondWindow", sceneData: reactContext.getSceneData(id: "SecondWindow"))
+ ```
+ */
+public struct RCTWindow : Scene {
+  var id: String
+  var sceneData: RCTSceneData?
+  var moduleName: String
+  
+  public init(id: String, moduleName: String, sceneData: RCTSceneData?) {
+    self.id = id
+    self.moduleName = moduleName
+    self.sceneData = sceneData
+  }
+  
+  public var body: some Scene {
+    WindowGroup(id: id) {
+      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"))
+        }
+      }
+    }
+  }
+}
+
+extension RCTWindow {
+  public init(id: String, sceneData: RCTSceneData?) {
+    self.id = id
+    self.moduleName = id
+    self.sceneData = sceneData
+  }
+}

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;