#Kotlin

React Native Brownfield provides first-class support for Kotlin.

#React Native >= 0.80.0

With react-native >= 0.80.0, an auto-generated file was added which is responsible to load your App's native libs. If you're consuming this library in a RN project, then you will have this file ReactNativeApplicationEntryPoint available. If you're consuming this library in a RN android library which is backed by com.callstack.react:brownfield-gradle-plugin, then this file will also be available.

Below is the code you need to add before you call ReactNativeBrownfield.initialize:

import com.facebook.react.ReactNativeApplicationEntryPoint.loadReactNative

loadReactNative(application)
ReactNativeBrownfield.initialize(application, packages)

#API Reference

#ReactNativeBrownfield

You can import the object from:

import com.callstack.reactnativebrownfield.ReactNativeBrownfield

#Statics

#initialize

A function used to initialize a React Native Brownfield singleton. Keep in mind that it doesn't load React Native bundle.

* - From the marked fields, exactly one must be specified, excluding the others. See examples below.

Available options:

• useDeveloperSupport: Boolean - Flag to use dev support.
• packages: List<ReactPackage> - List of your React Native Native modules.
• mainModuleName: String - Path to react native entry file (when loading from Metro).
• bundleAssetPath: String - Path to react native bundle asset file (when loading from app assets), appended to asset://.

Examples:

import com.callstack.reactnativebrownfield.ReactNativeBrownfield

val mReactNativeHost = object : ReactNativeHost(application) {
  override fun getUseDeveloperSupport(): Boolean {
    return BuildConfig.DEBUG
  }

  override fun getPackages(): List<ReactPackage> {
    return listOf<ReactPackage>(PackageList(this).getPackages())
  }

  override fun getJSMainModuleName(): String {
    return "index"
  }
}

ReactNativeBrownfield.initialize(this, mReactNativeHost)

// OR

ReactNativeBrownfield.initialize(this, mReactNativeHost) {
  // onJSBundleLoaded
}

val packages = PackageList(this).getPackages()

ReactNativeBrownfield.initialize(this, packages)

// OR

ReactNativeBrownfield.initialize(this, packages) {
  // onJSBundleLoaded
}

val packages = PackageList(this).getPackages()
val options = hashMapOf<String, Any>(
  "packages" to packages,
  "mainModuleName" to "example/index"
)

ReactNativeBrownfield.initialize(this, options)

// OR

ReactNativeBrownfield.initialize(this, options) {
  // onJSBundleLoaded
}

#shared

A singleton that keeps an instance of ReactNativeBrownfield object.

ReactNativeBrownfield.shared

#Properties

#Methods

#createView

Creates a React Native view with a given module name. It automatically uses an instance of React Native created in initialize method. This is useful when embedding React Native views directly in your native layouts or Jetpack Compose UI.

Returns: FrameLayout - A view containing the React Native component.

Examples:

// In a Fragment or Activity
val reactView = ReactNativeBrownfield.shared.createView(
  context,
  activity,
  "ReactNative"
)
container.addView(reactView)

// With Jetpack Compose
AndroidView(
  factory = { context ->
    ReactNativeBrownfield.shared.createView(context, fragmentActivity, "ReactNative")
  },
  modifier = Modifier.fillMaxSize()
)

#ReactNativeFragment

A fragment rendering ReactRootView with a given module name. It automatically uses an instance of React Native created in initialize method. It works well with exposed JavaScript module. All the lifecycles are proxied to ReactInstanceManager. It's the simplest way to embed React Native into your navigation stack.

import com.callstack.reactnativebrownfield.ReactNativeFragment

#Statics

#createReactNativeFragment

Creates a Fragment with ReactNativeActivity, you can use it as a parameter in the startActivity method in order to push a new activity with embedded React Native.

Examples:

ReactNativeFragment.createReactNativeFragment("ReactNative")

val bundle = Bundle()
bundle.putInt("score", 12)

ReactNativeFragment.createReactNativeFragment("ReactNative", bundle)

val map = hashMapOf<String, *>("score" to 12)

ReactNativeFragment.createReactNativeFragment("ReactNative", map)

val map = WritableMap()
map.putInt("score", 12)

ReactNativeFragment.createReactNativeFragment("ReactNative", map)

#Usage in Jetpack Compose

You can easily wrap the ReactNativeFragment inside an AndroidFragment composable to integrate React Native into your Jetpack Compose application. Since the AndroidFragment itself acts as a factory for the given Fragment class, you can pass the required arguments using a Bundle.

The arguments passed to the AndroidFragment match the ones that can be passed to the ReactNativeFragment.createReactNativeFragment factory, yet need to be packed inside a Bundle, as follows:

• (required) the JS component name, a String under the ReactNativeFragmentArgNames.ARG_MODULE_NAME (equivalent to "arg_module_name") constant
• (optional) the initial properties, a Bundle under the ReactNativeFragmentArgNames.ARG_LAUNCH_OPTIONS (equivalent to "arg_launch_options") constant

import androidx.fragment.compose.AndroidFragment

import com.callstack.reactnativebrownfield.constants.ReactNativeFragmentArgNames

AndroidFragment<ReactNativeFragment>(arguments = Bundle().apply {
  putString(ReactNativeFragmentArgNames.ARG_MODULE_NAME, "ReactNative")
  putBundle(ReactNativeFragmentArgNames.ARG_LAUNCH_OPTIONS, initialProps)
}, modifier = Modifier.fillMaxSize())

#Example

You can find an example app here.