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)")
      Button(action: {
        self.props.onCountChange(["count": self.props.count + 1])
      }) {
        Image(systemName: "")

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 (
      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:

Published by Bramus!

Bramus is a frontend web developer from Belgium, working as a Chrome Developer Relations Engineer at Google. From the moment he discovered view-source at the age of 14 (way back in 1997), he fell in love with the web and has been tinkering with it ever since (more …)

Leave a comment

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.