- Version: 1.0.0-beta.0
- GitHub: https://github.com/NativeScript/plugins
- Downloads:
- Last Day: 0
- Last Week: 0
- Last Month: 0
@nativescript/swift-ui
Use SwiftUI with NativeScript.
npm install @nativescript/swift-ui
Note: you will need to target iOS 13 at a minimum.
For example, you can add this line to your App_Resources/iOS/build.xcconfig
:
IPHONEOS_DEPLOYMENT_TARGET = 13.0
Usage Overview
- Create your SwiftUI
- Create your SwiftUI Provider
- Insert into any layout where you'd like to use SwiftUI
- Register your SwiftUI with an identifier
Usage Details
- Create your SwiftUI
This can be any SwiftUI you'd like to create.
import SwiftUI
struct SampleView: View {
var body: some View {
VStack {
Text("Hello World")
.padding()
}
}
}
- Create your Swift Provider
This will prepare your SwiftUI for two-way data bindings to NativeScript and follows the plugins' SwiftUIProvider
protocol to standardize all SwiftUI bindings.
import SwiftUI
@objc
class SampleViewProvider: UIViewController, SwiftUIProvider {
// MARK: INIT
required init?(coder aDecoder: NSCoder) {
super.init(coder: aDecoder)
}
required public init() {
super.init(nibName: nil, bundle: nil)
}
public override func viewDidLoad() {
super.viewDidLoad()
setupSwiftUIView(content: swiftUIView)
}
// MARK: PRIVATE
private var swiftUIView = SampleView()
/// Receive data from NativeScript
func updateData(data: NSDictionary) {
// can be empty
}
/// Allow sending of data to NativeScript
var onEvent: ((NSDictionary) -> ())?
}
- Insert into any layout where you'd like to use SwiftUI
This illustrates what is often called a "vanilla" flavored NativeScript app. However, you can use this plugin with any flavor (Angular, React, Svelte, Vue, etc.)
<Page xmlns="http://schemas.nativescript.org/tns.xsd" navigatingTo="navigatingTo" class="page" xmlns:sw="@nativescript/swift-ui">
<StackLayout class="p-20">
<sw:SwiftUI swiftId="sampleView" height="150" />
</StackLayout>
</Page>
- Register your SwiftUI with an identifier
This can be done in the bootstrap file (often app.ts
or main.ts
) or even the view component that needs it.
app.ts
import {
registerSwiftUI,
UIDataDriver
} from "@nativescript/swift-ui";
// A. You can generate types for your own Swift Provider with 'ns typings ios'
// B. Otherwise you can ignore by declaring the class name you know you provided
declare const SampleViewProvider: any;
registerSwiftUI("sampleView", (view) =>
new UIDataDriver(SampleViewProvider.alloc().init(), view)
);
To use with Angular
import { registerElement } from '@nativescript/angular'
import { SwiftUI } from '@nativescript/swift-ui'
registerElement('SwiftUI', () => SwiftUI)
It can now be used within any Angular component, eg:
<StackLayout class="p-20">
<SwiftUI swiftId="sampleView" height="150"></SwiftUI>
</StackLayout>
Credits

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