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
This can be any SwiftUI view you'd like to create.
import SwiftUI
struct SampleView: View {
var body: some View {
VStack {
Text("Hello World")
.padding()
}
}
}
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) -> ())?
}
This can be done in the bootstrap file (often app.ts
or main.ts
) or even the view component that needs it.
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)
)
registerSwiftUI(
'barChart',
view => new UIDataDriver(BarChartProvider.alloc().init(), view)
)
Then insert it in any layout as follows:
<Page
xmlns="http://schemas.nativescript.org/tns.xsd"
navigatingTo="navigatingTo"
class="page"
xmlns:sw="@nativescript/swift-ui"
>
<StackLayout>
<sw:SwiftUI swiftId="sampleView" height="150" />
</StackLayout>
</Page>
To generate types for your SwiftUI code, run ns typings ios
.
Locate the objc!nsswiftsupport.d.ts
file in typings/x86_64
and reference it in the references.d.ts
.
Register SwiftUI follows:
import { registerElement } from '@nativescript/angular'
import { SwiftUI } from '@nativescript/swift-ui'
registerElement('SwiftUI', () => SwiftUI)
registerSwiftUI(
'sampleView',
view => new UIDataDriver(SampleViewProvider.alloc().init(), view)
)
registerSwiftUI(
'barChart',
view => new UIDataDriver(BarChartProvider.alloc().init(), view)
)
It can now be used within any Angular component, eg:
<StackLayout class="p-20">
<SwiftUI swiftId="sampleView" height="150"></SwiftUI>
</StackLayout>
Register SwiftUI follows:
registerElement('SwiftUIView', () => require('@nativescript/swift-ui').SwiftUI)
registerSwiftUI(
'sampleView',
view => new UIDataDriver(SampleViewProvider.alloc().init(), view)
)
registerSwiftUI(
'barChart',
view => new UIDataDriver(BarChartProvider.alloc().init(), view)
)
Then use it in markup as follows:
<StackLayout>
<SwiftUIView swiftId="sampleView" height="200" />
<SwiftUIView height="500" swiftId="barChart" margin="30" />
</StackLayout>
Register SwiftUI follows:
registerSwiftUI(
'sampleView',
view => new UIDataDriver(SampleViewProvider.alloc().init(), view)
)
registerSwiftUI(
'barChart',
view => new UIDataDriver(BarChartProvider.alloc().init(), view)
)
interface SwiftUIViewAttributes extends ViewAttributes {
swiftId: string
}
declare global {
module JSX {
interface IntrinsicElements {
swiftUIView: NativeScriptProps<SwiftUIViewAttributes, SwiftUI>
}
}
}
registerElement('swiftUIView', () => require('@nativescript/swift-ui').SwiftUI)
Then use it in markup as follows:
<stackLayout>
<swiftUIView swiftId="sampleView" height="200" />
<swiftUIView height="500" swiftId="barChart" margin="30" />
</stackLayout>
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.
MIT