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)

feat: allow to use WindowHandlingModifier outside of RCTMainWindow

fix: deep and universal links when app is running (#140)

Co-authored-by: Thiago Brezinski <thiagobrez@gmail.com>

fix: remove window init

feat: add support for ornaments & dev menu trigger (#149)

* feat: add support for ornaments

* feat: add ornaments support to second window

fix: allow to manually move dev menu to avoid conflicts (#150)

fix: remove unnecessary diff after upstreaming changes (#151)

Make CMake 3.29.0 as minimum required version (#155)

fix: move visionOS codegen specs, sync with upstream

chore: sync with upstream

fix: remove template

Move template to a separate repo

fix: update oot-release scripts

chore: remove unnecessary diff (#159)

fix: react-native-config

chore: sync with upstream

chore: sync with upstrteam

Author: okwasniewski

.github/workflows/test-all.yml

@@ -1,12 +1,14 @@
 name: Test All
 
-on:
-  workflow_dispatch:
-  pull_request:
-  push:
-    branches:
-      - main
-      - "*-stable"
+# on:
+#     workflow_dispatch:
+#     pull_request:
+#     push:
+#       tags:
+#         - 'v*'
+#     # nightly build @ 2:15 AM UTC
+#     schedule:
+#       - cron: '15 2 * * *'
 
 concurrency:
   group: ${{ github.workflow }}-${{ github.ref }}

README.md

@@ -31,7 +31,7 @@ The source for the React Native visionOS documentation and website is hosted on
 
 Prerequisites: 
 - Download the latest Xcode (at least 15.2)
-- Install the latest version of CMake (at least v3.28.0)
+- Install the latest version of CMake (at least v3.29.0)
 
 Check out `rn-tester` [README.md](./packages/rn-tester/README.md) to build React Native from the source.
 

packages/helloworld/package.json

@@ -13,7 +13,8 @@
   },
   "dependencies": {
     "react": "18.3.1",
-    "react-native": "0.76.2"
+    "react-native": "0.76.2",
+    "@callstack/react-native-visionos": "0.76.2"
   },
   "devDependencies": {
     "@babel/core": "^7.25.2",

packages/out-of-tree-platforms/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@callstack/out-of-tree-platforms",
-  "version": "0.75.0-main",
+  "version": "0.76.0-main",
   "description": "Utils for React Native out of tree platforms.",
   "keywords": ["out-of-tree", "react-native"],
   "homepage": "https://github.com/callstack/react-native-visionos/tree/HEAD/packages/out-of-tree-platforms#readme",

packages/react-native-test-library/package.json

@@ -27,7 +27,8 @@
   "devDependencies": {
     "@babel/core": "^7.25.2",
     "@react-native/babel-preset": "0.76.2",
-    "react-native": "0.76.2"
+    "react-native": "0.76.2",
+    "@callstack/react-native-visionos": "0.76.2"
   },
   "peerDependencies": {
     "react": "*",

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

@@ -62,27 +62,9 @@ - (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(
     [RCTComponentViewFactory currentComponentViewFactory].thirdPartyFabricComponentsProvider = self;
   }
 
-  if (self.automaticallyLoadReactNativeWindow) {
-    [self loadReactNativeWindow:launchOptions];
-  }
-
   return YES;
 }
 
-- (void)loadReactNativeWindow:(NSDictionary *)launchOptions
-{
-  UIView *rootView = [self.rootViewFactory viewWithModuleName:self.moduleName
-                                            initialProperties:self.initialProps
-                                                launchOptions:launchOptions];
-
-  self.window = [[UIWindow alloc] initWithFrame:[UIScreen mainScreen].bounds];
-  UIViewController *rootViewController = [self createRootViewController];
-  [self setRootView:rootView toRootViewController:rootViewController];
-  _window.windowScene.delegate = self;
-  _window.rootViewController = rootViewController;
-  [_window makeKeyAndVisible];
-}
-
 - (void)applicationDidEnterBackground:(UIApplication *)application
 {
   // Noop
@@ -107,7 +89,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

@@ -163,7 +163,11 @@ - (UIView *)viewWithModuleName:(NSString *)moduleName
         initWithSurface:surface
         sizeMeasureMode:RCTSurfaceSizeMeasureModeWidthExact | RCTSurfaceSizeMeasureModeHeightExact];
 
+#if TARGET_OS_VISION
+    surfaceHostingProxyRootView.backgroundColor = [UIColor clearColor];
+#else
     surfaceHostingProxyRootView.backgroundColor = [UIColor systemBackgroundColor];
+#endif
     if (self->_configuration.customizeRootView != nil) {
       self->_configuration.customizeRootView(surfaceHostingProxyRootView);
     }
@@ -197,7 +201,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/LinkingIOS/RCTLinkingManager.h

@@ -24,4 +24,6 @@
     continueUserActivity:(nonnull NSUserActivity *)userActivity
       restorationHandler:(nonnull void (^)(NSArray<id<UIUserActivityRestoring>> *_Nullable))restorationHandler;
 
++ (void)onOpenURL:(nonnull NSURL *)url NS_SWIFT_NAME(onOpenURL(url:));
+
 @end

packages/react-native/Libraries/LinkingIOS/RCTLinkingManager.mm

@@ -15,6 +15,7 @@
 #import "RCTLinkingPlugins.h"
 
 static NSString *const kOpenURLNotification = @"RCTOpenURLNotification";
+static NSURL *initialURL = nil;
 
 static void postNotificationWithURL(NSURL *URL, id sender)
 {
@@ -81,6 +82,16 @@ + (BOOL)application:(UIApplication *)application
   return YES;
 }
 
+
++ (void)onOpenURL:(NSURL *)url
+{
+  if (initialURL == nil) {
+    initialURL = url;
+  } else {
+    postNotificationWithURL(url, self);
+  }
+}
+
 - (void)handleOpenURLNotification:(NSNotification *)notification
 {
   [self sendEventWithName:@"url" body:notification.userInfo];
@@ -153,6 +164,7 @@ - (void)handleOpenURLNotification:(NSNotification *)notification
 
 RCT_EXPORT_METHOD(getInitialURL : (RCTPromiseResolveBlock)resolve reject : (__unused RCTPromiseRejectBlock)reject)
 {
+#if !TARGET_OS_VISION
   NSURL *initialURL = nil;
   if (self.bridge.launchOptions[UIApplicationLaunchOptionsURLKey]) {
     initialURL = self.bridge.launchOptions[UIApplicationLaunchOptionsURLKey];
@@ -163,6 +175,8 @@ - (void)handleOpenURLNotification:(NSNotification *)notification
       initialURL = ((NSUserActivity *)userActivityDictionary[@"UIApplicationLaunchOptionsUserActivityKey"]).webpageURL;
     }
   }
+#endif
+  // React Native visionOS uses static property to retrieve initialURL.
   resolve(RCTNullIfNil(initialURL.absoluteString));
 }
 

packages/react-native/Libraries/LinkingIOS/React-RCTLinking.podspec

@@ -46,8 +46,6 @@ Pod::Spec.new do |s|
                              }
   s.framework = "UIKit"
 
-  s.framework = "UIKit"
-  
   s.dependency "React-Core/RCTLinkingHeaders", version
   s.dependency "ReactCommon/turbomodule/core", version
   s.dependency "React-jsi", version

packages/react-native/Libraries/NativeAnimation/React-RCTAnimation.podspec

@@ -45,8 +45,6 @@ Pod::Spec.new do |s|
                              }
   s.framework = ["UIKit", "QuartzCore"]
 
-  s.framework = ["UIKit", "QuartzCore"]
-  
   s.dependency "RCT-Folly", folly_version
   s.dependency "RCTTypeSafety"
   s.dependency "React-jsi"

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

@@ -15,20 +15,121 @@ 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
+  var onOpenURLCallback: ((URL) -> ())?
+  var devMenuSceneAnchor: UnitPoint?
+  var contentView: AnyView?
 
-  public init(moduleName: String, initialProps: RCTRootViewRepresentable.InitialPropsType = nil) {
+  var rootView: RCTRootViewRepresentable {
+    RCTRootViewRepresentable(moduleName: moduleName, initialProps: initialProps, devMenuSceneAnchor: devMenuSceneAnchor)
+  }
+
+  /// Creates new RCTMainWindowWindow.
+  ///
+  /// - Parameters:
+  ///   - moduleName: Name of the module registered using `AppRegistry.registerComponent()`
+  ///   - initialProps: Initial properties for this view.
+  ///   - devMenuPlacement: Placement of the additional controls for triggering reload command and dev menu trigger.
+  public init(
+    moduleName: String,
+    initialProps: RCTRootViewRepresentable.InitialPropsType = nil,
+    devMenuSceneAnchor: UnitPoint? = .bottom
+  ) {
     self.moduleName = moduleName
     self.initialProps = initialProps
+    self.devMenuSceneAnchor = devMenuSceneAnchor
+    self.contentView = AnyView(rootView)
+  }
+  
+  /// Creates new RCTMainWindowWindow.
+  ///
+  /// - Parameters:
+  ///   - moduleName: Name of the module registered using `AppRegistry.registerComponent()`
+  ///   - initialProps: Initial properties for this view.
+  ///   - devMenuPlacement: Placement of the additional controls for triggering reload command and dev menu trigger.
+  ///   - contentView: Closure which accepts rootView, allows to apply additional modifiers to React Native rootView.
+  public init<Content: View>(
+    moduleName: String,
+    initialProps: RCTRootViewRepresentable.InitialPropsType = nil,
+    devMenuSceneAnchor: UnitPoint? = .bottom,
+    @ViewBuilder contentView: @escaping (_ view: RCTRootViewRepresentable) -> Content
+  ) {
+    self.moduleName = moduleName
+    self.initialProps = initialProps
+    self.devMenuSceneAnchor = devMenuSceneAnchor
+    self.contentView = AnyView(contentView(rootView))
   }
 
   public var body: some Scene {
     WindowGroup {
-      RCTRootViewRepresentable(moduleName: moduleName, initialProps: initialProps)
+      contentView
+        .modifier(WindowHandlingModifier())
+        .onOpenURL(perform: { url in
+          onOpenURLCallback?(url)
+        })
+    }
+  }
+}
+
+extension RCTMainWindow {
+  public func onOpenURL(perform action: @escaping (URL) -> ()) -> Self {
+    var scene = self
+    scene.onOpenURLCallback = action
+    return scene
+  }
+}
+
+/**
+ Handles data sharing between React Native and SwiftUI views.
+ */
+public 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
+  
+  public init() {}
+  
+  public 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/RCTReactViewController.m

@@ -64,8 +64,12 @@ - (void)updateProps:(NSDictionary *)newProps {
     return;
   }
 
+  
+  
   if (newProps != nil && ![rootView.appProperties isEqualToDictionary:newProps]) {
-    [rootView setAppProperties:newProps];
+    NSMutableDictionary *newProperties = [rootView.appProperties mutableCopy];
+    [newProperties setValuesForKeysWithDictionary:newProps];
+    [rootView setAppProperties:newProperties];
   }
 }
 @end