Skip to content

Commit 6158647

Browse files
committed
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 <[email protected]> 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
1 parent 2ca60ce commit 6158647

File tree

76 files changed

+1251
-1891
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

76 files changed

+1251
-1891
lines changed

Diff for: .github/workflows/test-all.yml

+9-12
Original file line numberDiff line numberDiff line change
@@ -1,17 +1,14 @@
11
name: Test All
22

3-
on:
4-
workflow_dispatch:
5-
inputs:
6-
run-e2e-tests:
7-
description: Whether to run E2E tests or not
8-
type: boolean
9-
default: false
10-
pull_request:
11-
push:
12-
branches:
13-
- main
14-
- "*-stable"
3+
# on:
4+
# workflow_dispatch:
5+
# pull_request:
6+
# push:
7+
# tags:
8+
# - 'v*'
9+
# # nightly build @ 2:15 AM UTC
10+
# schedule:
11+
# - cron: '15 2 * * *'
1512

1613
jobs:
1714
set_release_type:

Diff for: README.md

+1-1
Original file line numberDiff line numberDiff line change
@@ -31,7 +31,7 @@ The source for the React Native visionOS documentation and website is hosted on
3131

3232
Prerequisites:
3333
- Download the latest Xcode (at least 15.2)
34-
- Install the latest version of CMake (at least v3.28.0)
34+
- Install the latest version of CMake (at least v3.29.0)
3535

3636
Check out `rn-tester` [README.md](./packages/rn-tester/README.md) to build React Native from the source.
3737

Diff for: packages/helloworld/package.json

