Skip to content

Files

Latest commit

 

History

History
242 lines (166 loc) · 6.38 KB

SWIFT.md

File metadata and controls

242 lines (166 loc) · 6.38 KB

Swift

React Native Brownfield provides first-class support for Swift.

API Reference

ReactNativeBrownfield

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)

Initialization Approaches

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.


ReactNativeViewController

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])

ReactNativeView

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

Example

You can find an example app here.