React Native Brownfield provides first-class support for Swift.
You can import the object from:
import ReactBrownfield
Statics:
shared
A singleton that keeps an instance of ReactNativeBrownfield
object.
Examples:
ReactNativeBrownfield.shared
Properties:
Property | Type | Default | Description |
---|---|---|---|
entryFile |
String |
index | Path to JavaScript root. |
fallbackResource |
String? |
nil | Path to bundle fallback resource. |
bundlePath |
String |
main.jsbundle | Path to bundle fallback resource. |
reactNativeFactory |
RCTReactNativeFactory? |
nil | React Native factory instance. |
Methods:
startReactNative
Starts React Native. You can use it to initialize React Native in your app.
Params:
Param | Required | Type | Description |
---|---|---|---|
onBundleLoaded |
No | (() -> Void)? |
Callback invoked after JS bundle is fully loaded. |
launchOptions |
No | [AnyHashable: Any]? |
Launch options, typically passed from AppDelegate. |
Examples:
ReactNativeBrownfield.shared.startReactNative()
ReactNativeBrownfield.shared.startReactNative(onBundleLoaded: {
print("React Native started")
})
ReactNativeBrownfield.shared.startReactNative(onBundleLoaded: {
print("React Native started")
}, launchOptions: launchOptions)
React Native Brownfield supports two main approaches for initialization:
1. UIKit AppDelegate Approach (Traditional)
import UIKit
import ReactBrownfield
class AppDelegate: UIResponder, UIApplicationDelegate {
var window: UIWindow?
func application(_ application: UIApplication, didFinishLaunchingWithOptions launchOptions: [UIApplication.LaunchOptionsKey: Any]?) -> Bool {
ReactNativeBrownfield.shared.startReactNative {
print("React Native bundle loaded")
}
return true
}
}
To present a React Native view in a UIKit app, use ReactNativeViewController
:
import UIKit
import ReactBrownfield
class ViewController: UIViewController {
@IBAction func openReactNativeScreen(_ sender: UIButton) {
let reactNativeVC = ReactNativeViewController(moduleName: "ReactNative")
present(reactNativeVC, animated: true)
}
}
2. SwiftUI App Approach (Modern)
import SwiftUI
import ReactBrownfield
@main
struct MyApp: App {
init() {
ReactNativeBrownfield.shared.startReactNative {
print("React Native bundle loaded")
}
}
var body: some Scene {
WindowGroup {
ContentView()
}
}
}
To display React Native views in SwiftUI, use the provided ReactNativeView
component:
import SwiftUI
import ReactBrownfield
struct ContentView: View {
var body: some View {
NavigationView {
VStack {
Text("Welcome to the Native App")
.padding()
NavigationLink("Push React Native Screen") {
ReactNativeView(moduleName: "ReactNative")
.navigationBarHidden(true)
}
}
}
}
}
The ReactNativeView
component is a SwiftUI wrapper around ReactNativeViewController
that handles navigation and lifecycle events automatically.
Both approaches achieve the same result - initializing React Native when your app launches and presenting React Native screens when needed. Choose the approach that best fits your app architecture.
A view controller that's rendering React Native view within its bounds. It automatically uses an instance of a factory created in startReactNative
method. It works well with exposed JavaScript module. It's the simplest way to embed React Native into your navigation stack.
You can import it from:
import ReactBrownfield
Constructors:
ReactNativeViewController(moduleName: moduleName, initialProperties: initialProperties)
Param | Required | Type | Description |
---|---|---|---|
moduleName |
Yes | String |
Name of React Native component registered to AppRegistry . |
initialProperties |
No | [String: Any]? |
Initial properties to be passed to React Native component. |
Examples:
ReactNativeViewController(moduleName: "ReactNative")
ReactNativeViewController(moduleName: "ReactNative", initialProperties: ["score": 12])
A SwiftUI view that wraps the ReactNativeViewController
, making it easy to integrate React Native into SwiftUI navigation flows. It automatically handles navigation events like "pop to native" from React Native.
You can import it from:
import ReactBrownfield
Constructors:
ReactNativeView(moduleName: moduleName, initialProperties: initialProperties)
Param | Required | Type | Description |
---|---|---|---|
moduleName |
Yes | String |
Name of React Native component registered to AppRegistry . |
initialProperties |
No | [String: Any] |
Initial properties to be passed to React Native component. |
Examples:
ReactNativeView(moduleName: "ReactNative")
ReactNativeView(moduleName: "ReactNative", initialProperties: ["score": 12])
Usage with SwiftUI navigation:
NavigationLink("Open React Native Screen") {
ReactNativeView(moduleName: "ReactNative")
.navigationBarHidden(true)
}
You can find an example app here.