+1-1
Original file line numberDiff line numberDiff line change
@@ -13,7 +13,7 @@
1313
},
1414
"dependencies": {
1515
"react": "18.3.1",
16-
"react-native": "0.77.0-rc.6"
16+
"@callstack/react-native-visionos": "0.77.0-rc.0"
1717
},
1818
"devDependencies": {
1919
"@babel/core": "^7.25.2",

Diff for: packages/out-of-tree-platforms/package.json

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "@callstack/out-of-tree-platforms",
3-
"version": "0.75.0-main",
3+
"version": "0.76.0-main",
44
"description": "Utils for React Native out of tree platforms.",
55
"keywords": ["out-of-tree", "react-native"],
66
"homepage": "https://github.com/callstack/react-native-visionos/tree/HEAD/packages/out-of-tree-platforms#readme",

Diff for: packages/react-native-test-library/package.json

+2-1
Original file line numberDiff line numberDiff line change
@@ -27,7 +27,8 @@
2727
"devDependencies": {
2828
"@babel/core": "^7.25.2",
2929
"@react-native/babel-preset": "0.77.0-rc.6",
30-
"react-native": "0.77.0-rc.6"
30+
"react-native": "0.77.0-rc.6",
31+
"@callstack/react-native-visionos": "0.77.0-rc.0"
3132
},
3233
"peerDependencies": {
3334
"react": "*",

Diff for: packages/react-native/Libraries/AppDelegate/RCTAppDelegate.h

+3-1
Original file line numberDiff line numberDiff line change
@@ -67,7 +67,9 @@ NS_ASSUME_NONNULL_BEGIN
6767

6868
/// The window object, used to render the UViewControllers
6969
@property (nonatomic, strong, nonnull) UIWindow *window;
70-
@property (nonatomic, nullable) RCTBridge *bridge;
70+
/// Store last focused window to properly handle multi-window scenarios
71+
@property (nonatomic, weak, nullable) UIWindow *lastFocusedWindow;
72+
@property (nonatomic, strong, nullable) RCTBridge *bridge;
7173
@property (nonatomic, strong, nullable) NSString *moduleName;
7274
@property (nonatomic, strong, nullable) NSDictionary *initialProps;
7375
@property (nonatomic, strong, nonnull) RCTRootViewFactory *rootViewFactory;

Diff for: packages/react-native/Libraries/AppDelegate/RCTAppDelegate.mm

+4-18
Original file line numberDiff line numberDiff line change
@@ -63,27 +63,9 @@ - (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(
6363
[RCTComponentViewFactory currentComponentViewFactory].thirdPartyFabricComponentsProvider = self;
6464
}
6565

66-
if (self.automaticallyLoadReactNativeWindow) {
67-
[self loadReactNativeWindow:launchOptions];
68-
}
69-
7066
return YES;
7167
}
7268

73-
- (void)loadReactNativeWindow:(NSDictionary *)launchOptions
74-
{
75-
UIView *rootView = [self.rootViewFactory viewWithModuleName:self.moduleName
76-
initialProperties:self.initialProps
77-
launchOptions:launchOptions];
78-
79-
self.window = [[UIWindow alloc] initWithFrame:[UIScreen mainScreen].bounds];
80-
UIViewController *rootViewController = [self createRootViewController];
81-
[self setRootView:rootView toRootViewController:rootViewController];
82-
_window.windowScene.delegate = self;
83-
_window.rootViewController = rootViewController;
84-
[_window makeKeyAndVisible];
85-
}
86-
8769
- (void)applicationDidEnterBackground:(UIApplication *)application
8870
{
8971
// Noop
@@ -108,7 +90,11 @@ - (UIView *)createRootViewWithBridge:(RCTBridge *)bridge
10890
BOOL enableFabric = self.fabricEnabled;
10991
UIView *rootView = RCTAppSetupDefaultRootView(bridge, moduleName, initProps, enableFabric);
11092

93+
#if TARGET_OS_VISION
94+
rootView.backgroundColor = [UIColor clearColor];
95+
#else
11196
rootView.backgroundColor = [UIColor systemBackgroundColor];
97+
#endif
11298

11399
return rootView;
114100
}

Diff for: packages/react-native/Libraries/AppDelegate/RCTRootViewFactory.mm

+9
Original file line numberDiff line numberDiff line change
@@ -153,6 +153,9 @@ - (UIView *)viewWithModuleName:(NSString *)moduleName
153153
RCTSurfaceHostingProxyRootView *surfaceHostingProxyRootView =
154154
[[RCTSurfaceHostingProxyRootView alloc] initWithSurface:surface];
155155

156+
#if TARGET_OS_VISION
157+
surfaceHostingProxyRootView.backgroundColor = [UIColor clearColor];
158+
#else
156159
surfaceHostingProxyRootView.backgroundColor = [UIColor systemBackgroundColor];
157160
if (_configuration.customizeRootView != nil) {
158161
_configuration.customizeRootView(surfaceHostingProxyRootView);
@@ -186,7 +189,13 @@ - (UIView *)createRootViewWithBridge:(RCTBridge *)bridge
186189
{
187190
BOOL enableFabric = _configuration.fabricEnabled;
188191
UIView *rootView = RCTAppSetupDefaultRootView(bridge, moduleName, initProps, enableFabric);
192+
193+
#if TARGET_OS_VISION
194+
rootView.backgroundColor = [UIColor clearColor];
195+
#else
189196
rootView.backgroundColor = [UIColor systemBackgroundColor];
197+
#endif
198+
190199
return rootView;
191200
}
192201

Diff for: packages/react-native/Libraries/LinkingIOS/RCTLinkingManager.h

+2
Original file line numberDiff line numberDiff line change
@@ -24,4 +24,6 @@
2424
continueUserActivity:(nonnull NSUserActivity *)userActivity
2525
restorationHandler:(nonnull void (^)(NSArray<id<UIUserActivityRestoring>> *_Nullable))restorationHandler;
2626

27+
+ (void)onOpenURL:(nonnull NSURL *)url NS_SWIFT_NAME(onOpenURL(url:));
28+
2729
@end

Diff for: packages/react-native/Libraries/LinkingIOS/RCTLinkingManager.mm

+14
Original file line numberDiff line numberDiff line change
@@ -15,6 +15,7 @@
1515
#import "RCTLinkingPlugins.h"
1616

1717
static NSString *const kOpenURLNotification = @"RCTOpenURLNotification";
18+
static NSURL *initialURL = nil;
1819

1920
static void postNotificationWithURL(NSURL *URL, id sender)
2021
{
@@ -82,6 +83,16 @@ + (BOOL)application:(UIApplication *)application
8283
return YES;
8384
}
8485

86+
87+
+ (void)onOpenURL:(NSURL *)url
88+
{
89+
if (initialURL == nil) {
90+
initialURL = url;
91+
} else {
92+
postNotificationWithURL(url, self);
93+
}
94+
}
95+
8596
- (void)handleOpenURLNotification:(NSNotification *)notification
8697
{
8798
[self sendEventWithName:@"url" body:notification.userInfo];
@@ -154,6 +165,7 @@ - (void)handleOpenURLNotification:(NSNotification *)notification
154165

155166
RCT_EXPORT_METHOD(getInitialURL : (RCTPromiseResolveBlock)resolve reject : (__unused RCTPromiseRejectBlock)reject)
156167
{
168+
#if !TARGET_OS_VISION
157169
NSURL *initialURL = nil;
158170
if (self.bridge.launchOptions[UIApplicationLaunchOptionsURLKey]) {
159171
initialURL = self.bridge.launchOptions[UIApplicationLaunchOptionsURLKey];
@@ -164,6 +176,8 @@ - (void)handleOpenURLNotification:(NSNotification *)notification
164176
initialURL = ((NSUserActivity *)userActivityDictionary[@"UIApplicationLaunchOptionsUserActivityKey"]).webpageURL;
165177
}
166178
}
179+
#endif
180+
// React Native visionOS uses static property to retrieve initialURL.
167181
resolve(RCTNullIfNil(initialURL.absoluteString));
168182
}
169183

Diff for: packages/react-native/Libraries/LinkingIOS/React-RCTLinking.podspec

-2
Original file line numberDiff line numberDiff line change
@@ -46,8 +46,6 @@ Pod::Spec.new do |s|
4646
}
4747
s.framework = "UIKit"
4848

49-
s.framework = "UIKit"
50-
5149
s.dependency "React-Core/RCTLinkingHeaders", version
5250
s.dependency "ReactCommon/turbomodule/core", version
5351
s.dependency "React-jsi", version

Diff for: packages/react-native/Libraries/NativeAnimation/React-RCTAnimation.podspec

-2
Original file line numberDiff line numberDiff line change
@@ -45,8 +45,6 @@ Pod::Spec.new do |s|
4545
}
4646
s.framework = ["UIKit", "QuartzCore"]
4747

48-
s.framework = ["UIKit", "QuartzCore"]
49-
5048
s.dependency "RCT-Folly", folly_version
5149
s.dependency "RCTTypeSafety"
5250
s.dependency "React-jsi"

Diff for: packages/react-native/Libraries/SwiftExtensions/RCTMainWindow.swift

+105-4
Original file line numberDiff line numberDiff line change
@@ -15,20 +15,121 @@ import SwiftUI
1515
}
1616
```
1717

18-
Note: If you want to create additional windows in your app, create a new `WindowGroup {}` and pass it a `RCTRootViewRepresentable`.
19-
*/
18+
Note: If you want to create additional windows in your app, use `RCTWindow()`.
19+
*/
2020
public struct RCTMainWindow: Scene {
2121
var moduleName: String
2222
var initialProps: RCTRootViewRepresentable.InitialPropsType
23+
var onOpenURLCallback: ((URL) -> ())?
24+
var devMenuSceneAnchor: UnitPoint?
25+
var contentView: AnyView?
2326

24-
public init(moduleName: String, initialProps: RCTRootViewRepresentable.InitialPropsType = nil) {
27+
var rootView: RCTRootViewRepresentable {
28+
RCTRootViewRepresentable(moduleName: moduleName, initialProps: initialProps, devMenuSceneAnchor: devMenuSceneAnchor)
29+
}
30+
31+
/// Creates new RCTMainWindowWindow.
32+
///
33+
/// - Parameters:
34+
/// - moduleName: Name of the module registered using `AppRegistry.registerComponent()`
35+
/// - initialProps: Initial properties for this view.
36+
/// - devMenuPlacement: Placement of the additional controls for triggering reload command and dev menu trigger.
37+
public init(
38+
moduleName: String,
39+
initialProps: RCTRootViewRepresentable.InitialPropsType = nil,
40+
devMenuSceneAnchor: UnitPoint? = .bottom
41+
) {
2542
self.moduleName = moduleName
2643
self.initialProps = initialProps
44+
self.devMenuSceneAnchor = devMenuSceneAnchor
45+
self.contentView = AnyView(rootView)
46+
}
47+
48+
/// Creates new RCTMainWindowWindow.
49+
///
50+
/// - Parameters:
51+
/// - moduleName: Name of the module registered using `AppRegistry.registerComponent()`
52+
/// - initialProps: Initial properties for this view.
53+
/// - devMenuPlacement: Placement of the additional controls for triggering reload command and dev menu trigger.
54+
/// - contentView: Closure which accepts rootView, allows to apply additional modifiers to React Native rootView.
55+
public init<Content: View>(
56+
moduleName: String,
57+
initialProps: RCTRootViewRepresentable.InitialPropsType = nil,
58+
devMenuSceneAnchor: UnitPoint? = .bottom,
59+
@ViewBuilder contentView: @escaping (_ view: RCTRootViewRepresentable) -> Content
60+
) {
61+
self.moduleName = moduleName
62+
self.initialProps = initialProps
63+
self.devMenuSceneAnchor = devMenuSceneAnchor
64+
self.contentView = AnyView(contentView(rootView))
2765
}
2866

2967
public var body: some Scene {
3068
WindowGroup {
31-
RCTRootViewRepresentable(moduleName: moduleName, initialProps: initialProps)
69+
contentView
70+
.modifier(WindowHandlingModifier())
71+
.onOpenURL(perform: { url in
72+
onOpenURLCallback?(url)
73+
})
74+
}
75+
}
76+
}
77+
78+
extension RCTMainWindow {
79+
public func onOpenURL(perform action: @escaping (URL) -> ()) -> Self {
80+
var scene = self
81+
scene.onOpenURLCallback = action
82+
return scene
83+
}
84+
}
85+
86+
/**
87+
Handles data sharing between React Native and SwiftUI views.
88+
*/
89+
public struct WindowHandlingModifier: ViewModifier {
90+
typealias UserInfoType = Dictionary<String, AnyHashable>
91+
92+
@Environment(\.reactContext) private var reactContext
93+
@Environment(\.openWindow) private var openWindow
94+
@Environment(\.dismissWindow) private var dismissWindow
95+
@Environment(\.supportsMultipleWindows) private var supportsMultipleWindows
96+
97+
public init() {}
98+
99+
public func body(content: Content) -> some View {
100+
// Attach listeners only if app supports multiple windows
101+
if supportsMultipleWindows {
102+
content
103+
.onReceive(NotificationCenter.default.publisher(for: NSNotification.Name("RCTOpenWindow"))) { data in
104+
guard let id = data.userInfo?["id"] as? String else { return }
105+
reactContext.scenes.updateValue(RCTSceneData(id: id, props: data.userInfo?["userInfo"] as? UserInfoType), forKey: id)
106+
openWindow(id: id)
107+
}
108+
.onReceive(NotificationCenter.default.publisher(for: NSNotification.Name("RCTUpdateWindow"))) { data in
109+
guard
110+
let id = data.userInfo?["id"] as? String,
111+
let userInfo = data.userInfo?["userInfo"] as? UserInfoType else { return }
112+
reactContext.scenes[id]?.props = userInfo
113+
}
114+
.onReceive(NotificationCenter.default.publisher(for: NSNotification.Name("RCTDismissWindow"))) { data in
115+
guard let id = data.userInfo?["id"] as? String else { return }
116+
dismissWindow(id: id)
117+
reactContext.scenes.removeValue(forKey: id)
118+
}
119+
.onReceive(NotificationCenter.default.publisher(for: NSNotification.Name("RCTOpenImmersiveSpace"))) { data in
120+
guard let id = data.userInfo?["id"] as? String else { return }
121+
reactContext.scenes.updateValue(
122+
RCTSceneData(id: id, props: data.userInfo?["userInfo"] as? UserInfoType),
123+
forKey: id
124+
)
125+
}
126+
.onReceive(NotificationCenter.default.publisher(for: NSNotification.Name("RCTDismissImmersiveSpace"))) { data in
127+
guard let id = data.userInfo?["id"] as? String else { return }
128+
reactContext.scenes.removeValue(forKey: id)
129+
}
130+
} else {
131+
content
32132
}
33133
}
34134
}
135+
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,45 @@
1+
import SwiftUI
2+
import Observation
3+
4+
@Observable
5+
public class RCTSceneData: Identifiable {
6+
public var id: String
7+
public var props: Dictionary<String, AnyHashable>?
8+
9+
init(id: String, props: Dictionary<String, AnyHashable>?) {
10+
self.id = id
11+
self.props = props
12+
}
13+
}
14+
15+
extension RCTSceneData: Equatable {
16+
public static func == (lhs: RCTSceneData, rhs: RCTSceneData) -> Bool {
17+
lhs.id == rhs.id && NSDictionary(dictionary: lhs.props ?? [:]).isEqual(to: rhs.props ?? [:])
18+
}
19+
}
20+
21+
@Observable
22+
public class RCTReactContext {
23+
public var scenes: Dictionary<String, RCTSceneData> = [:]
24+
25+
public func getSceneData(id: String) -> RCTSceneData? {
26+
return scenes[id]
27+
}
28+
}
29+
30+
extension RCTReactContext: Equatable {
31+
public static func == (lhs: RCTReactContext, rhs: RCTReactContext) -> Bool {
32+
NSDictionary(dictionary: lhs.scenes).isEqual(to: rhs.scenes)
33+
}
34+
}
35+
36+
public extension EnvironmentValues {
37+
var reactContext: RCTReactContext {
38+
get { self[RCTSceneContextKey.self] }
39+
set { self[RCTSceneContextKey.self] = newValue }
40+
}
41+
}
42+
43+
private struct RCTSceneContextKey: EnvironmentKey {
44+
static var defaultValue: RCTReactContext = RCTReactContext()
45+
}

Diff for: packages/react-native/Libraries/SwiftExtensions/RCTReactViewController.h

+2
Original file line numberDiff line numberDiff line change
@@ -13,4 +13,6 @@
1313
- (instancetype _Nonnull)initWithModuleName:(NSString *_Nonnull)moduleName
1414
initProps:(NSDictionary *_Nullable)initProps;
1515

16+
-(void)updateProps:(NSDictionary *_Nullable)newProps;
17+
1618
@end

Diff for: packages/react-native/Libraries/SwiftExtensions/RCTReactViewController.m

+5-1
Original file line numberDiff line numberDiff line change
@@ -64,8 +64,12 @@ - (void)updateProps:(NSDictionary *)newProps {
6464
return;
6565
}
6666

67+
68+
6769
if (newProps != nil && ![rootView.appProperties isEqualToDictionary:newProps]) {
68-
[rootView setAppProperties:newProps];
70+
NSMutableDictionary *newProperties = [rootView.appProperties mutableCopy];
71+
[newProperties setValuesForKeysWithDictionary:newProps];
72+
[rootView setAppProperties:newProperties];
6973
}
7074
}
7175
@end

0 commit comments

Comments
 (0)