Skip to content

Commit 65de174

Browse files
nativescript-ossnativescript-oss
committed
chore(update-plugins): Tue Apr 9 08:04:20 UTC 2024
1 parent e788515 commit 65de174

File tree

1 file changed

+128
-10
lines changed

1 file changed

+128
-10
lines changed

‎content/plugins/swift-ui.md

Lines changed: 128 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -15,16 +15,23 @@ Use SwiftUI with NativeScript.
1515

1616
## Contents
1717

18-
- [Installation](#installation)
19-
- [Usage](#usage)
20-
1. [Create your SwiftUI view](#1-create-your-swiftui-view)
21-
2. [Create your SwiftUI view Provider](#2-create-your-swiftui-view-provider)
22-
3. [Register your SwiftUI with an identifier and use it in the markup](#3-register-your-swiftui-with-an-identifier-and-use-it-in-markup)
23-
- [Core](#core)
24-
- [Generate Types](#generate-types)
25-
- [SwiftUI with Angular](#swiftui-with-angular)
26-
- [SwiftUI with Vue](#swiftui-with-vue)
27-
- [SwiftUI with React](#swiftui-with-react)
18+
- [@nativescript/swift-ui](#nativescriptswift-ui)
19+
- [Contents](#contents)
20+
- [Installation](#installation)
21+
- [Usage](#usage)
22+
- [1. Create your SwiftUI view](#1-create-your-swiftui-view)
23+
- [2. Create your SwiftUI view Provider](#2-create-your-swiftui-view-provider)
24+
- [3. Register your SwiftUI with an identifier and use it in markup](#3-register-your-swiftui-with-an-identifier-and-use-it-in-markup)
25+
- [Core](#core)
26+
- [Generate Types](#generate-types)
27+
- [SwiftUI with Angular](#swiftui-with-angular)
28+
- [SwiftUI with Vue](#swiftui-with-vue)
29+
- [SwiftUI with React](#swiftui-with-react)
30+
- [Open Multiple Scenes](#open-multiple-scenes)
31+
- [Passing contextual data to scenes](#passing-contextual-data-to-scenes)
32+
- [Closing windows](#closing-windows)
33+
- [Credits](#credits)
34+
- [License](#license)
2835

2936
## Installation
3037

@@ -241,8 +248,119 @@ Then use it in markup as follows:
241248
</stackLayout>
242249
```
243250

251+
## Open Multiple Scenes
252+
253+
When using a SwiftUI App Lifecycle setup for your NativeScript app, _the default with_ [visionOS](https://docs.nativescript.org/guide/visionos) _development_, you can enable multiple scenes in your `Info.plist` with the following:
254+
255+
```xml
256+
<key>UIApplicationSceneManifest</key>
257+
<dict>
258+
<key>UIApplicationPreferredDefaultSceneSessionRole</key>
259+
<string>UIWindowSceneSessionRoleApplication</string>
260+
<key>UIApplicationSupportsMultipleScenes</key>
261+
<true/>
262+
<key>UISceneConfigurations</key>
263+
<dict/>
264+
</dict>
265+
```
266+
267+
You can now use `WindowManager` (for use with standard Windows) or `XR` (for use with immersive spaces) to interact with multiple scenes, for example:
268+
269+
```swift
270+
@main
271+
struct NativeScriptApp: App {
272+
@State private var immersionStyle: ImmersionStyle = .mixed
273+
274+
var body: some Scene {
275+
NativeScriptMainWindow()
276+
277+
WindowGroup(id: "NeatView") {
278+
NeatView()
279+
}
280+
.windowStyle(.plain)
281+
282+
ImmersiveSpace(id: "NeatImmersive") {
283+
NeatImmersive()
284+
}
285+
.immersionStyle(selection: $immersionStyle, in: .mixed, .full)
286+
}
287+
}
288+
```
289+
290+
You could open the `WindowGroup` with:
291+
292+
```ts
293+
import { WindowManager } from "@nativescript/swift-ui";
294+
295+
WindowManager.getWindow("NeatView").open();
296+
});
297+
```
298+
299+
And you could open the `ImmersiveSpace` with:
300+
301+
```ts
302+
import { XR } from '@nativescript/swift-ui'
303+
304+
XR.requestSession('NeatImmersive')
305+
```
306+
307+
You could update either scene with:
308+
309+
```ts
310+
import { WindowManager } from '@nativescript/swift-ui'
311+
312+
// Option A: inline
313+
WindowManager.getWindow('NeatView').update({
314+
title: 'Updated Title',
315+
})
316+
317+
// Option B: reference
318+
const neatView = WindowManager.getWindow('NeatView')
319+
320+
neatView.update({
321+
title: 'Updated Title',
322+
})
323+
324+
// Both options work with XR/Immersive Spaces as well, for example:
325+
WindowManager.getWindow('NeatImmersive').update({
326+
salutation: 'Hello World',
327+
})
328+
```
329+
330+
### Passing contextual data to scenes
331+
332+
You can use the `onReceive` modifier in SwiftUI to handle any data passed to your windows.
333+
334+
For example, anytime `WindowManager.getWindow("Window_ID").update(...)` is called, a Notification is dispatched which can be picked up for data to be handled:
335+
336+
```swift
337+
struct NeatView: View {
338+
@State var context: NativeScriptWindowContext?
339+
340+
var body: some View {
341+
ZStack {
342+
// more neat views here
343+
}.onReceive(NotificationCenter.default.publisher(for: NSNotification.Name("NativeScriptWindowUpdate")), perform: { obj in
344+
context = NativeScriptWindowFactory.shared.getContextForId(id: "NeatView")
345+
346+
let title = context!.data["title"] as! String
347+
348+
// use your updated title!
349+
})
350+
}
351+
}
352+
```
353+
354+
### Closing windows
355+
356+
`WindowManager.getWindow("NeatView").close()` for a Window which is already open will close it.
357+
358+
`XR.endSession()` for an Immersive Space which is already open will close it.
359+
244360
## Credits
245361

362+
- WindowManager and XR APIs were established with the Callstack team. Shoutout to: [Oskar Kwaśniewski](https://github.com/okwasniewski).
363+
246364
<img src="https://raw.githubusercontent.com/valor-software/.github/d947b8547a9d5a6021e4f6af7b1df816c1c5f268/profile/valor-logo%20for-light.png#gh-light-mode-only" alt="Valor Software" width="200" />
247365

248366
NativeScript is proudly supported by Valor Software as an official partner. We are proud to offer guidance, consulting, and development assistance in all things NativeScript.

0 commit comments

Comments
 (0)