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 RNWithSwiftUICode language: CSS (css)

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) { 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? } } }

• 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.

Step 3: Setup the SwiftUI View

Add a new SwiftUI View file to your iOS project.

import SwiftUI struct SwiftUIView:.padding() }.padding().navigationTitle("SwitftUI").navigationBarTitleDisplayMode(.large) } } }Code language: JavaScript (javascript)

The SwiftUI view above takes care of a few key tasks:

• It displays the data received from React Native
• Let the user input new information
• Sends that updated data back to React Native
• And finally, it handles dismissing itself when done

This approach blends the benefits of hybrid mobile app development with the fluid UI capabilities of SwiftUI and shows the flexibility you get when you hire react native developers who know how to make both ecosystems work together effectively.

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

Mobisoft Infotech: A global leader in digital innovation and technology adoption. Specializing in Mobile, Cloud, DevOps, Web, IoT, AI, UI/UX, Testing, RPA, and digital transformation services. Over a decade of experience, serving clients in 30+ count