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.

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.
`bundle`	`Bundle`	`Bundle.main`	Bundle instance to lookup the JavaScript bundle resource.

Methods

`startReactNative`

Starts React Native. You can use it to initialize React Native in your app.

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)

`view`

Creates a React Native view for the specified module name.

Param	Required	Type	Description
`moduleName`	Yes	`String`	Name of React Native component registered to `AppRegistry`.
`initialProps`	No	`[AnyHashable: Any]?`	Initial properties to be passed to React Native component.
`launchOptions`	No	`[AnyHashable: Any]?`	Launch options, typically passed from AppDelegate.

Examples:

let view = ReactNativeBrownfield.shared.view(
  moduleName: "ReactNative",
  initialProps: ["score": 12]
)

Initialization Approaches

React Native Brownfield supports two main approaches for initialization:

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

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.

Need React or React Native expertise you can count on?

Let's talk Let's talk

Need help with React or React Native projects?

We support teams building scalable apps with React and React Native.

Let's talk Let's talk

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.

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.
`bundle`	`Bundle`	`Bundle.main`	Bundle instance to lookup the JavaScript bundle resource.

Methods

`startReactNative`

Starts React Native. You can use it to initialize React Native in your app.

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)

`view`

Creates a React Native view for the specified module name.

Param	Required	Type	Description
`moduleName`	Yes	`String`	Name of React Native component registered to `AppRegistry`.
`initialProps`	No	`[AnyHashable: Any]?`	Initial properties to be passed to React Native component.
`launchOptions`	No	`[AnyHashable: Any]?`	Launch options, typically passed from AppDelegate.

Examples:

let view = ReactNativeBrownfield.shared.view(
  moduleName: "ReactNative",
  initialProps: ["score": 12]
)

Initialization Approaches

React Native Brownfield supports two main approaches for initialization:

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

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`

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`

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.

#Swift

#API Reference

#ReactNativeBrownfield

#Statics

#shared

#Properties

#Methods

#startReactNative

#view

#Initialization Approaches

#UIKit AppDelegate Approach (Traditional)

#SwiftUI App Approach (Modern)

#ReactNativeViewController

#Constructors

#ReactNativeViewController(moduleName: moduleName, initialProperties: initialProperties)

#ReactNativeView

#Constructors

#ReactNativeView(moduleName: moduleName, initialProperties: initialProperties)

#Example

Need React or React Native expertise you can count on?

#Swift

#API Reference

#ReactNativeBrownfield

#Statics

#shared

#Properties

#Methods

#startReactNative

#view

#Initialization Approaches

#UIKit AppDelegate Approach (Traditional)

#SwiftUI App Approach (Modern)

#ReactNativeViewController

#Constructors

#ReactNativeViewController(moduleName: moduleName, initialProperties: initialProperties)

#ReactNativeView

#Constructors

#ReactNativeView(moduleName: moduleName, initialProperties: initialProperties)

#Example

Swift

API Reference

`ReactNativeBrownfield`

Statics

`shared`

Properties

Methods

`startReactNative`

`view`

Initialization Approaches

UIKit AppDelegate Approach (Traditional)

SwiftUI App Approach (Modern)

`ReactNativeViewController`

Constructors

`ReactNativeViewController(moduleName: moduleName, initialProperties: initialProperties)`

`ReactNativeView`

Constructors

`ReactNativeView(moduleName: moduleName, initialProperties: initialProperties)`

Example

Swift

API Reference

`ReactNativeBrownfield`

Statics

`shared`

Properties

Methods

`startReactNative`

`view`

Initialization Approaches

UIKit AppDelegate Approach (Traditional)

SwiftUI App Approach (Modern)

`ReactNativeViewController`

Constructors

`ReactNativeViewController(moduleName: moduleName, initialProperties: initialProperties)`

`ReactNativeView`

Constructors

`ReactNativeView(moduleName: moduleName, initialProperties: initialProperties)`

Example