Introduction to SwiftUI for NativeScript

ns create swiftui --tscd swiftui

npm install @nativescript/swift-ui

IPHONEOS_DEPLOYMENT_TARGET = 13.0;

import SwiftUIstruct SampleView: View {  var body: some View {    VStack {      Text("Hello World")        .padding()    }  }}

import SwiftUI@objcclass 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) -> ())?}

<Page  xmlns="http://schemas.nativescript.org/tns.xsd"   xmlns:sw="@nativescript/swift-ui"   class="page">  <StackLayout>    <sw:SwiftUI swiftId="sampleView" height="100" />  </StackLayout></Page>

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 provideddeclare const SampleViewProvider: any;registerSwiftUI("sampleView", (view) =>  new UIDataDriver(SampleViewProvider.alloc().init(), view));

open platforms/ios/swiftui.xcworkspace

import SwiftUIclass ButtonProps: ObservableObject {  @Published var count: Int = 0  var incrementCount: (() -> Void)?}struct SampleView: View {  @ObservedObject var props = ButtonProps()  var body: some View {      VStack(alignment: .center, spacing: 0) {          HStack(alignment:.center) {              Text("Count \(props.count)")                  .padding()                  .scaledToFill()                  .minimumScaleFactor(0.5)          }          HStack(alignment: .center) {              Button(action: {                  self.props.incrementCount?()              }) {                  Image(systemName: "plus.circle.fill")                      .foregroundColor(.white)                      .padding()                      .background(LinearGradient(                          gradient: Gradient(                              colors: [Color.purple, Color.pink]), startPoint: .top, endPoint: .bottom                      ))                      .clipShape(Circle())              }          }      }      .padding()      .clipShape(Circle())  }}

import SwiftUI@objcclass 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)    registerObservers()  }  // MARK: PRIVATE  private var swiftUIView = SampleView()  private func registerObservers() {    swiftUIView.props.incrementCount = {      let count = self.swiftUIView.props.count + 1      // update swiftUI view      self.swiftUIView.props.count = count      // notify nativescript      self.onEvent?(["count": count])    }  }  // MARK: API  /// Receive data from NativeScript  func updateData(data: NSDictionary) {    if let count = data.value(forKey: "count") as? Int {      // update swiftUI view      swiftUIView.props.count = count      // notify nativescript      self.onEvent?(["count": count])    }  }  /// Send data to NativeScript  var onEvent: ((NSDictionary) -> Void)?}

<Page  xmlns="http://schemas.nativescript.org/tns.xsd"  xmlns:sw="@nativescript/swift-ui"  navigatingTo="navigatingTo">  <StackLayout>    <sw:SwiftUI swiftId="sampleView" data="{{ nativeCount }}" swiftUIEvent="{{ onEvent }}" loaded="{{ loadedSwiftUI }}" />    <Label text="{{ 'NativeScript Label: ' + nativeCount.count }}" class="h2" />    <Button text="NativeScript data bindings: Decrement" tap="{{ updateNativeScriptData }}" class="btn btn-primary" />    <Button text="SwiftUI data bindings: Decrement" tap="{{ updateSwiftData }}" class="btn btn-primary" />  </StackLayout></Page>

import {  registerSwiftUI,  UIDataDriver,  SwiftUI,  SwiftUIEventData,} from "@nativescript/swift-ui";import {   EventData,  Observable,  Page} from "@nativescript/core";// 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 provideddeclare const SampleViewProvider: any;registerSwiftUI("sampleView", (view) =>  new UIDataDriver(SampleViewProvider.alloc().init(), view));interface CountData {  count: number;}export function navigatingTo(args: EventData) {  const page = <Page>args.object;  page.bindingContext = new DemoModel();}export class DemoModel extends Observable {  swiftui: SwiftUI;  nativeCount = {    count: 0,  };  loadedSwiftUI(args) {    this.swiftui = args.object;  }  onEvent(evt: SwiftUIEventData<CountData>) {    this.set("nativeCount", { count: evt.data.count });  }  updateNativeScriptData() {    this.set('nativeCount', { count: this.nativeCount.count - 1 });  }  updateSwiftData() {    this.swiftui.updateData({ count: this.nativeCount.count - 1 });  }}