@nativescript/swift-ui v3.0.0
@nativescript/swift-ui
Use SwiftUI with NativeScript.
Contents
- Installation
- Usage
Installation
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
1. Create your SwiftUI view
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()
}
}
}
2. Create your SwiftUI view 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) -> ())?
}
3. Register your SwiftUI with an identifier and use it in markup
This can be done in the bootstrap file (often app.ts
or main.ts
) or even the view component that needs it.
Core
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>
Generate Types
To generate types for your SwiftUI code, run
ns typings ios
.Locate the
objc!nsswiftsupport.d.ts
file intypings/x86_64
and reference it in thereferences.d.ts
.
SwiftUI with Angular
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>
SwiftUI with Vue
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>
SwiftUI with React
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>
Credits
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.
License
MIT
21 hours ago
21 hours ago
3 days ago
3 days ago
3 days ago
3 days ago
1 month ago
3 months ago
3 months ago
3 months ago
3 months ago
3 months ago
3 months ago
11 months ago
12 months ago
12 months ago
1 year ago
1 year ago