React Native + SwiftUI Tutorial: How to Embed a SwiftUI Screen in Your React Native App

Ever been caught in that in-between zone where you love react native for its cross-platform mobile development superpowers, but wish you could tap into SwiftUI’s native iOS finesse for those trickier moments? Yeah, we’ve been there too.

Imagine your app cruising along just fine using react native app development, but then you hit a screen that needs more. For instance, an AR view, a complex animation, or something that needs to feel deeply native on iOS. And suddenly, you’re thinking, “This would be so much easier in SwiftUI.”

Good news: you don’t have to choose one or the other. In this blog, I’ll walk you through how to embed SwiftUI screens right inside your react native app, smoothly and without a headache.

To make this all a bit more real, I’ll walk through a hands-on react native and SwiftUI tutorial that shows just how these technologies can play together. We’ll build a simple demo app with two connected screens that pass data back and forth in real time. Let’s dive in.

Step 1: Create a New React Native Project

Start by setting up a new React Native project:

npx @react-native-community/cli@latest init RNWithSwiftUI

For teams targeting web and mobile together, react native expo with tamagui integration for web & mobile apps is another practical approach to unify your ui stack.

Step 2: Setup the iOS Native Module

Open the iOS directory in your project in Xcode, and add a new Swift file named NativeBridge.swift

import Foundation
import React
import SwiftUI


@objc(NativeBridge)
class NativeBridge: NSObject {
  
  @objc
  static func requiresMainQueueSetup() -> Bool {
    return true
  }
  
  @objc
  func openSwiftUIScreen(_ data: NSDictionary, callback: @escaping RCTResponseSenderBlock) {
    DispatchQueue.main.async {
      let swiftUIView = SwiftUIView(data: data) { result in
        callback([result])
      }
      let hostingController = UIHostingController(rootView: swiftUIView)
      hostingController.modalPresentationStyle = .fullScreen
      
      let keyWindow = UIApplication.shared.connectedScenes
        .filter { $0.activationState == .foregroundActive }
        .compactMap { $0 as? UIWindowScene }
        .first?.windows
        .filter { $0.isKeyWindow }
        .first
      
      if let rootViewController = keyWindow?.rootViewController {
        rootViewController.present(hostingController, animated: true)
      }
    }
  }
}

• This NativeBridge acts as the main entry point for communication between React Native and native iOS code.
• The @objc(NativeBridge) annotation makes this Swift class available to Objective-C and React Native.
• requiresMainQueueSetup method tells React Native that this module needs to be initialized on the main thread.
• openSwiftUIScreen:  This method is invoked from the React Native side.First Parameter:_ data: NSDictionary: Receives data from React Native.Second Parameter:callback: @escaping RCTResponseSenderBlock: Sends data back to React Native.
• Presents the SwiftUIView view modally on the root view controller.

Planning to scale your app globally? See how to start adding multilingual support to your react native app for international readiness.

Read More: React Native + SwiftUI Tutorial: How to Embed a SwiftUI Screen in Your React Native App