Skip to content

Commit c583333

Browse files
okwasniewskiokwasniewski
committed
feat: add support for ornaments & dev menu trigger (#149)
* feat: add support for ornaments * feat: add ornaments support to second window
1 parent fe5238a commit c583333

File tree

5 files changed

+165
-13
lines changed

5 files changed

+165
-13
lines changed

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

+73-3
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,5 @@
11
import SwiftUI
2+
import React
23

34
/**
45
This SwiftUI struct returns main React Native scene. It should be used only once as it conains setup code.
@@ -21,25 +22,67 @@ public struct RCTMainWindow: Scene {
2122
var moduleName: String
2223
var initialProps: RCTRootViewRepresentable.InitialPropsType
2324
var onOpenURLCallback: ((URL) -> ())?
25+
var devMenuPlacement: ToolbarPlacement = .bottomOrnament
26+
var contentView: AnyView?
2427

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

3068
public var body: some Scene {
3169
WindowGroup {
32-
RCTRootViewRepresentable(moduleName: moduleName, initialProps: initialProps)
70+
contentView
3371
.modifier(WindowHandlingModifier())
3472
.onOpenURL(perform: { url in
3573
onOpenURLCallback?(url)
3674
})
75+
#if DEBUG
76+
.toolbar {
77+
DevMenuView(placement: .bottomOrnament)
78+
}
79+
#endif
3780
}
3881
}
3982
}
4083

4184
extension RCTMainWindow {
42-
public func onOpenURL(perform action: @escaping (URL) -> ()) -> some Scene {
85+
public func onOpenURL(perform action: @escaping (URL) -> ()) -> Self {
4386
var scene = self
4487
scene.onOpenURLCallback = action
4588
return scene
@@ -95,3 +138,30 @@ public struct WindowHandlingModifier: ViewModifier {
95138
}
96139
}
97140
}
141+
142+
/**
143+
Toolbar which displays additional controls to easily open dev menu and trigger reload command.
144+
*/
145+
struct DevMenuView: ToolbarContent {
146+
let placement: ToolbarItemPlacement
147+
148+
var body: some ToolbarContent {
149+
ToolbarItem(placement: placement) {
150+
Button(action: {
151+
RCTTriggerReloadCommandListeners("User Reload")
152+
}, label: {
153+
Image(systemName: "arrow.clockwise")
154+
})
155+
}
156+
ToolbarItem(placement: placement) {
157+
Button(action: {
158+
NotificationCenter.default.post(
159+
Notification(name: Notification.Name("RCTShowDevMenuNotification"), object: nil)
160+
)
161+
},
162+
label: {
163+
Image(systemName: "filemenu.and.selection")
164+
})
165+
}
166+
}
167+
}

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

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

+60-8
Original file line numberDiff line numberDiff line change
@@ -13,19 +13,16 @@ public struct RCTWindow : Scene {
1313
var id: String
1414
var sceneData: RCTSceneData?
1515
var moduleName: String
16-
17-
public init(id: String, moduleName: String, sceneData: RCTSceneData?) {
18-
self.id = id
19-
self.moduleName = moduleName
20-
self.sceneData = sceneData
16+
var contentView: AnyView?
17+
18+
func getRootView(sceneData: RCTSceneData?) -> RCTRootViewRepresentable {
19+
return RCTRootViewRepresentable(moduleName: moduleName, initialProps: sceneData?.props ?? [:])
2120
}
2221

2322
public var body: some Scene {
2423
WindowGroup(id: id) {
2524
Group {
26-
if let sceneData {
27-
RCTRootViewRepresentable(moduleName: moduleName, initialProps: sceneData.props)
28-
}
25+
contentView
2926
}
3027
.onAppear {
3128
if sceneData == nil {
@@ -37,9 +34,64 @@ public struct RCTWindow : Scene {
3734
}
3835

3936
extension RCTWindow {
37+
/// Creates new RCTWindow.
38+
///
39+
/// - Parameters:
40+
/// - id: Unique identifier of the window.
41+
/// - moduleName: Name of the module registered using `AppRegistry.registerComponent()`
42+
/// - sceneData: Data of the scene. Used to sync JS state between windows.
43+
public init(id: String, moduleName: String, sceneData: RCTSceneData?) {
44+
self.id = id
45+
self.moduleName = moduleName
46+
self.sceneData = sceneData
47+
self.contentView = AnyView(getRootView(sceneData: sceneData))
48+
}
49+
50+
/// Creates new RCTWindow with additional closure to allow applying modifiers to rootView.
51+
///
52+
/// - Parameters:
53+
/// - id: Unique identifier of the window.
54+
/// - moduleName: Name of the module registered using `AppRegistry.registerComponent()`
55+
/// - sceneData: Data of the scene. Used to sync JS state between windows.
56+
/// - contentView: Closure which accepts rootView, allows to apply additional modifiers to React Native rootView.
57+
public init<Content: View>(
58+
id: String,
59+
moduleName: String,
60+
sceneData: RCTSceneData?,
61+
@ViewBuilder contentView: @escaping (_ view: RCTRootViewRepresentable) -> Content
62+
) {
63+
self.id = id
64+
self.moduleName = moduleName
65+
self.sceneData = sceneData
66+
self.contentView = AnyView(contentView(getRootView(sceneData: sceneData)))
67+
}
68+
69+
/// Creates new RCTWindow with additional closure to allow applying modifiers to rootView.
70+
///
71+
/// - Parameters:
72+
/// - id: Unique identifier of the window. Same id will be used for moduleName.
73+
/// - sceneData: Data of the scene. Used to sync JS state between windows.
74+
/// - contentView: Closure which accepts rootView, allows to apply additional modifiers to React Native rootView.
75+
public init<Content: View>(
76+
id: String,
77+
sceneData: RCTSceneData?,
78+
@ViewBuilder contentView: @escaping (_ view: RCTRootViewRepresentable) -> Content
79+
) {
80+
self.id = id
81+
self.moduleName = id
82+
self.sceneData = sceneData
83+
self.contentView = AnyView(contentView(getRootView(sceneData: sceneData)))
84+
}
85+
86+
/// Creates new RCTWindow.
87+
///
88+
/// - Parameters:
89+
/// - id: Unique identifier of the window. Same id will be used for moduleName.
90+
/// - sceneData: Data of the scene. Used to sync JS state between windows.
4091
public init(id: String, sceneData: RCTSceneData?) {
4192
self.id = id
4293
self.moduleName = id
4394
self.sceneData = sceneData
95+
self.contentView = AnyView(getRootView(sceneData: sceneData))
4496
}
4597
}

Diff for: ‎packages/react-native/React/Base/RCTUtils.m

+19
Original file line numberDiff line numberDiff line change
@@ -592,6 +592,7 @@ BOOL RCTRunningInAppExtension(void)
592592
if (scene.session.role == UISceneSessionRoleImmersiveSpaceApplication) {
593593
continue;
594594
}
595+
595596
#endif
596597

597598
if (scene.activationState == UISceneActivationStateForegroundActive) {
@@ -608,6 +609,24 @@ BOOL RCTRunningInAppExtension(void)
608609
UIScene *sceneToUse = foregroundActiveScene ? foregroundActiveScene : foregroundInactiveScene;
609610
UIWindowScene *windowScene = (UIWindowScene *)sceneToUse;
610611

612+
#if TARGET_OS_VISION
613+
// Ornaments are supported only on visionOS.
614+
// When clicking on an ornament it becomes the keyWindow.
615+
// Presenting a RN modal from ornament leads to a crash.
616+
UIWindow* keyWindow = windowScene.keyWindow;
617+
BOOL isOrnament = [keyWindow.debugDescription containsString:@"Ornament"];
618+
if (isOrnament) {
619+
for (UIWindow *window in windowScene.windows) {
620+
BOOL isOrnament = [window.debugDescription containsString:@"Ornament"];
621+
if (window != keyWindow && !isOrnament) {
622+
return window;
623+
}
624+
}
625+
}
626+
627+
return keyWindow;
628+
#endif
629+
611630
if (@available(iOS 15.0, *)) {
612631
return windowScene.keyWindow;
613632
}

Diff for: ‎packages/rn-tester/RNTester-visionOS/App.swift

+8-1
Original file line numberDiff line numberDiff line change
@@ -15,7 +15,14 @@ struct RNTesterApp: App {
1515
RCTLinkingManager.onOpenURL(url: url)
1616
})
1717

18-
RCTWindow(id: "SecondWindow", sceneData: reactContext.getSceneData(id: "SecondWindow"))
18+
RCTWindow(id: "SecondWindow", sceneData: reactContext.getSceneData(id: "SecondWindow")) { rootView in
19+
rootView.ornament(attachmentAnchor: .scene(.bottom)) {
20+
VStack {
21+
Button("Hey!") {}
22+
}
23+
.glassBackgroundEffect()
24+
}
25+
}
1926
.defaultSize(CGSize(width: 400, height: 700))
2027

2128
ImmersiveSpace(id: "TestImmersiveSpace") {}

0 commit comments

Comments
 (0)