DEV Community

Mobisoft Infotech
Mobisoft Infotech

Posted on

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

Image description
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
Enter fullscreen mode Exit fullscreen mode

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)
      }
    }
  }
}
Enter fullscreen mode Exit fullscreen mode
  • 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

Runner H image

Overwhelmed? Let an AI Handle Your Tasks

Runner H clears your inbox, summarizes Slack threads, and plans your week — without you lifting a finger. You delegate once. It handles the rest.

Try Runner H

Top comments (0)

Warp.dev image

The best coding agent. Backed by benchmarks.

Warp outperforms every other coding agent on the market, and gives you full control over which model you use. Get started now for free, or upgrade and unlock 2.5x AI credits on Warp's paid plans.

Download Warp

👋 Kindness is contagious

Explore this insightful write-up, celebrated by our thriving DEV Community. Developers everywhere are invited to contribute and elevate our shared expertise.

A simple "thank you" can brighten someone’s day—leave your appreciation in the comments!

On DEV, knowledge-sharing fuels our progress and strengthens our community ties. Found this useful? A quick thank you to the author makes all the difference.

Okay