{"id":37540,"date":"2025-04-23T17:30:09","date_gmt":"2025-04-23T12:00:09","guid":{"rendered":"https:\/\/mobisoftinfotech.com\/resources\/?p=37540"},"modified":"2026-03-16T15:38:51","modified_gmt":"2026-03-16T10:08:51","slug":"react-native-swiftui-embed-screen","status":"publish","type":"post","link":"https:\/\/mobisoftinfotech.com\/resources\/blog\/app-development\/react-native-swiftui-embed-screen","title":{"rendered":"React Native + SwiftUI Tutorial: How to Embed a SwiftUI Screen in Your React Native App"},"content":{"rendered":"

Ever been caught in that in-between zone where you love <\/span>react native for its <\/span>cross-platform mobile development superpowers, but wish you could tap into <\/span>SwiftUI\u2019s native iOS finesse for those trickier moments? Yeah, we\u2019ve been there too.<\/span><\/p>\n\n\n\n

Imagine your app cruising along just fine using <\/span>react native app development<\/b><\/a>, 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\u2019re thinking, \u201cThis would be so much easier in <\/span>SwiftUI.\u201d<\/span><\/p>\n\n\n\n

Good news:<\/b> you don\u2019t have to choose one or the other. In this blog, I\u2019ll walk you through how to embed <\/span>SwiftUI screens right inside your <\/span>react native app, smoothly and without a headache.<\/span><\/p>\n\n\n\n

To make this all a bit more real, I\u2019ll walk through a hands-on <\/span>react native and SwiftUI tutorial that shows just how these technologies can play together. We\u2019ll build a simple demo app with two connected screens that pass data back and forth in real time. Let\u2019s dive in.<\/span><\/p>\n\n\n\n

Step 1: Create a New React Native Project<\/b><\/h2>\n\n\n\n

Start by setting up a new React Native project:<\/span><\/p>\n\n\n

npx<\/span> @react-native-community<\/span>\/cli@latest<\/span> init RNWithSwiftUI<\/code><\/span>Code language:<\/span> CSS<\/span> (<\/span>css<\/span>)<\/span><\/small><\/pre>\n\n\n
Step 2: Setup the iOS Native Module<\/b><\/h2>\n\n\n\n
Open the iOS directory in your project in Xcode, and add a new Swift file named NativeBridge.swift<\/span><\/p>\n\n\n
import Foundation\nimport React\nimport SwiftUI\n\n\n@objc(NativeBridge)\nclass NativeBridge: NSObject {\n  \n  @objc\n  static func requiresMainQueueSetup() -> Bool {\n    return true\n  }\n  \n  @objc\n  func openSwiftUIScreen(_ data: NSDictionary, callback: @escaping RCTResponseSenderBlock) {\n    DispatchQueue.main.async {\n      let swiftUIView = SwiftUIView(data: data) { result in\n        callback([result])\n      }\n      let hostingController = UIHostingController(rootView: swiftUIView)\n      hostingController.modalPresentationStyle = .fullScreen\n      \n      let keyWindow = UIApplication.shared.connectedScenes\n        .filter { $0.activationState == .foregroundActive }\n        .compactMap { $0 as? UIWindowScene }\n        .first?.windows\n        .filter { $0.isKeyWindow }\n        .first\n      \n      if let rootViewController = keyWindow?.rootViewController {\n        rootViewController.present(hostingController, animated: true)\n      }\n    }\n  }\n}<\/code><\/span><\/pre>\n\n\n
For teams targeting web and mobile together, <\/span>react native expo with tamagui integration for web & mobile apps<\/b><\/a> is another practical approach to unify your ui stack.<\/span><\/p>\n\n\n\n