React Native + SwiftUI

Kureev Alexey on how to use SwiftUI Components in an React Native App.

Today, we’ll write a proxy that allows developers to use SwiftUI in their React Native applications.

The Native SwiftUI Button Component looks like this:

struct SwiftUIButton : View {
  @ObservedObject var props = ButtonProps()
  
  var body: some View {
    VStack {
      Text("Count \(props.count)")
        .padding()
      
      Button(action: {
        self.props.onCountChange(["count": self.props.count + 1])
      }) {
        Image(systemName: "plus.circle.fill")
          .foregroundColor(.white)
          .padding()
          .background(Color.red)
          .clipShape(Circle())
      }
    }
    .padding()
    .clipShape(Circle())
  }
}

You’d then use like you’d use any other Native Component:

import React, {useState} from 'react';
import {requireNativeComponent} from 'react-native';

const SwiftUIButton = requireNativeComponent('SwiftUIButton');

const App = () => {
  const [count, updateCount] = useState(0);
  return (
    <SwiftUIButton
      style={styles.container}
      count={count}
      onCountChange={e => updateCount(e.nativeEvent.count)}
    />
  );
};

To make it work he created two new macros to use: RCT_EXPORT_SWIFTUI_PROPERTY and RCT_EXPORT_SWIFTUI_CALLBACK.

React Native Meets SwiftUI →
ReactNativeWithSwiftUITutorial Repository →

Building further upon the code, some nice integrations have already been made. Such as this one:

SwiftUI by Example – Free Course on SwiftUI

Paul Hudson, creator of Hacking with Swift:

Yes, that’s a full course on SwiftUI already available online, for free!

Sections include:

  • Introduction: A brief explanation of the basics of SwiftUI
  • Text and Images: Getting started with basic controls
  • View Layout: Position views in a grid structure
  • Reading input: Respond to interaction and control your program state
  • Lists: Create scrolling tables of data
  • Containers: Place your views inside a navigation controller
  • Alerts and action sheets: Show modal notifications when something happens
  • Presenting views: Move your user from one view to another
  • Transforming views: Clip, size, scale, spin, and more
  • Animation: Bring your views to life with movement

Amazing!

SwiftUI by Example →

TIP: Do note that the order of statements in SwiftUI is important:

SwiftUI

Yesterday, apart from revealing a $999 monitor stand, Apple announced SwiftUI which got me quite excited.

SwiftUI is an innovative, exceptionally simple way to build user interfaces across all Apple platforms with the power of Swift. Build user interfaces for any Apple device using just one set of tools and APIs. With a declarative Swift syntax that’s easy to read and natural to write, SwiftUI works seamlessly with new Xcode design tools to keep your code and design perfectly in sync.

The code samples feels very React Native like imho:

List(landmarks) { landmark in
   HStack {
      Image(landmark.thumbnail)
      Text(landmark.name)
      Spacer()
      
      if landmark.isFavorite {
         Image(systemName: "star.fill")
            .foregroundColor(.yellow)
      }
   }
}

As @orta noted:

SwiftUI →

🤔 Wondering how fast one could build stuff when SwiftUI is combined with the also announced Combine Framework